# PinFlow — Full Documentation

> Complete content from all pages on getpinflow.com

---
title: How to Add an Image to a Shopify Accordion
description: Shopify's collapsible (accordion) block only accepts text, so the dynamic source picker never offers an image. Here is the no-code-file way to show a per-product image inside an accordion row, like a size guide.
---

## The problem

A merchant asked about this on the Shopify Community. They run the Trade theme and wanted to show an image inside one of the collapsible rows on a product page.

An accordion, or collapsible, is one of those rows on the product page that opens when you click it. "Product features", "Materials and care", "Shipping". You click the heading and it drops open to show text.

They wanted to drop an image in there instead of text. A size chart, a certificate, a care diagram. And they wanted it to be different for each product, pulled from a dynamic source.

They got stuck fast. The collapsible block only lets you type text. They tried pasting code into the theme's Custom CSS box, and nothing happened. They tried switching a setting from text to liquid, and the image came out blank.

I reproduced the whole thing on a test store running Trade. Every part of what they hit is expected, and the fix is small.

## Why you cannot pick an image in an accordion

This is worth understanding, because it tells you why the fix has to be code.

The collapsible block on the product page has one content field, and that field only accepts text or rich text. That is the whole design of it.

When you click the dynamic source icon on that field, Shopify only offers you text-based metafields. There is no image option in that list, so there is nothing to pick. A rich text field will not hold an image either.

So the accordion itself gives you no way in. The image has to be printed by a small piece of Liquid, the theme's template language. That is the only way to get an actual image tag inside the collapsible content.

Two things the merchant tried, and why neither worked:

- The Custom CSS box cannot run Liquid. It only styles what is already on the page. Pasting Liquid there does nothing.
- Changing a setting from text to liquid does not, on its own, render an image. It just changes what kind of value the field expects.

## Two ways to put an image in a Shopify accordion

There are two clean routes, and you almost always want the first one.

**Its own collapsible row, no theme files.** You add a Custom Liquid block to the product page. Inside it you build one accordion row that holds the image. It looks exactly like the theme's other rows, and you never touch a theme code file. This is the one I recommend, and the steps below use it.

**Inside an existing row.** If you want the image to sit inside one of your current rows, next to its text, that needs a small edit in the theme's code. It is doable, but it means editing a core theme file, so keep it for when you specifically need the image beside existing text.

## Step by step: add an image to a Shopify accordion

This works with a File metafield and a Custom Liquid block. No theme code files are edited. I tested every step on Trade.

### 1. Create an image field

Go to Settings, then Custom data, then Products, then Add definition.

Name it Detail image. Set the Type to File, then choose Image. Save.

![The Detail image product metafield in Shopify, set to type File then Image](/images/blog/add-image-shopify-accordion/02-detail-image-metafield.png)

That File type is the piece the accordion's dynamic source picker never offers you. Creating it as its own field is what gives you an image to work with.

### 2. Put an image on the product

Open a product. Scroll to its Metafields section and find Detail image. If you do not see it, click View all metafields.

Upload the image you want for that product. Each product gets its own, so a shirt can show its size chart and a candle can show its burn guide.

### 3. Add a Custom Liquid block

Go to Online Store, then Themes, then the three dots, then Customize. Open a product.

In the product information area, click Add block, then Custom Liquid.

Paste this and Save:

```liquid
{%- assign detail_img = product.metafields.custom.detail_image.value -%}
{%- if detail_img != blank -%}
  <div class="product__accordion accordion quick-add-hidden">
    <details id="Details-detail-image-{{ section.id }}">
      <summary>
        <div class="summary__title">
          <h2 class="h4 accordion__title inline-richtext">Size guide</h2>
        </div>
        {{- 'icon-caret.svg' | inline_asset_content -}}
      </summary>
      <div class="accordion__content rte">
        {{ detail_img | image_url: width: 1200 | image_tag: loading: 'lazy' }}
      </div>
    </details>
  </div>
{%- endif -%}
```

That is it. You get a new collapsible row, styled like the theme's own rows, with that product's image inside it.

![A per-product image showing inside its own collapsible accordion row on a Shopify product page](/images/blog/add-image-shopify-accordion/01-image-inside-shopify-accordion.png)

Change the word Size guide to whatever heading you want. The row only appears on products that have an image, so any product without one stays clean.

## The one line that fixes the "blank image"

The merchant's earlier attempt showed a blank image. This is the most common mistake, and it is one word.

Look at the top of the snippet: `detail_image.value`. That `.value` matters.

A File metafield does not hand you the image directly. It hands you a reference. Adding `.value` is what turns that reference into the actual image, which the `image_url` and `image_tag` filters then need to build the tag.

Leave off `.value` and Shopify has nothing real to draw, so the image comes out empty. That is the blank image. Put `.value` back and it renders.

If yours is still blank after adding `.value`, the metafield on that product is probably empty. Go back to step 2 and upload the image.

## Shopify accordion, collapsible content, and product tabs

People use these words for the same thing, which causes confusion when searching for help.

- **Accordion** is the general name for rows that expand when clicked.
- **Collapsible row** or **collapsible content** is Shopify's own name for the block, in Dawn and its family.
- **Product tabs** usually means the same rows, sometimes styled as side-by-side tabs by an app or a paid theme.

Underneath, they are the same idea. The block takes text, not images, so the image fix above is the same whichever name your theme uses.

## Add a size guide image to a Shopify product page

The size guide is the classic reason to want this, so it is worth calling out.

The steps are exactly the ones above. Name the metafield Size guide, upload a size chart image per product, and set the heading in the snippet to Size guide.

Because the image is per product, each product shows its own chart. A dress shows dress measurements, a jacket shows jacket measurements, and you never mix them up.

If you would rather have one shared size chart for the whole store, see the next section.

## Can I show the same image on every product?

Yes. If the image never changes, you do not need a metafield at all.

Upload the image under Content, then Files, and copy its URL. Then replace the metafield line in the snippet with that image, so every product shows the same one.

The metafield route is only there so each product can differ. Drop it when you want one shared image, like a store-wide shipping graphic.

## What to check if it did not work

A few things trip people up. Run through these.

- **Blank image.** You are missing `.value`, or the product has no image uploaded yet.
- **The row never appears.** The product has no image, so the guard hides the row on purpose. Upload one. Or the Custom Liquid block was not actually added to the product page.
- **The image is huge.** Lower the `width: 1200` number, or the image is fine and just looks big because the row is narrow. You can also cap it with a little CSS.
- **Nothing renders at all.** Make sure you pasted into a Custom Liquid block on the product page, not into the Custom CSS box. CSS cannot run Liquid.

## Would an app be easier?

If the image you want is a size chart, an app can be simpler than any code, and most have a free tier.

Size chart apps like Kiwi Sizing, Avada Size Chart, or Clean Size Chart let you build a chart, assign it by product or collection, and drop it on the product page with a button. No metafields and no Liquid.

The trade-off is that the app owns the look and adds its own script to your store. The code route above keeps everything native to your theme and adds nothing extra to load. For a plain per-product image, the code route is lighter. For a full interactive size table, an app is usually worth it.

## Which themes this works on

I tested this on Trade. The same snippet works on Dawn and the free Dawn-family themes, because they share the same collapsible markup and class names.

If your theme is a paid one with a very different structure, the class names in the snippet may differ. The idea still holds: a Custom Liquid block, a File metafield, and `.value`. Only the wrapper classes change to match your theme.

That is the whole fix. A merchant went from a blank image and a dead end to a real, per-product image sitting inside a collapsible row, with no theme code files touched.


---

---
title: "How to Add Scrolling Testimonials to Shopify (No App)"
description: A merchant wanted a smooth marquee of 5-star testimonials on their Supply store. Here is a free custom section that scrolls non-stop, no app, with the full code and step-by-step screenshots.
---

## The problem

A merchant asked about this on the Shopify Community, and it is a request I see a lot.

They wanted a scrolling marquee of customer testimonials on their home page. A single row of cards that glides sideways at a steady pace and never stops. Each card showing a 5-star rating, a short quote, and the customer's name. Clean, premium, on-brand.

They had years of real feedback sitting on a testimonials page and wanted it moving across the front page where new visitors would actually see it.

They run **Supply**, one of Shopify's older free themes. So the first thing they found is that there is no "scrolling testimonials" block anywhere in the theme. There is nothing to just switch on.

There does not need to be. This is a small custom section that lives in your theme as a text file. No app, no monthly fee. Here is the finished thing running on a store.

![A scrolling testimonials marquee live on a Shopify home page](/images/blog/add-scrolling-testimonials-shopify/01-scrolling-testimonials-live.jpeg)

I reproduced this on a vintage Shopify theme and it took one file and about five minutes. The rest of this guide is that file plus the exact clicks.

## Testimonials or product reviews? Pick the right one first

Before you build anything, know which of these two you actually want, because people mix them up and then install the wrong thing.

**Testimonials** are quotes you control. You write them, you choose which ones show, and they sit wherever you place them. Great for a home page trust strip. That is what this guide builds.

**Product reviews** are star ratings customers leave on individual products. Those need a reviews app that collects, verifies, and stores them per product. If your goal is "let buyers rate my products," that is a different job and an app like Judge.me or Loox is the right tool.

The marquee below is testimonials. You type the quotes in, so it works even if you have never collected a single product review. If you later want it fed by verified reviews instead, I cover that at the end.

## Why older themes have no marquee block

This is worth understanding, because it decides how you add anything custom to your store.

Themes come in two broad generations. Newer themes (Dawn, Horizon, and most 2021-and-later themes) are built from sections and blocks you can drop anywhere. Older free themes like Supply, Debut, Brooklyn, and Minimal are from an earlier era. They ship a fixed set of home page sections and that is mostly it.

Supply does one helpful thing though. Its home page still supports adding sections. That means if you create a new section file, and that file declares a **preset**, it shows up in the theme editor's "Add section" list like any built-in one. No editing of template files, no theme surgery.

So the plan is two parts. Create the section file once in the code editor. Then drop it on the home page from the customizer like any other section. Let us do it.

## What you are building

A Shopify section is a single `.liquid` file in your theme's `sections` folder. This one has three jobs.

**The markup and the animation.** A row of cards, printed twice, sliding left forever with a CSS animation. Printing the set twice is the trick that makes the loop seamless, and I explain it below.

**The settings.** A schema block at the bottom generates the controls you see in the theme editor: heading, scroll speed, card width, and colours. You never touch code again to tune it.

**The testimonials.** Each testimonial is a repeatable block with a quote and a name. Add, edit, reorder, and delete them from the sidebar. The 5 stars are printed on every card automatically.

## Step 1: create the section file

Go to **Online Store > Themes**. Next to your theme, open the **...** menu and click **Edit code**.

In the file list on the left, click the **sections** folder, then the **New file** icon. Name it `testimonial-marquee` and keep the type as Liquid.

![Shopify code editor, adding a new section file](/images/blog/add-scrolling-testimonials-shopify/02-edit-code-new-section.jpeg)

Shopify creates the file with a little starter code. Delete all of it, paste in the code below, and save.

```liquid
{%- assign speed = section.settings.speed | default: 40 -%}
<div class="tm-wrap" style="
  background: {{ section.settings.bg_color }};
  padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">

  {%- if section.settings.heading != blank -%}
    <h2 class="tm-heading" style="color: {{ section.settings.heading_color }};">
      {{ section.settings.heading }}
    </h2>
  {%- endif -%}

  <div class="tm-marquee" id="tm-{{ section.id }}">
    <div class="tm-track">
      {%- for i in (1..2) -%}
        {%- for block in section.blocks -%}
          <div class="tm-card" {{ block.shopify_attributes }} style="
            width: {{ section.settings.card_width }}px;
            background: {{ section.settings.card_color }};
            color: {{ section.settings.text_color }};">
            <div class="tm-stars" aria-hidden="true">★★★★★</div>
            <p class="tm-quote">{{ block.settings.quote }}</p>
            {%- if block.settings.name != blank -%}
              <p class="tm-name">{{ block.settings.name }}</p>
            {%- endif -%}
          </div>
        {%- endfor -%}
      {%- endfor -%}
    </div>
  </div>
</div>

<style>
  #tm-{{ section.id }} { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  #tm-{{ section.id }} .tm-track { display: flex; width: max-content; gap: 20px; animation: tm-scroll-{{ section.id }} {{ speed }}s linear infinite; }
  @keyframes tm-scroll-{{ section.id }} { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .tm-heading { text-align: center; margin: 0 0 26px; font-size: 28px; letter-spacing: .5px; }
  #tm-{{ section.id }} .tm-card { flex: 0 0 auto; box-sizing: border-box; padding: 26px 24px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.08); text-align: left; }
  #tm-{{ section.id }} .tm-stars { color: #f5b301; font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
  #tm-{{ section.id }} .tm-quote { font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
  #tm-{{ section.id }} .tm-name { font-size: 14px; font-weight: 700; margin: 0; opacity: .85; }
</style>

{% schema %}
{
  "name": "Testimonials marquee",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "What our customers say" },
    { "type": "range", "id": "speed", "min": 15, "max": 90, "step": 5, "unit": "s", "label": "Scroll speed (lower = faster)", "default": 40 },
    { "type": "range", "id": "card_width", "min": 240, "max": 480, "step": 10, "unit": "px", "label": "Card width", "default": 320 },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg_color", "label": "Section background", "default": "#0f1115" },
    { "type": "color", "id": "heading_color", "label": "Heading text", "default": "#ffffff" },
    { "type": "color", "id": "card_color", "label": "Card background", "default": "#ffffff" },
    { "type": "color", "id": "text_color", "label": "Card text", "default": "#1a1a1a" },
    { "type": "header", "content": "Spacing" },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Padding top", "default": 48 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Padding bottom", "default": 48 }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        { "type": "textarea", "id": "quote", "label": "Quote", "default": "Fantastic service and the radio works perfectly." },
        { "type": "text", "id": "name", "label": "Customer name", "default": "Happy customer" }
      ]
    }
  ],
  "presets": [
    { "name": "Testimonials marquee",
      "blocks": [
        { "type": "testimonial" }, { "type": "testimonial" }, { "type": "testimonial" },
        { "type": "testimonial" }, { "type": "testimonial" }
      ]
    }
  ]
}
{% endschema %}
```

![Pasting the section code into the Shopify code editor and saving](/images/blog/add-scrolling-testimonials-shopify/03-paste-section-code.jpeg)

That is the whole thing. Nothing else to install.

## Step 2: add it to your home page

Leave the code editor and click **Customize** to open the theme editor.

On the home page, click **Add section**. Because the file declares a preset, **Testimonials marquee** is right there in the list with a live preview. Click it.

![Adding the Testimonials marquee section from the Shopify theme editor](/images/blog/add-scrolling-testimonials-shopify/04-add-section-homepage.jpeg)

It drops onto the page already scrolling, with five sample cards so you can see the shape immediately.

## Step 3: add your own reviews

In the sidebar, the section expands to show the testimonial blocks.

Click each **Testimonial** to set its quote and the customer's name. Use **Add Testimonial** to add more, drag them to reorder, and delete any you do not want. The 5 stars appear on every card automatically, so you do not type them.

![Editing the testimonial quote and name blocks in the Shopify theme editor](/images/blog/add-scrolling-testimonials-shopify/05-edit-testimonial-blocks.jpeg)

Add as many as you like. More cards just make a longer loop.

## Step 4: speed, width, and colours

Open the section's own settings and you get the knobs.

- **Scroll speed.** Lower number means faster. The default of 40 is a calm, premium glide. Drop it to 20 for something livelier.
- **Card width.** Narrower cards fit more on screen at once.
- **Colours.** Section background, heading, card background, and card text. The default is a dark, premium look, but set the section background to white and the card text dark if that suits your brand better.

![The Testimonials marquee settings: speed, card width, and colours](/images/blog/add-scrolling-testimonials-shopify/06-settings-speed-colours.jpeg)

Save, and it is live. It stays a single smooth row on desktop and mobile.

## The one trick that makes the loop seamless

This is the part people get wrong, so it is worth a minute.

A naive marquee scrolls one set of cards off the left edge, then jumps back to the start. You see the jump, and it looks broken.

The fix is in these two lines of the code you pasted:

```liquid
{%- for i in (1..2) -%}
  {%- for block in section.blocks -%}
```

The cards are printed **twice**. The animation then slides the whole track left by exactly half its width (`translateX(-50%)`). At the moment the first copy has fully scrolled off, the second copy is sitting in precisely the position the first one started in. The animation loops, but because the two halves are identical, the seam is invisible. It looks like one endless river of cards.

That is why the loop never stutters. Do not remove the `(1..2)` loop or the `-50%`, they are a matched pair.

## Common tweaks

**Make it pause when someone hovers.** Add this one line inside the `<style>` block:

```css
#tm-{{ section.id }}:hover .tm-track { animation-play-state: paused; }
```

**Make the stars a different colour.** Change `color: #f5b301` in the `.tm-stars` rule to any hex you like.

**Show four stars instead of five.** Edit the star string in the markup. `★★★★☆` gives four filled and one empty.

**Put it lower on the page.** In the theme editor, drag the section up or down in the sidebar like any other.

## If it does not scroll

A few things to check, in order.

- **You saved the file.** The code editor does not auto-save. Look for a saved confirmation before you leave.
- **The section is actually on the page.** Adding the file in the code editor does not place it. You still do Step 2, Add section, in the customizer.
- **You have at least two or three cards.** With a single card there is nothing to loop past, so the movement is hard to notice.
- **You did not delete the `<style>` block.** The animation lives there. Paste the whole file, not just the top half.

## Doing it without touching code

If you would rather not paste Liquid at all, or you want the cards fed by real verified reviews instead of quotes you type, an app is the cleaner route.

Review apps like **Judge.me**, **Loox**, **Okendo**, and **Yotpo** collect star reviews from your buyers, then offer a carousel or scrolling widget you drop on the home page from the theme editor. You get moderation, verified badges, and photo reviews, and the marquee updates itself as new reviews arrive.

The trade-off is the usual one. The app does more and maintains itself, but it is another subscription and another thing loading on your storefront. For a fixed set of hand-picked testimonials you control, the free section above is lighter and does exactly the job. For a growing pile of customer reviews you want verified and automatic, an app earns its keep.

## Wrapping up

There is no marquee switch in older Shopify themes, but a scrolling testimonials strip is a small custom section, not an app you have to buy. One file, a preset so it shows in "Add section," repeatable blocks for the quotes, and a two-copy CSS track so the loop is seamless. Paste it once, then run the whole thing from the theme editor forever after.


---

---
title: How to Add a Video to Your Shopify Homepage
description: Add an autoplay, looping video to a Shopify homepage section like Image with text. The exact code, why a connected video shows as a still, and the no-code options.
---

## The problem

A merchant asked about this on the Shopify Community. They wanted a short video as the hero on their homepage.

They had been using a GIF in that spot. The GIF was slowing the site down, so they swapped it for a small video file to keep things fast.

They uploaded the video to Shopify. They saved it in a metaobject. Then they connected it to the "Image with text" section as dynamic content.

The video showed up. But it would not play. It sat there as a still picture, a single frozen frame. No autoplay, no loop, nothing.

They tried a few bits of CSS. None of it worked. And they did not want to lose the design of that hero section, they just wanted the video to move.

I reproduced it on a test store running the Dawn theme, which is the free theme most Shopify stores start on. Same result: a still frame, no playback.

## Why it happens

This is the part the quick forum answers skip, and it is the whole reason no amount of CSS fixes it.

The "Image with text" section, and most homepage sections like it, only knows how to show an **image**. In the theme code, that section outputs an image tag. Nothing more.

When you connect a video file to the Image slot, Shopify still renders it as an image. It grabs the first frame of the video and shows that frame as a picture.

So what you see is real. It is a frame of your video. But it is a photo of your video, not your video.

There is no video player on the page at all. No play button, no autoplay, no loop, because none of those things exist in an image tag.

That is why CSS cannot save it. CSS styles what is on the page. You cannot style a video player into existence when the page only has a picture. The video player has to be added in the theme code first.

Once you understand that, the fix is obvious. You add a real video to the section. Then you point the section at your video file.

## What you need first

Two things, and you probably already have both.

- Your video, uploaded to Shopify. Go to Content, then Files, and upload the video there. Keep it short and small, a few seconds is plenty for a hero.
- A backup of your theme. Never edit your live theme directly. Go to Online Store, then Themes, and use the three dots menu to Duplicate your theme first. Do the edit on the copy, check it, then make the copy live.

The steps below are shown on Dawn. The same idea works on any theme that has an "Image with text" or "Image banner" section, the section file name is just slightly different.

## The fix, step by step

There are two small edits to one file.

Open Online Store, then Themes. Click the three dots next to Customize, then Edit code. Open the file `sections/image-with-text.liquid`.

![Editing image-with-text.liquid in the Shopify theme code editor](/images/blog/add-video-to-shopify-homepage/01-image-with-text-liquid-code-editor.png)

**Edit one, add the video.** Inside that file, find this line. It sits just inside the media area of the section.

```liquid
{%- if section.settings.image != blank -%}
```

Replace that one line with this block.

```liquid
{%- if section.settings.video != blank -%}
  {{ section.settings.video | video_tag: image_size: '1100x', autoplay: true, loop: true, muted: true, controls: false, playsinline: true, class: 'image-with-text__video' }}
  <style>
    .image-with-text__media:has(> .image-with-text__video) { position: relative; overflow: hidden; }
    .image-with-text__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  </style>
{%- elsif section.settings.image != blank -%}
```

This does the real work. It builds a video player set to autoplay, loop, and muted, and it makes that video cover the same area your image used to fill.

**Edit two, add the setting.** Scroll to the bottom of the same file, to the part that starts with `{% schema %}`. Find the image setting.

```liquid
{
  "type": "image_picker",
  "id": "image",
  "label": "t:sections.image-with-text.settings.image.label"
},
```

Add this new block right after it.

```liquid
{
  "type": "video",
  "id": "video",
  "label": "Video",
  "info": "Autoplays muted and loops. Use Height Small, Medium or Large."
},
```

Save the file.

Now open the theme customizer and open your Image with text section. A new **Video** setting is sitting there.

![The new Video setting inside the Image with text section in the Shopify theme editor](/images/blog/add-video-to-shopify-homepage/02-video-setting-customizer.png)

Pick your video in that setting. Set the section Height to Small, Medium, or Large. Save.

That is it. The video now plays on its own, loops forever, and fills the same space the image used to. The text on top of it does not change.

On my test store the section went from a frozen frame to a video that played and looped the moment the page loaded, covering the full hero area.

## How do I make a Shopify video autoplay?

The key word in the code above is **muted**.

Browsers block videos that try to autoplay with sound. Chrome, Safari, and the rest all do this, to stop pages blasting audio at you.

A muted video is allowed to autoplay. So a hero video that plays on its own has to be muted. That is a browser rule, not a Shopify one, and there is no way around it.

The `playsinline` part matters too. Without it, some phones will try to open the video full screen instead of playing it in place. `playsinline` keeps it inside your hero where it belongs.

So the recipe for a self-playing hero video is always the same: autoplay, loop, muted, playsinline. All four. The code above sets all four for you.

## Does a video slow down your Shopify store?

This was the merchant's original worry, and it is a fair one. It is also why they switched away from a GIF.

Here is the thing. A short video is usually **lighter** than a GIF that shows the same clip. GIFs are a very old format and they get huge fast. A five second GIF can easily be several megabytes. The same clip as an MP4 can be a fraction of that.

So moving from a GIF to a video is often a speed win, not a speed cost.

To keep it fast, do a few simple things. Keep the clip short. Let Shopify host the file, which the code above does, so it serves the right size for each device. And do not stack three autoplay videos on one page.

One muted, looping hero video, hosted by Shopify, is fine for almost every store.

## How do I save a video in a metaobject?

The merchant in the thread had stored their video in a metaobject. You do not have to, but it is a tidy way to manage reusable media, so here are the steps.

- Go to Settings, then Custom data. Or Content, then Metaobjects.
- Open your definition, or click Add definition and give it a name like Hero Video.
- Click Add field and choose the type **File**.
- In that field's validation, set the accepted file types to Media, or Video only.
- Save the definition.
- Open the definition and click Add entry.
- In the File field, upload your video or pick it from Files.
- Save the entry. The video now lives in that metaobject.

To use it, you do not have to pick the video directly in the Video setting. On that setting, click the small **dynamic source** icon and choose your metaobject. The section reads the video from there. That keeps your setup exactly as it was, just pointed at a section that can actually play it.

## The no-code way

If you would rather not touch theme code at all, you have two options.

First, some themes ship a dedicated **Video** section already. On Dawn it is a separate full-width section you add from the theme editor. The catch is it is its own section, so you cannot put a heading and a button on top of it the way Image with text lets you.

Second, there are apps for exactly this. **Videowise** and **Easy Video Background** both add autoplay video sections and video backgrounds without code. They cost money and add a bit of weight, but they are quick and they are supported.

For a single hero, the two-edit code above is lighter and free. For lots of video across the store, an app is easier to manage.

## If the video still will not play

A few things to check if you followed the steps and it is still stuck.

- **Height is set to Adapt.** Adapt sizes the section from an image, and there is no image now. Set Height to Small, Medium, or Large instead.
- **The video setting is empty.** Make sure you actually picked the video in the new Video setting, or connected your metaobject to it.
- **The file is not a video.** Only real video files play. A GIF is still an image, so it will not autoplay through a video player.
- **You edited the wrong section.** If your hero is not "Image with text", it might be "Image banner". The edit is the same idea, just in `sections/image-banner.liquid`.
- **You are looking at the live theme.** If you edited a duplicate, preview the duplicate, not your published store.

## Image setting versus video setting

The whole issue comes down to two setting types, so it helps to know the difference.

An **image** setting shows a picture. It is the right choice for a photo, a logo, or a banner still. It cannot play anything, because a picture does not move.

A **video** setting shows a video player. It can autoplay, loop, and mute. It is the right choice for a moving hero.

Connecting a video file to an image setting does not upgrade the image setting into a player. It just feeds the picture-shower a single frame of your video. That is what the merchant ran into, and it is easy to run into, because the setting happily accepts the video and shows something.

The fix is not a workaround. It is giving the section the setting it actually needed, a video setting, so your video can finally play.


---

---
title: "How to Assign a Template to a Page in Shopify"
---

## The step that makes people think their code is broken

You built a page template. You added your code to it. You saved. You reload the page and absolutely nothing has changed.

Nine times out of ten the template is fine and the code is fine. The page is simply still using the default template, because creating a template and assigning it are two separate actions, and only the first one happens in the theme editor.

This comes up constantly on the Shopify Community. A merchant posts asking why their customisation did not apply, someone gives them correct code, and the thread stalls because the assign step never gets mentioned.

Here is how assigning works, why the theme editor is not where you do it, and a worked example from a real thread.

## Create the template first

In the Shopify admin, go to Online Store, Themes, then Customize.

At the top of the editor there is a template selector showing what you are currently editing, usually "Home page". Click it, choose Pages, then Create template at the bottom of the list.

Name it something meaningful. `sales`, `landing`, `no-header`. Base it on Default page unless you have a reason not to.

![Template selector, Pages, Create template](/images/blog/assign-template-to-page-shopify/03-create-template.jpeg)

Look at that screenshot carefully, because it contains the tell. Next to each template Shopify prints how many pages use it. Default page says "Assigned to 1 page". The new `sales` template says **"Assigned to 0 pages"**.

That line is the theme editor telling you the template exists but does nothing yet. If your customisation is not applying, check that line first.

## How to assign a template to a page in Shopify

The assign step does not happen in the theme editor. It happens in the page's own admin screen.

1. Go to **Content**, then **Pages**.
2. Click the page you want to change.
3. On the right hand side, find the **Template** card.
4. Change the dropdown from "Default page" to your new template.
5. Click **Save**.

![Set the page Template to your new template](/images/blog/assign-template-to-page-shopify/05-assign-template-to-page.png)

That is the whole thing. Reload the storefront page and your template is live.

The reason this trips people up is that everything else about theming happens in the theme editor, so it feels like assignment should too. It does not. The theme editor edits templates. The page admin decides which page uses which template.

## One template, many pages

This is the other half people get wrong, and it matters if you have more than one page to change.

You do not need a template per page. A template is a layout that any number of pages can share. Build `sales` once, then assign all of your sales pages to it.

The merchant whose thread prompted this article had **six** pages to change. Six templates would have meant six copies of the same code, and six places to edit when they want to change something. One template assigned six times means one place.

You still repeat the assign step per page, since there is no bulk template picker in the pages list. Open each page, set the dropdown, save. It is quick, and you only do it once.

Use a separate template only when the pages genuinely need different layouts.

## Worked example: hiding the header and footer on six pages

Here is the thread this came from, because it is a good reason to want a page template at all.

A merchant running the Shopify Horizon theme wanted six sales pages to display with no header and no footer, so they read as focused landing pages with nothing to click away to.

They did the obvious thing first: opened the theme editor, found the header section, and switched it off. It disappeared from every page on the store.

That is not a bug. The header and footer are **section groups**, shared by every page in the theme. There is no per page toggle for them. Toggling them off is a store wide change, which is exactly what they saw.

The fix is to leave the global sections alone and hide them on one template only.

### Turn the global sections back on first

If you already switched the header or footer off site wide, undo that before anything else. Otherwise you will be testing your new template against a store that is already broken, and nothing will look like it worked.

### Add the CSS to the template

With your `sales` template selected in the theme editor, look at the sidebar. It has three groups: Header, Template, Footer.

Header and Footer are global. Anything you put in the **Template** group applies only to that template. So that is where the code goes.

In the Template group, click Add section, then choose Custom Liquid. Paste this into the Liquid code box and save.

```html
<style>
  /* hides the announcement bar, header and footer on this template only */
  .shopify-section-group-header-group,
  .shopify-section-group-footer-group {
    display: none;
  }
</style>
```

![Paste the CSS into the Liquid code box](/images/blog/assign-template-to-page-shopify/04-paste-css-custom-liquid.jpeg)

Those two class names are what Shopify puts on every section belonging to a group, which is why this catches the announcement bar, the header, the footer and the footer utilities without naming any of them individually.

Then assign your six pages to the template, as above.

Before, on the default template:

![Default template: announcement bar and header on top](/images/blog/assign-template-to-page-shopify/01-default-template-header-footer.png)

After, on the sales template, same page and same viewport:

![Sales template: header, announcement bar and footer gone](/images/blog/assign-template-to-page-shopify/02-sales-template-chrome-gone.png)

I tested this on Horizon 4.1.1. With the template applied, all four sections report `display: none` and zero height, and the page content starts at the very top of the viewport. The home page, collection pages and any page still on Default page keep their header and footer, so nothing leaks to the rest of the store.

### Keeping the announcement bar

The announcement bar belongs to the header group, so the snippet above removes it along with the header. If you want to keep it and lose only the header, target the header section specifically:

```html
<style>
  .shopify-section-group-header-group.header-section { display: none; }
</style>
```

That second class is `header-section` on Horizon. Other themes name it differently, so inspect your own header in dev tools rather than assuming this carries across.

## Preview before you assign anything

There is a shortcut worth knowing, especially with six pages to update.

Add `?view=` and your template name to any page URL:

    https://your-store.com/pages/your-page?view=sales

Shopify renders that page through the `sales` template without assigning anything. Nothing is saved and no customer sees it.

Use it to confirm the code works on one page before you go and update all six. If the preview looks right and the real page does not, you know immediately that the problem is the assignment, not the code.

## How to create a new page template in Shopify

Covered above, but to state it plainly since it is asked separately: Customize, template selector at the top, Pages, Create template, name it, base it on Default page.

On older Shopify themes you may also see templates created by duplicating a `.json` file in Edit code. That still works. The theme editor route is easier and does the same thing.

Templates for products and collections work identically. The selector has Products and Collections entries alongside Pages, and the assign step lives on the product or collection admin screen instead of the page one, in a Template card in the same position.

## How to delete a page template in Shopify

Go to Online Store, Themes, then Edit code. Find your template under the `templates` folder, for example `templates/page.sales.json`. Use the three dot menu next to the file and choose Delete.

Reassign any pages using it **before** you delete, otherwise those pages fall back to the default template and any customisation on them disappears without warning.

## If the template still is not applying

**Check the assignment.** Open the page in the admin and look at the Template dropdown. If it says "Default page", that is your answer. This is by far the most common cause.

**Check which template you edited.** It is easy to create `sales` and then add your section while the editor is still showing Home page. In the theme editor, confirm the template name at the top matches the one you assigned.

**Check the section is in the Template group.** Code placed in the Header or Footer group applies everywhere, which is the original problem, not the fix.

**Check you saved both.** Saving the theme editor and saving the page are two different saves, in two different screens.

**Check the page is not a different resource type.** Shopify's Pages are `/pages/...` in the URL. If your URL is `/products/...` or `/collections/...` you need a product or collection template, and the page template you built will never apply.

## Templates, section groups, and why the difference matters

These two get conflated constantly, and the distinction is the whole reason the assign step exists.

A **template** describes one type of page and is chosen per resource. That is why it has an assign step: Shopify has to know which pages use it.

A **section group** is the header and footer region, shared by every page in the theme. There is no assign step because there is nothing to assign; it is always on, everywhere.

Once that is clear, the behaviour that confused the merchant stops being mysterious. Switching off the header section edited the section group, and section groups are global by definition. Nothing about it was per page, so the change was not either.


---

---
title: "Avalara Shopify Integration vs Shopify Tax: Which to Use"
description: Moving to Shopify with Avalara? Shopify Tax already calculates US sales tax to the street address. What the Avalara Shopify integration adds, what filing costs, and how to decide.
---

## The question: keep Avalara, or switch to Shopify Tax?

A merchant moving a store from Magento to Shopify asked this on the Shopify Community. They had used Avalara on Magento for years. On Shopify, the cost of carrying Avalara across was higher than they expected: a new connector licence, migration work, and a fresh contract.

They wanted two things from any tax setup:

1. **Rooftop-level calculation.** Rooftop means the tax rate is worked out from the buyer's exact street address, not from the ZIP code. One ZIP code can cross several cities and special tax districts, so a ZIP-based rate is sometimes wrong.
2. **Automatic filing in each US state.** Filing means sending the sales tax return to each state and paying what you collected.

Their question was whether Shopify's own tax service is good enough, or whether the Avalara Shopify integration is still worth paying for.

I checked this on a Shopify store with Shopify Tax active. The answer splits cleanly into those two jobs. Shopify covers the first one out of the box. The second one is where you need to spend money, but not necessarily on Avalara.

## What Shopify Tax does out of the box

Shopify Tax is the tax service built into every Shopify store. You do not install it. For the US it is switched on under **Settings > Taxes and duties**.

Open **Settings**, then **Taxes and duties**, then click **United States** in the list of tax regions. The **Tax service** column already shows Shopify Tax next to the United States.

![Shopify Settings, Taxes and duties, with the United States region using Shopify Tax](/images/blog/avalara-shopify-integration/01-shopify-taxes-and-duties-united-states.png)

On the United States page, the **Tax service** box shows Shopify Tax as **Active**, with its fee printed right under the name.

![Shopify Tax shown as Active in the United States tax service box](/images/blog/avalara-shopify-integration/02-shopify-tax-active-tax-service.png)

Shopify describes the calculation as rooftop accurate. Its feature page says Shopify Tax works across the more than 11,000 US sales tax jurisdictions, using the buyer's precise address. A jurisdiction is any area that sets its own tax rate: a state, county, city or special district.

So for calculation alone, the merchant's first requirement is already met. You do not need Avalara to get address-level rates on Shopify.

The same page carries two more tools worth knowing about:

- **Tax liability insights.** Shopify tracks your sales per state and tells you when you have crossed a state's threshold and need to register. On my test store it flagged California with "Action required" because of physical presence. In tax terms this is called nexus: the point where a state says you owe it sales tax.
- **Tax rate management.** Shopify rates each product by its category. Clothing, food and digital goods are taxed differently in different states. Products with no category are listed so you can fix them. My test store had 27 uncategorised products waiting there.

## What Shopify Tax costs

Shopify Tax is not free at scale, but it is cheap next to most tax software contracts. From Shopify's pricing page:

- **Free** for your first \$100,000 in sales.
- Then **0.35%** of each order on Basic, Grow and Advanced plans in the US.
- **0.25%** on Shopify Plus.
- Capped at **\$0.99 per order**.

One detail matters for stores that are moving over now. For stores created on or after May 13, 2026, the \$100,000 is a **lifetime** threshold. For older stores it resets every year. A merchant migrating from Magento today is opening a new Shopify store, so the free allowance is used once, not every year.

The fee only applies to orders from regions where you have tax collection turned on.

Put a number on it. A store doing \$1,000,000 a year in US sales, with an average order of \$80, pays about 0.35% of the amount above \$100,000. That is around \$3,150 a year, and the \$0.99 cap per order does not kick in at that order size. Compare that with your Avalara quote before deciding.

## Does Shopify file sales tax for you?

Filing is what decides the question for most merchants. Shopify built an automated filing service on top of Shopify Tax. For stores enrolled in it, Shopify prepares and files the monthly, quarterly and annual US sales tax returns.

It is closed to new stores. Shopify's help page on eligibility says automated filing is "closed to new enrollment" and only stores already enrolled can use it. On my test store there is no sign-up for it anywhere on the United States tax page. The only option in the Shopify Tax menu is **Downgrade service**.

What you do get is the data to file from. Click **Access the data you need to file in each jurisdiction** under the Tax service box.

![The Access the data you need to file in each jurisdiction link under Shopify Tax](/images/blog/avalara-shopify-integration/03-access-data-to-file-link.png)

That opens the **United States sales tax** report. It lists net sales, tax collected, shipping and tax on shipping, grouped by destination state.

![The United States sales tax report in Shopify, grouped by destination state](/images/blog/avalara-shopify-integration/04-united-states-sales-tax-report.png)

You, your accountant or a filing app then files each state's return from those numbers. If you need a custom split of the same data, such as taxable and non-taxable sales, the [Shopify sales tax report guide](/blog/shopify-sales-tax-report) shows how to build it.

### Does Shopify collect and remit sales tax?

Shopify **collects** sales tax at checkout once you turn on collection for a state. It does **not remit** it for a new store. Remitting means paying the collected tax to the state, and it happens when you file the return. The tax sits in your payouts until you pay it.

The one exception is marketplaces that act as the seller for tax purposes, such as Amazon or TikTok Shop. Those platforms collect and remit on your behalf for orders placed there, and Shopify leaves those orders out of its own filing data.

## What the Avalara Shopify integration adds

Avalara still has a place, and it is worth being exact about what it adds. Shopify lists Avalara as a tax app you can connect in place of its own tax calculation.

From Shopify's Avalara help page:

- Avalara is a paid service that needs a **direct contract between you and Avalara**.
- Shopify charges **no extra fee** for connecting it. The cost is whatever Avalara quotes you.

The things Avalara covers that Shopify Tax does not:

- **SST filing.** SST is the Streamlined Sales Tax programme, a group of about 24 states that share one registration and offer free filing through certified providers. Shopify's feature page says Shopify Tax does not support SST filing.
- **Local returns.** A few states, such as Colorado, Louisiana and Alabama, have cities or parishes that collect their own sales tax and want their own returns. Shopify Tax does not file those.
- **Your existing setup.** If you already have product tax codes, exemption records and filing calendars in Avalara, keeping it avoids re-doing that work.

If none of those apply, the Avalara contract pays for calculation Shopify Tax already does.

## The cheaper setup: Shopify Tax plus a filing app

For most US merchants moving to Shopify today, the setup that meets both requirements is:

1. **Shopify Tax** for the calculation at checkout. It is already on.
2. **A sales tax filing app**, or an accountant, to file the returns in each state from Shopify's data.

Sales tax apps on the Shopify App Store with a reasonable number of reviews:

| App | Rating | Reviews | Price |
| --- | --- | --- | --- |
| Numeral Sales Tax | 4.4 | 100 | Free to install |
| TaxCloud Sales Tax Automation | 4.8 | 95 | Free to install |
| Kintsugi Sales Tax Automation | 4.7 | 25 | Free plan, then \$75/month |
| TaxJar Sales Tax Automation | 2.4 | 64 | From \$39/month |

"Free to install" means the app itself is free on the App Store. The filing service is priced by the provider, usually per return or per state. Ask each one for a quote based on the number of states you are registered in.

Before you sign up, ask each app two questions:

- Does it file from Shopify Tax's numbers, or does it replace Shopify Tax at checkout as well?
- Does it file SST and local returns, if you need them?

## Avalara vs TaxJar

This comparison comes up a lot for merchants already shopping for tax software.

Both do the same two jobs: calculate tax at checkout and file returns. TaxJar is owned by Stripe and priced by monthly plan. Avalara is sold by contract and aimed at larger or more complex businesses, including those with exemption certificates and many product types.

On Shopify, the comparison has a third option that did not exist on Magento. Shopify Tax already handles calculation, so you may only need the filing half from either company. Price the filing-only option before paying for both halves.

## How to decide

Use this as a checklist:

- **You only need accurate rates at checkout.** Use Shopify Tax. It is already on.
- **You need automatic filing, and your store was enrolled in Shopify's filing before it closed.** Use Shopify Tax with its filing.
- **You need automatic filing on a new store.** Use Shopify Tax plus a filing app or accountant. Compare quotes.
- **You file SST or local returns, or have heavy exemption needs.** Keep Avalara and sign the direct contract.
- **You are on Shopify Plus with several business entities.** Avalara supports multiple entities on Plus and Enterprise plans. Check that route with Avalara directly.

## Common questions after switching

**Can I run Shopify Tax and Avalara at the same time?** Only one tax service calculates the rate at checkout. Connecting a tax app replaces Shopify's calculation for that region.

**What happens to my Magento tax history?** It stays in Magento and in Avalara. Shopify's report only covers orders placed on Shopify. Keep the old records for any audit period.

**Are imported orders included in Shopify's filing data?** Shopify's filing documentation says imported orders are not handled by its automated filing. Plan to file your pre-migration orders from the old system.

**Do I need to register in each state myself?** Yes. Shopify tells you when you cross a threshold, but registering with the state is on you. The United States tax page has a **Register with each state** link and a **Collect in a new state** button for when you have your registration number.

**Where do I see if my products are taxed correctly?** Under **Tax rate management** on the United States tax page. Assign a category to every product listed there, especially clothing, food and digital products.

## Summary

Shopify Tax already does the rooftop-level calculation the merchant asked for, at 0.35% of each order after the first \$100,000 in sales. Shopify's own automatic filing is closed to new stores, so a new store needs a filing app or an accountant to file each state's return from Shopify's sales tax report. Pay for the Avalara Shopify integration when you need SST or local filing, or when your existing Avalara setup is too big to rebuild.


---

---
title: "Be Yours Shopify Theme: Show From Price, Not a Price Range"
description: "The Be Yours Shopify theme shows a price range like $45.00 - $125.50 on product cards. Two lines of code turn it into from $45.00. Tested on Be Yours 9.5.1."
---

## The problem

You sell a product in several sizes or versions, and each one has its own price. On your collection pages the product card shows the whole spread, for example `$45.00 – $125.50`. You would rather show one clean starting price: `from $45.00`.

A merchant asked exactly this on the Shopify Community. They run the Be Yours theme, version 9.5.1, and wanted every card with a price spread to show only the lowest price with the word "from" in front of it.

I installed Be Yours 9.5.1 on a test store and reproduced it. A cake with three sizes at $46, $66 and $86 showed `$46.00 – $86.00` on the collection page. After the change below, the same card shows `from $46.00`. Products with a single price did not change.

![Before: the product card shows the price range $46.00 – $86.00](/images/blog/be-yours-shopify-theme-from-price/10-before.png)

![After: the same card shows from $46.00](/images/blog/be-yours-shopify-theme-from-price/11-after.png)

## Why Be Yours shows a price range

Every product in Shopify has at least one variant. A variant is one buyable version of the product, such as the 6 inch cake or the 10 inch cake. Each variant has its own price.

When a product's variants all cost the same, the card shows one price. When they differ, Be Yours prints two prices side by side on the card: the cheapest and the most expensive. Its stylesheet (the file that controls how the theme looks) then puts a dash in front of the second price. That is how `$46.00` and `$86.00` turn into `$46.00 – $86.00`.

Be Yours does not offer a theme editor setting to switch this off, so the fix is a small edit to the theme's code.

The upside is that both prices are already on the page. The fix does not need to work anything out. It hides the second price and writes "from" in front of the first one.

## Before you edit: make a backup

Any code edit is safer with a copy of the theme to fall back on. It takes ten seconds.

On the Themes page shown in step 1 below, click **...** next to your Be Yours theme and choose **Duplicate**.

The copy appears in your theme library as an unpublished theme. If anything looks wrong later, you can publish the copy or compare the two.

## The fix: show "from" and the lowest price

The whole change is two lines pasted at the end of one file.

1. Go to **Online Store > Themes**.
2. Click **...** next to your Be Yours theme.
3. Click **Edit code**.

![Online Store, the three-dot menu on the theme, and Edit code](/images/blog/be-yours-shopify-theme-from-price/01-themes-edit-code.png)

4. On the left, open the **assets** folder and click **component-price.css**. This file holds the styling for every price in the theme.
5. Go to the very end of the file and paste this on a new line:

```css
.price price-money + price-money { display: none; }
.price price-money:first-child:not(:only-of-type)::before { content: "from "; margin-inline-end: 0.4rem; }
```

![component-price.css with the two lines pasted at the end](/images/blog/be-yours-shopify-theme-from-price/12-file-open.png)

6. Click **Save**.

![Save in the code editor](/images/blog/be-yours-shopify-theme-from-price/12-save.png)

Open a collection page on your store and refresh it. Cards for products with a price spread now read `from $46.00`. Cards for products with one price look exactly as before.

### What the two lines do

You do not need to understand the code to use it, but it helps when something looks off.

- The first line hides the second price on the card, the most expensive one. The dash disappears with it, because the dash belongs to that second price.
- The second line adds the word "from" in front of the first price, but only when a second price exists. A product with one price has nothing hidden and gets no "from".

Nothing is deleted from the theme. Remove the two lines and save, and the range comes back.

## Change "from" to "From", "Starting at" or another language

The word in quotes is plain text, so you can change it to anything.

- **Capital F:** change `"from "` to `"From "`.
- **Different wording:** `"Starting at "` or `"As low as "` work the same way.
- **Another language:** use your own word, for example `"ab "` for German or `"à partir de "` for French.

Keep the space before the closing quote. Without it, the word runs into the price.

If your store is in several languages, the text in this code is the same for all of them. A multi-language store is better off with a short word that reads fine in each language, or with a translation app that handles theme text.

## Where the change shows up

The price styling lives in one shared file, so the two lines apply wherever Be Yours prints a product card, not only on the collection page I tested:

- Collection pages
- Search results
- Featured collection sections on the home page

On the product page itself, Be Yours already shows the price of the selected size or version, not a range, so nothing changes there.

## What about sale prices?

When some variants are on sale, Be Yours shows a crossed-out regular price next to the sale price. Be Yours prints the sale price spread the same way, as two prices, so the same two lines turn it into `from` and the lowest sale price.

## Is "from" the right choice for your store?

A range tells shoppers the ceiling. A starting price tells them the floor. Both are fair, and it depends on what you sell.

- **Starting price works well** when the cheapest option is a real, popular choice: the smallest size, the basic finish, a single unit. Shoppers see a lower number on the grid and click through.
- **A range works better** when the cheapest option is rarely bought. If `from $45` turns into `$125` for most people once they choose, the jump can feel like a bait and switch.

A quick check is your own sales data. If most orders for the product land on the cheapest variant, "from" describes what shoppers actually pay.

## About the Be Yours Shopify theme

Be Yours is a paid theme from RoarTheme, sold in the Shopify Theme Store. It is built for beauty, fragrance and fashion brands, and it comes with quick buy, a slide-out cart and a quick view drawer on product cards.

Like most Theme Store themes, it gets regular updates. The fix in this article was tested on version 9.5.1. Your theme's card on the Themes page (the screen in step 1 below) shows which version you run.

Because Be Yours is a paid theme, the theme developer offers support to buyers. RoarTheme can make changes like this one for you if you would rather not edit code. The two lines here are small enough that most merchants can paste them in a couple of minutes.

A few other common Be Yours changes follow the same pattern: find the file that styles the element, paste a short rule at the end, save. Price size, price colour and the sale badge all live in the theme's stylesheet files in the **assets** folder.

## Troubleshooting

**Cannot find component-price.css?** Click in the file list on the left and type `component-price` in the search box at the top of the code editor. Very old versions of Be Yours may name it differently; search for `price` and open the CSS file with that word in its name.

**Saved, but the storefront still shows a range?** Refresh the page with a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). Browsers keep a stored copy of theme files for a while.

**Edited the wrong theme?** The code only changes the theme you edited. If your live theme is a different copy of Be Yours, repeat the steps on the live one. The theme marked **Current theme** at the top of the Themes page is the one shoppers see.

**Updated Be Yours and the range came back?** A theme update installs fresh copies of the theme files, including this one. Paste the two lines again after updating.

**Using a different theme?** The two lines are written for Be Yours. Other themes print the range in a different way, so the code will not match. Dawn and most free Shopify themes show "From $45.00" on cards already, which is worth checking before you edit anything.

## Apps that do this without code

Some merchants would rather not touch code. Price display apps and variant option apps can change how prices appear on product cards. They add a monthly cost and another script to your store, so for a two-line change the code above is the lighter option.

Ask a question on the thread linked below if you get stuck, or send it to your theme developer along with this page.

Source thread: <a href="https://community.shopify.com/t/change-price-in-be-yours-theme/689607" rel="nofollow">Change price in Be Yours theme</a> on the Shopify Community.


---

---
title: How to Change Font Size on Shopify for Mobile Only
description: Your heading looks fine on a laptop and enormous on a phone. Here is the Custom CSS that shrinks it on mobile alone, and why the rule most people copy does nothing on newer Shopify themes.
---

## The problem

Your store looks right on a laptop. You open it on your phone and one heading takes up most of the screen. A three line sentence becomes six lines, the button under it drops below the fold, and the page reads as one giant sentence instead of a shop.

Shopify has no setting for this. Theme settings let you pick a heading size, but that size applies at every screen width. Turn it down far enough to look right on a phone and your desktop headings go weedy.

So people reach for Custom CSS, which is the box Shopify gives you for pasting your own styling rules. Then they hit the second problem: the rule most tutorials print does nothing.

## The rule that does nothing

A merchant on the Shopify Community was running the Dwell theme and pasted this:

```css
@media only screen and (max-width: 768px) {
  .h2 {
    font-size: 22px !important;
  }
}
```

Saved it. Reloaded. The heading did not move by a pixel.

![The h2 rule is saved in the Shopify Custom CSS box and the heading on mobile is still full size](/images/blog/change-font-size-shopify-mobile/01-h2-css-rule-saved-no-change.png)

The usual answer on forums is that the dot is wrong. `.h2` with a dot points at a class, which is a label attached to an element, while `h2` without a dot points at the HTML tag. Drop the dot and it will work.

On older themes that advice is right. On Shopify's newer themes it is wrong twice over, and following it wastes an afternoon.

## Why newer Shopify themes break the usual advice

Shopify's newest themes, the Horizon family, separate how a heading looks from what it is in the page code. Dwell, Horizon, Fabric, Studio and the rest of that family all work this way. So does anything built on Shopify's 2024 and later theme structure.

When you add a Heading block and set its style to H2, the theme does not output an `<h2>` tag. It outputs something closer to this:

```html
<div class="text-block h2">
  <p>Where quality craftsmanship meets timeless design</p>
</div>
```

Two things follow from that, and both of them matter.

**There is no `h2` tag to target.** A rule written as `h2 { font-size: 22px }` finds nothing on that part of the page, so dropping the dot changes nothing.

**The size is set twice.** The theme's own stylesheet carries this:

```css
h2,
.h2.h2,
.text-block.h2 > * {
  font-size: var(--font-h2--size);
}
```

Read the third line. `.text-block.h2 > *` means "every direct child of a text block styled H2". That is the `<p>` holding your words.

So when you write `.h2 { font-size: 22px !important }`, the size does change on the outer `<div>`. The paragraph inside then sets its own size from the theme's rule, and a child's own font size always beats the one it would have inherited from its parent. Your rule lands one level too high, and the text you can actually see never reads it.

That is why nothing happens, and why `!important` does not rescue it. `!important` wins arguments between rules pointing at the same element. It does nothing about a different element further down.

## The fix

Add the children to the rule. Two selectors, one extra character of typing:

```css
@media screen and (max-width: 749px) {
  .h2,
  .h2 * {
    font-size: 22px !important;
  }
}
```

`.h2 *` means "anything inside an element labelled h2". That catches the paragraph, and it catches a real heading tag if your text happens to contain one.

On a test store running Dwell 4.1.5 this took the pull quote heading from 40px down to 22px on mobile and left the desktop layout exactly as it was.

## Where to paste it

There are two Custom CSS boxes in the Shopify theme editor and they do different jobs. Picking the wrong one is the other reason this fix appears not to work.

### 1. Open the theme editor

In your Shopify admin go to **Online Store > Themes** and click **Customize** on your current theme.

### 2. Click the gear icon

The narrow strip down the top left of the editor has three icons. The middle one, the gear, opens **Theme settings**. These settings apply to your whole store rather than to one section of one page.

![The gear icon in the Shopify theme editor opens Theme settings](/images/blog/change-font-size-shopify-mobile/02-shopify-theme-settings-gear-icon.png)

### 3. Scroll to the bottom and open Custom CSS

Theme settings is a long list: Logo and favicon, Color palette, Typography, and so on. **Custom CSS** is near the very bottom, under Variant pickers. Click it and a small code box opens.

The wording under the heading tells you which box you are in. Under Theme settings it reads "Adds custom styles to your entire online store." The box inside an individual section reads "Adds custom styles to this section only", and that one will not touch headings anywhere else on your store.

### 4. Paste the rule

Paste the code into the box. The preview on the right updates as you type, so you can see the heading shrink before you commit to anything.

![The Custom CSS box in Shopify Theme settings with the mobile font size rule pasted in](/images/blog/change-font-size-shopify-mobile/03-custom-css-box-paste-code.png)

### 5. Save

Click **Save** at the top right. The change is live on that theme immediately.

![Click Save at the top right of the Shopify theme editor](/images/blog/change-font-size-shopify-mobile/04-click-save-theme-editor.png)

### 6. Check desktop

Switch the preview back to desktop with the monitor icon in the top bar. Your headings should be exactly as they were. The rule sits inside `@media screen and (max-width: 749px)`, so it only runs on screens narrower than that.

![The desktop preview shows the Shopify heading still at the theme's full H2 size](/images/blog/change-font-size-shopify-mobile/05-desktop-heading-unchanged.png)

## Picking the right breakpoint

A breakpoint is the screen width where a rule switches on. The number inside `max-width` is yours to choose, but matching your theme's own number keeps everything consistent.

- **749px** is what the Horizon family uses, Dwell included. Below it the theme treats the screen as a phone.
- **768px** is the common generic choice, and it is what most tutorials print. It works, it just includes small tablets held upright.
- **989px** catches tablets in landscape too. Use it if your headings also look heavy on an iPad.

If you are not sure, start with 749px. Resize your browser window slowly and watch where your theme's own layout flips from a phone layout to a desktop one. That is your number.

## Changing a different heading level

The same pattern works for every heading size in the theme. Swap the number in the class:

```css
@media screen and (max-width: 749px) {
  .h1, .h1 * { font-size: 30px !important; }
  .h2, .h2 * { font-size: 22px !important; }
  .h3, .h3 * { font-size: 18px !important; }
}
```

Only add the lines you actually need. A store where every heading level has been overridden is harder to adjust later than one with a single rule in it.

## Changing heading size everywhere, without code

If your headings are too big on desktop as well, you do not need CSS at all.

Go to **Theme settings > Typography**. Each heading level has its own size control there. Turn Heading 2 down from 40px to, say, 32px and it changes at every screen width, with no code and nothing to maintain.

![Theme settings Typography panel in Shopify showing Heading 2 size set to 40px](/images/blog/change-font-size-shopify-mobile/06-theme-settings-typography-h2-size.png)

This is worth checking first. On Dwell, Heading 2 is set to 40px and the theme prints that same 40px on a phone. Heading 1 is set to 72px but the theme shrinks it as the screen narrows. That difference is why H2 is the level that looks wrong on mobile while H1 looks fine.

Use Typography when the size is wrong everywhere. Use the Custom CSS rule when desktop is right and only mobile is wrong.

## Does this work on Dawn and older themes?

Yes, and on older themes you have more targets to choose from, not fewer.

Dawn, Debut, Craft, Spotlight, Refresh and the rest of the Online Store 2.0 generation output real `<h2>` tags for most headings. Dawn also carries `.h2` as a utility class for things that should look like a heading without being one.

So on Dawn this covers both:

```css
@media screen and (max-width: 749px) {
  h2,
  .h2,
  .h2 * {
    font-size: 22px !important;
  }
}
```

Adding `h2` costs nothing on a Horizon-family theme, since there are few loose `h2` tags for it to find. Leaving it out on Dawn misses most of your headings. If you do not know which generation your theme is, use the three-selector version.

One caution on newer themes. Because the tag and the visual style are decoupled, a block styled H1 can still contain an `<h2>` tag inside it. A bare `h2 { }` rule will shrink that too, which is usually not what you wanted. That is the other reason to prefer the class.

## If it still has not changed

Work down this list in order. In practice it is almost always the first or second item.

**You pasted into a section's Custom CSS box, not Theme settings.** The section box only styles that one section on that one page. Read the line of help text above the box; it tells you which one you have.

**You are editing a different theme.** The theme editor opens on whichever theme you clicked Customize on. If you have a draft copy and a live one, check the theme name in the top bar of the editor.

**You are looking at a cached page.** Shopify and your phone both cache stylesheets. Load the page in a private window, or add `?x=1` to the end of the address to force a fresh copy.

**Your browser window is wider than the breakpoint.** Shrinking a desktop browser window does trigger the rule, but only once it is narrower than 749px. Watch the heading as you drag the window edge in.

**An app is drawing the heading.** Review widgets, page builders and popup apps render their own markup and their own classes, and `.h2` will not be in it. Right click the heading, choose Inspect, and look at the class names on the element. Whatever you see there is what the rule needs to name.

**The text is inside a Rich text block, not a Heading block.** Rich text output is wrapped in `.rte` rather than a heading class. Target `.rte h2, .rte p` instead.

## Related fixes on this blog

- [How to add custom CSS in Shopify](/blog/how-to-add-custom-css-in-shopify) walks through both Custom CSS boxes from scratch, with a worked example.
- [Change your Shopify menu font size](/blog/change-shopify-menu-font-size) covers navigation text, including app-built mega menus.
- [Change the price font size on a collection page](/blog/shopify-price-font-size) does the same job for product card prices.

## What to do

- On Dwell, Horizon and the rest of Shopify's newest themes, a heading styled H2 is a `<div class="h2">` with a `<p>` inside, not an `<h2>` tag.
- The theme sets the size on that inner `<p>` as well, so a rule aimed at `.h2` alone is overridden.
- Use `.h2, .h2 *` inside a `max-width` media query, in **Theme settings > Custom CSS**.
- Use 749px for the Horizon family, 768px as a generic phone breakpoint.
- If desktop is wrong too, change **Theme settings > Typography** instead and skip the code.


---

---
title: "How to Change Menu Font Size in Shopify: Bigger and Bold"
description: Make your Shopify menu text bigger or bold with a few lines of Custom CSS. Works for normal themes and for app-built mega menus like Meteor, including the selector mistake that stops most people.
---

## The problem

You want your Shopify menu text to be bigger. Or bold. Or both.

You look through the theme settings and nothing changes the menu. The typography setting changes your headings and body text, but the navigation menu stays the same small size.

This is one of the most common small styling questions from store owners, and the answer is almost always the same: a few lines of Custom CSS. No app, no paid tool, no developer.

A store owner asked exactly this on the Shopify Community. They ran the **Meteor Mega Menu** app and wanted the top menu larger and bold. Their theme's font settings did not touch it. Someone gave them a snippet of CSS that looked right, and it did nothing. I reproduced their setup, found why it failed, and gave them the version that worked. They confirmed it "worked a treat."

This article covers both cases: a normal Shopify theme menu, and a menu that an app draws for you. The second one is where people get stuck, so I will go slow there.

## The short answer

Shopify menu text is controlled by CSS, the language that decides how things look on a web page.

You do not need to touch your theme's real code files. Every Shopify theme has a **Custom CSS** box built for exactly this. You paste a few lines in, hit Save, and the change is live.

Here is the shape of what you are pasting. The details depend on your theme, and I will give you the exact version for both cases below.

```css
your-menu-links {
  font-size: 18px;
  font-weight: 700;
}
```

`font-size: 18px` makes the text bigger. `font-weight: 700` makes it bold. That is the whole idea. The only hard part is naming the menu links correctly, and there is one catch that trips most people up. First, where the CSS goes.

## Where to paste it (2 steps)

The Custom CSS box is in the same place for every theme.

**Step 1.** Go to **Online Store > Themes**. On your live theme, click **Customize**. Newer stores show this button as **Edit theme**.

![Shopify Themes page, the Edit theme button on your live theme](/images/blog/change-shopify-menu-font-size/03-themes-edit-theme.png)

**Step 2.** In the editor, click the **gear icon (Theme settings)** on the left. Scroll down and open **Custom CSS**. Paste your code in the box, then click **Save** at the top right.

![Theme settings panel open on Custom CSS, with code pasted and the Save button](/images/blog/change-shopify-menu-font-size/04-custom-css-box.png)

That box adds your styles to the whole store, safely. You are editing a settings field, not the theme's code, so you cannot break anything. If you ever want to undo it, come back and delete the lines.

## Case 1: a normal theme menu (Dawn and most free themes)

If your menu is the built-in theme menu, the theme draws it and you target the theme's own menu links.

On Dawn, the free theme most stores start with, the top menu links use the class name `header__menu-item`. So the CSS is:

```css
.header__menu-item {
  font-size: 18px;
  font-weight: 700;
}
```

Paste that into Custom CSS and the menu gets bigger and bold.

Before you even do that, check one thing. Some themes have a menu size option built into the header. Open the theme editor, click the **Header** section, and look for a font size or menu style setting. If it is there, use it, and skip the code entirely. Custom CSS is the fallback for when the theme gives you no setting, which is most of the time.

## Case 2: a menu built by an app (Meteor Mega Menu and similar)

This is the case the store owner had, and it is where the usual advice falls apart.

When a menu is built by an app, the app draws its own menu with its own HTML and its own class names. Your theme is not drawing that menu at all. So your theme's font settings never reach it, and neither do the normal theme selectors from Case 1. You have to target the app's own class names.

For **Meteor Mega Menu**, the class names are `Meteor-Navigation__Link__desktop` for the top bar and `Meteor-Navigation__Link__mobile` for the mobile drawer. The CSS that works is:

```css
.Meteor-Navigation__Link__desktop,
.Meteor-Navigation__Link__mobile {
  font-size: 18px !important;
  font-weight: 700 !important;
}
```

Here is that store's menu before and after the change. The links go from small and light to bigger and bold, on the live storefront.

![Meteor menu before, text small and thin](/images/blog/change-shopify-menu-font-size/01-shopify-menu-before.png)

![Meteor menu after, text bigger and bold](/images/blog/change-shopify-menu-font-size/02-shopify-menu-after.png)

On the real store the desktop links went from 16px and normal weight to 18px and bold. The mobile menu changed too, because the CSS targets both classes.

### Why the "clever" selector fails

The store owner was first given a catch-all selector, something like `[class*='meteor'] a`. The idea is to match any class name that contains the word meteor, then style the links inside it. It looks smart, and it saves you from finding the exact name.

On this store it changed nothing.

I tested both selectors on the live store to be certain. The catch-all did nothing at all. The exact-class version worked instantly. Two reasons, and both are worth knowing for any app menu:

1. **Class matching is case-sensitive.** The app's class is `Meteor` with a capital M. A selector that writes `meteor` in lowercase never matches it. A single wrong letter and the whole rule is ignored.
2. **The top links were not inside a matching container.** The "links inside it" part had nothing to find, so nothing got styled.

The lesson is simple. For an app menu, do not guess a wildcard. Use the exact class name. If you do not know it, right-click a menu item, choose **Inspect**, and read the real class name on the link. Then put that in your CSS.

### Why the `!important` matters

You will notice the app version has `!important` after each value, and the Dawn version does not.

The app ships its own stylesheet that already sets a font size on those links. To make sure your rule wins over the app's rule, you add `!important`. Without it, your line and the app's line can carry equal weight, and the app can win depending on which stylesheet loads last. `!important` removes the guessing and makes your change stick.

For a plain theme menu you usually do not need it, but adding it does no harm if a stubborn menu refuses to change.

## Make it bigger, smaller, or less heavy

Once the rule is in, tuning it is easy. You are only changing two numbers.

- **Size:** change `18px`. Try anywhere from 16px to 22px. Go up slowly and check the menu does not wrap onto two lines on a laptop screen.
- **Weight:** `700` is bold. `600` is semi-bold, a softer look. `500` is just a touch heavier than normal. `400` is normal.

Want it bigger on desktop only, and left alone on phones? Wrap the desktop rule in a screen-size check:

```css
@media (min-width: 990px) {
  .Meteor-Navigation__Link__desktop {
    font-size: 20px !important;
  }
}
```

That rule only applies on screens 990px wide and up, which is roughly laptops and desktops.

## Change the font, color, or spacing too

The same rule holds more than size and weight. Add whatever you want to change:

```css
.Meteor-Navigation__Link__desktop,
.Meteor-Navigation__Link__mobile {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
```

- **Font family:** add `font-family: 'Georgia', serif !important;` to use a different font. Stick to fonts your theme already loads, or the browser falls back to a default.
- **Color:** add `color: #ffffff !important;` and use your own hex color. Handy when a bigger, bolder menu needs a different shade to stay readable over your header background.
- **Spacing:** `letter-spacing` spreads the letters out. Small values like 0.5px to 1px look intentional. Large values look broken.

Change one thing at a time and Save between each, so you can see what each line does.

## Mobile and desktop are often separate

This surprises people. Many menus, Meteor included, build a **separate** set of links for mobile. That is why the working CSS above lists two class names, one for desktop and one for the drawer. If you only style the desktop class, your phone menu stays small.

On a normal theme menu the mobile version usually uses a different element as well. So after any menu change, open your store on your phone, or shrink the browser window narrow, and check the small-screen menu too.

## What to check if nothing changes

If you pasted the CSS and the menu looks the same, run down this list. One of these is almost always the reason.

- **You forgot `!important` on an app menu.** App menus need it. Add it after each value.
- **Wrong class name.** Inspect a real menu link and copy the exact class. Watch the capital letters.
- **You edited a draft theme, not your live one.** Make sure the theme you edited is the one that is published.
- **Browser cache.** Your change is live but your browser is showing an old copy. Do a hard refresh, or check in a private window.
- **The size sits on a child element.** Rare, but if the link wraps the text in another tag with its own size, target that inner element instead.

## Do you need an app or a developer for this? No

For changing menu font size, you do not need either. The Custom CSS box and a few lines cover it completely, and you can undo it any time by deleting the lines.

It is worth being clear about what the menu app is actually for, though, because the answer is not "styling." A mega menu app handles the mobile drawer, the dropdown behavior, keyboard access, and staying intact when you update or switch your theme. That maintenance is the product. The look is a thin layer on top, and that layer is yours to adjust with CSS whenever you like.

So keep the app if you use its menu. Just remember that the font size, weight, color, and font are a five-line CSS change you own, not something you need to pay for or wait on.

## Quick recap

- Menu font size is a Custom CSS change, found under **Theme settings > Custom CSS**.
- A normal theme menu: target the theme's link class, like `.header__menu-item` on Dawn.
- An app menu (Meteor): target the app's exact class, `.Meteor-Navigation__Link__desktop` and `.Meteor-Navigation__Link__mobile`, and add `!important`.
- Avoid wildcard selectors like `[class*='meteor']`. They are case-sensitive and miss.
- Change `18px` for size and `700` for weight, and always check the menu on a phone.


---

---
title: "Custom Liquid Shopify: Hide the Header on One Page"
---

## The problem custom liquid actually solves

A merchant posted this on the Shopify Community. They run the Taste theme, they built a separate template for one page, and they wanted that page to show without the site header.

They did the obvious thing. They opened the theme editor, found the header section, and switched it off.

It disappeared from every page on the store.

That reaction is not a bug and it is not something you configure your way out of. It is how Shopify structures a theme, and once you see the structure the fix is one small block of CSS in a Custom Liquid section.

I reproduced the whole thing on a Taste 15.5.0 store. Here is what is going on and what to paste.

## What is custom liquid in Shopify

Custom Liquid is a section you can drop into a template to inject your own code. It accepts HTML, CSS, Liquid, and script tags, and it renders exactly where you place it in the template.

It exists because themes cannot anticipate everything. Rather than force you to edit theme files for every small change, Shopify gives you a slot in the theme editor where your own markup goes.

Two things make it more useful than it first appears.

It is a **section**, so it obeys the same scoping rules as every other section. Put it in a template and it only exists in that template.

It renders **inline**, so a `<style>` tag inside it applies to that page. You are not editing a stylesheet that every page shares.

That second point is the whole trick behind hiding a header on one page and nowhere else.

## Why turning the header off removes it everywhere

Open the theme editor on any Online Store 2.0 theme and the left panel splits into three groups: Header, Template, and Footer.

Those groups are not cosmetic. Header and Footer are **section groups**. Each is defined once, in `sections/header-group.json` and `sections/footer-group.json`. The layout then renders them on every single page:

```liquid
{% sections 'header-group' %}
```

That line lives in `layout/theme.liquid`. Every page that uses that layout gets it. There is no per-template version of it and no setting that makes one.

So when you uncheck the header section, you are editing the one shared definition. It vanishes site-wide because there is only one of it.

The Template group is the opposite. Its contents come from the template file you are editing, which is why anything you add there exists only on pages using that template.

![Header area is global, Template area is per template](/images/blog/custom-liquid-shopify-hide-header/06-header-vs-template-areas.jpeg)

That is the distinction the theme editor never spells out, and it is the entire answer.

## The fix: one Custom Liquid section

Add a Custom Liquid section to the template you want header-free, and paste this:

```liquid
<style>
  /* hides the announcement bar and the header on this template only */
  .shopify-section-group-header-group { display: none; }
</style>
```

That is the whole fix.

Because the `<style>` tag renders as part of that template, the rule only exists on pages using it. Every other page renders normally.

Before, with the header group intact:

![Announcement bar and header still on the page](/images/blog/custom-liquid-shopify-hide-header/01-header-still-showing.png)

After, on the same page:

![Header and announcement bar gone on this template only](/images/blog/custom-liquid-shopify-hide-header/02-header-hidden-on-template.png)

On my Taste test store the announcement bar measured 42px tall and the header 86px, pushing the main content down 129px. With the section in place, both measured 0px and the content started at 0. The same page on the default template still measured the full 42px and 86px, so nothing leaked.

## Why the ID selector you will be given does not work

Search this problem and you will be handed some version of this:

```liquid
<style>
  #shopify-section-header { display: none; }
  #shopify-section-announcement-bar { display: none; }
</style>
```

It looks right. It does nothing.

I checked on Taste 15.5.0. `document.querySelectorAll('#shopify-section-header')` returns **zero elements**. Same for the announcement bar.

Sections rendered through a section group do not get that ID. They get a generated one that includes the group's internal numeric ID:

```
shopify-section-sections--20216712724657__header
```

That number is unique to the store. It changes when the theme is duplicated, and it changes again when the theme updates. There is no value you can hardcode and rely on.

The class is the stable handle. Shopify derives `shopify-section-group-header-group` from the group's filename, so it is the same on every store running any Online Store 2.0 theme, and it survives updates.

It also covers both sections at once. The announcement bar and the header are both in that group, so one rule handles both.

## Hiding only part of the header group

If you want the header gone but the announcement bar kept, add the header section's own class:

```liquid
<style>
  .shopify-section-group-header-group.section-header { display: none; }
</style>
```

For a true landing page with no chrome at all, hide the footer group too:

```liquid
<style>
  .shopify-section-group-header-group,
  .shopify-section-group-footer-group { display: none; }
</style>
```

One caveat on the header-only variant: `.section-header` is the class Dawn-family themes put on the header section. Most free Shopify themes are Dawn-family, so it works on Taste, Dawn, Refresh, Sense, Craft, Studio, and Origin. On a heavily customized paid theme, inspect the header element and use whatever class it actually carries.

## How to add a custom liquid block in Shopify

The navigation is where people get lost, because the Add section button appears three times on the page, once per group.

Go to **Online Store > Themes > Customize**, then pick the template you want from the template dropdown in the top bar. This is the step that gets skipped. If you leave it on the default, you will edit the wrong template and see no effect.

![Pick your template, then Add section in the Template group](/images/blog/custom-liquid-shopify-hide-header/03-theme-editor-navigation.jpeg)

Then click **Add section** in the **Template** group, and search for `custom`.

![Add section in the Template group](/images/blog/custom-liquid-shopify-hide-header/04-add-custom-liquid-section.png)

Paste the CSS into the **Liquid code** box and save.

![Paste the CSS into the Liquid code box](/images/blog/custom-liquid-shopify-hide-header/05-paste-css-liquid-code.jpeg)

Position in the template does not matter for CSS. A `<style>` tag applies to the whole document wherever it sits. Put it at the top so it is easy to find later.

## Custom liquid section vs custom liquid block

Newer themes offer both, and they are scoped differently.

A **Custom Liquid section** sits at the template's top level, alongside your other sections. That is what you want for anything page-wide, like this fix.

A **Custom Liquid block** sits inside another section, such as a block within Product information. It renders in that section's position, which is right when you are adding something next to the buy buttons and wrong when you are targeting the page as a whole.

For hiding a header, use the section. A block would still work, since CSS does not care where the style tag renders, but it puts the code somewhere illogical for the next person who opens the theme.

## The step people forget

The template only applies to pages actually assigned to it.

Open the page in **Content > Pages**, and set the **Template** dropdown on the right to your new template rather than "Default page".

![Set the page Template to your new template](/images/blog/custom-liquid-shopify-hide-header/07-page-template-dropdown.png)

Miss this and everything above is correct and invisible. You edited a template nothing uses.

Worth knowing: this dropdown lists templates from your **live** theme. If you built the template on an unpublished theme, it will not appear here until you publish. To test before publishing, preview the page with `?view=<suffix>` on the URL, which renders an alternate template without changing any page data.

## If it did not work

**The header is still there.** You are almost certainly on the wrong template. Check the template dropdown in the theme editor top bar, and check the page's Template setting in the admin.

**It worked but the page still scrolls oddly.** Some themes add top padding to the main content to clear a sticky header. `display: none` removes the header from layout entirely, so this is rare. If you do see a gap, inspect the element above your content and clear its padding in the same style block.

**It hid on every page.** You added the section to the Header group instead of the Template group, or you edited the default template rather than your custom one.

**Nothing at all happened.** Confirm the section actually saved. The Custom Liquid box does not validate, so an unclosed tag fails with no error. Check the rendered page source for your `<style>` block.

## Is hiding the header with CSS a problem for SEO

Not in this case, and the distinction matters.

Google penalizes hidden text that manipulates rankings, meaning keyword-stuffed content shown to crawlers and hidden from users. That is not this. Here the header is absent for every visitor, and the reason is a design decision about one page.

The header markup does still ship to the browser. It renders nothing, but it is in the HTML, so your navigation links remain crawlable from that page. If you want them truly gone from the response, you need a separate layout file, which means editing theme code rather than using a section.

For a landing page or a checkout-adjacent page, the CSS approach is standard practice.

## When to edit the theme code instead

Custom Liquid is the right tool when the change is presentational and scoped to a template.

Go to the code editor instead in three cases. When you need the header genuinely absent from the HTML response. When the same change is needed across many templates and you would rather write it once. Or when the change involves logic beyond a style rule.

For a single page that should not show a header, a Custom Liquid section is the smaller and safer change. It survives theme updates, it needs no file edits, and any merchant can undo it by deleting one section.

## What this cost

Reproducing it on Taste, verifying the measurements, and confirming other pages were untouched took about an hour. The fix itself is one line of CSS.

The hour went into establishing why the obvious version fails. That is the part no forum answer covers, and the part that would otherwise have you pasting an ID selector that matches nothing and reports no error.


---

---
title: How to Customize the Shopify Horizon Theme Menu
description: Horizon ships with a plain hamburger menu. Here is how to turn it into a tabbed drawer with Shop and Explore tabs, an email signup, and footer links, using two menus and one Custom Liquid section. No theme files edited. Tested with screenshots.
---

## The problem

A merchant asked this on the Shopify Community. They had just moved to the Horizon theme and their navigation was a plain hamburger menu on both desktop and mobile. They wanted something closer to a fashion brand like Aime Leon Dore: a slide-out drawer with a Shop tab and an Explore tab at the top, an email signup, and a row of footer links at the bottom.

The key detail they cared about was the behaviour. Tapping Shop or Explore should switch the panel inside the open drawer, without the drawer closing and reopening.

This is one of the most common Horizon questions right now. Horizon is Shopify's newest free theme, and its menu drawer is clean but basic. It shows one menu list. There is no built-in setting for tabs, and no setting for a signup form inside the drawer.

This guide shows how to add all of that with two menus and one Custom Liquid section. You do not edit any of Horizon's theme files, so a future theme update cannot overwrite your work.

![The finished Horizon drawer with the Shop tab open, showing the menu links, an email signup, and footer links](/images/blog/customize-shopify-horizon-theme-menu/03-horizon-drawer-shop-tab.png)

## Why the Horizon menu looks the way it does

Horizon is built on Shopify's newer theme architecture, the one with sections and blocks everywhere. Its header drawer is a single element that renders one navigation menu. That is why, out of the box, you get a plain list of links and nothing else.

The forum answers on this topic usually tell you to edit Horizon's core files. They point you at the header block and the drawer snippet and tell you to hardcode a second menu and some tab markup into them. That works, but it has two real downsides. It spreads your change across several theme files, and a theme update can wipe it out.

There is a cleaner way. Horizon already gives you a Custom Liquid section, which is a box where you can paste your own code. You can use one of those to render the tabs, the second menu, the signup, and the footer, then slot them into the drawer that Horizon already built. Nothing in the theme's own files changes.

## The short answer

- Create two menus in your admin, one for Shop and one for Explore.
- Add one Custom Liquid section in the theme editor and paste the code below.
- The section builds the tabs, the signup, and the footer, and drops them into your existing drawer.

The whole thing works on desktop and mobile, because it hooks the same drawer your hamburger already opens.

## Before you start: duplicate your theme

Do this first, every time. In your admin, go to Online Store, then Themes. Find your live theme, click the three dots, and choose Duplicate. Work on the copy.

The copy is unpublished, so your customers never see your work in progress. When you are happy with it, you publish the copy. If anything goes wrong, your live theme is untouched.

## Step 1: create the two menus

Your two tabs are just two Shopify menus. Building them as menus, rather than hardcoding the links in code, means you can edit them from your admin forever after, with no code.

- In your admin, go to Settings, then Navigation.
- Click Create menu. Name the first one Shop Menu and add the links you want under the Shop tab.
- Create a second menu named Explore Menu and add its links.
- For the row of footer links at the very bottom, you can reuse your existing Footer menu, or make a third menu.

![The Navigation page in Shopify admin showing a Shop Menu and an Explore Menu, each with its links](/images/blog/customize-shopify-horizon-theme-menu/01-create-shop-explore-menus.png)

One thing to note. When you name a menu, Shopify creates a handle from that name. A menu called Shop Menu gets the handle `shop-menu`. A menu called Explore Menu gets `explore-menu`. You will point the code at those handles in a moment, so keep them in mind.

## Step 2: add one Custom Liquid section

Now the code. It goes in a single Custom Liquid section, and you add that section in the theme editor.

- Open the theme editor on your duplicate theme. From Themes, click Customize.
- In the left panel, scroll down to the Footer group.
- Click Add section, and choose Custom Liquid.
- Paste the code below into the Custom Liquid box, then click Save.

Adding it in the Footer area is deliberate. The footer loads on every page of your store, so the drawer works everywhere, not just on the homepage.

![Adding a Custom Liquid section inside the Footer group in the Horizon theme editor](/images/blog/customize-shopify-horizon-theme-menu/02-add-custom-liquid-section.png)

At the very top of the code there are three handles. Set them to match the menus you made in Step 1. If you named your menus Shop Menu and Explore Menu, the defaults already fit, and `footer` points at your existing Footer menu.

```liquid
{%- assign shop_handle    = 'shop-menu' -%}
{%- assign explore_handle = 'explore-menu' -%}
{%- assign footer_handle  = 'footer' -%}
{%- assign shop_label     = 'Shop' -%}
{%- assign explore_label  = 'Explore' -%}
{%- assign signup_title   = 'Sign up for our newsletter' -%}
{%- assign signup_button  = 'Join' -%}

{%- assign shop_list = linklists[shop_handle] -%}
{%- assign explore_list = linklists[explore_handle] -%}
{%- assign footer_list = linklists[footer_handle] -%}

<div id="ald-drawer-source" hidden>
  <div class="ald-tabs" role="tablist">
    <button type="button" class="ald-tab is-active" data-panel="shop" aria-selected="true">{{ shop_label }}</button>
    <button type="button" class="ald-tab" data-panel="explore" aria-selected="false">{{ explore_label }}</button>
  </div>
  <div class="ald-panels">
    <ul class="ald-panel is-active" data-panel="shop">
      {%- for link in shop_list.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}
    </ul>
    <ul class="ald-panel" data-panel="explore">
      {%- for link in explore_list.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}
    </ul>
  </div>
  <div class="ald-foot">
    <div class="ald-signup">
      <p class="ald-signup__title">{{ signup_title }}</p>
      {%- form 'customer' -%}
        <input type="hidden" name="contact[tags]" value="newsletter">
        <div class="ald-signup__row">
          <input type="email" name="contact[email]" placeholder="Email address" aria-label="Email" required>
          <button type="submit">{{ signup_button }}</button>
        </div>
        {%- if form.posted_successfully? -%}<p class="ald-signup__ok">Thanks for subscribing.</p>{%- endif -%}
      {%- endform -%}
    </div>
    {%- if footer_list.links.size > 0 -%}
      <ul class="ald-footlinks">
        {%- for link in footer_list.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
</div>

<style>
.menu-drawer .ald-tabs{display:flex;gap:28px;padding:6px 0 14px;margin-bottom:8px;border-bottom:1px solid rgb(var(--color-foreground-rgb,18 18 18)/.14)}
.menu-drawer .ald-tab{-webkit-appearance:none;appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;font:inherit;font-size:1.8rem;letter-spacing:.02em;color:rgb(var(--color-foreground-rgb,18 18 18)/.5);position:relative}
.menu-drawer .ald-tab.is-active{color:rgb(var(--color-foreground-rgb,18 18 18)/1);font-weight:600}
.menu-drawer .ald-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:2px;background:currentColor}
.menu-drawer .ald-panel{list-style:none;margin:0;padding:0;display:none}
.menu-drawer .ald-panel.is-active{display:block}
.menu-drawer .ald-panel a{display:block;padding:11px 0;text-decoration:none;color:inherit;font-size:1.6rem}
.menu-drawer .ald-foot{margin-top:22px;padding-top:20px;border-top:1px solid rgb(var(--color-foreground-rgb,18 18 18)/.14)}
.menu-drawer .ald-signup__title{margin:0 0 10px;font-size:1.25rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.menu-drawer .ald-signup__row{display:flex;border:1px solid rgb(var(--color-foreground-rgb,18 18 18)/.4)}
.menu-drawer .ald-signup__row input{flex:1;min-width:0;border:0;background:none;padding:12px;font:inherit;color:inherit}
.menu-drawer .ald-signup__row input:focus{outline:none}
.menu-drawer .ald-signup__row button{-webkit-appearance:none;appearance:none;border:0;background:rgb(var(--color-foreground-rgb,18 18 18));color:rgb(var(--color-background-rgb,255 255 255));padding:0 18px;cursor:pointer;font:inherit;letter-spacing:.02em}
.menu-drawer .ald-footlinks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.menu-drawer .ald-footlinks a{text-decoration:none;color:rgb(var(--color-foreground-rgb,18 18 18)/.6);font-size:1.3rem}
.menu-drawer .ald-native-hidden{display:none!important}
</style>

<script>
(function(){
  var SRC='ald-drawer-source';
  function inject(drawer){
    if(!drawer||drawer.querySelector('.ald-tabs'))return;
    var src=document.getElementById(SRC);if(!src)return;
    var nav=drawer.querySelector('.menu-drawer__navigation');if(!nav)return;
    var tabs=src.querySelector('.ald-tabs').cloneNode(true);
    var panels=src.querySelector('.ald-panels').cloneNode(true);
    var nativeList=nav.querySelector('.menu-drawer__menu');
    if(nativeList)nativeList.classList.add('ald-native-hidden');
    nav.insertBefore(panels,nav.firstChild);
    nav.insertBefore(tabs,nav.firstChild);
    var util=drawer.querySelector('.menu-drawer__utility-links');
    var foot=src.querySelector('.ald-foot');
    if(util&&foot){util.insertBefore(foot.cloneNode(true),util.firstChild);}
    tabs.addEventListener('click',function(e){
      var b=e.target.closest('.ald-tab');if(!b)return;
      var key=b.getAttribute('data-panel');
      tabs.querySelectorAll('.ald-tab').forEach(function(t){var on=t===b;t.classList.toggle('is-active',on);t.setAttribute('aria-selected',on);});
      panels.querySelectorAll('.ald-panel').forEach(function(p){p.classList.toggle('is-active',p.getAttribute('data-panel')===key);});
    });
  }
  function run(){document.querySelectorAll('.menu-drawer').forEach(inject);}
  run();
  var host=document.querySelector('#Details-menu-drawer-container')||document.body;
  new MutationObserver(function(){run();}).observe(host,{childList:true,subtree:true});
  document.addEventListener('click',function(e){if(e.target.closest('.header__icon--menu, .menu-drawer-container summary'))setTimeout(run,50);});
})();
</script>
```

That is the whole thing. Save the section, then open your storefront preview and click the hamburger. You should see the Shop tab open by default.

## The result

Tapping Explore swaps to the second panel, and the drawer stays open the whole time. The signup and the footer links stay pinned at the bottom on both tabs. That switch-without-closing behaviour is the part the merchant wanted, and it is the part a plain menu cannot do.

![The same Horizon drawer with the Explore tab active, showing the second set of links while the signup and footer stay in place](/images/blog/customize-shopify-horizon-theme-menu/04-horizon-drawer-explore-tab.png)

I tested this on a Horizon store on both desktop and mobile. The Shop tab shows by default, the Explore tab swaps panels without closing the drawer, and the signup and footer stay at the bottom.

## How to edit the menu in Horizon later

This is the main reason to use menus rather than hardcoded links. Once the section is in, you never touch the code again to change a link.

- To add, remove, or rename a link in either tab, go to Settings, then Navigation, and edit the Shop Menu or Explore Menu.
- To change the footer links, edit whichever menu the `footer_handle` points at.
- The change shows up in the drawer straight away.

That is also the plain answer to "how do I edit the menu in the Horizon theme?" for anyone who just wants to change links. Your menus live in Settings, then Navigation, and the theme reads them. You rarely need to touch theme code for menu changes at all.

## Can I add a mega menu or drop-down in Horizon instead?

Yes, and it depends on what you mean.

A drop-down, where a parent link reveals child links, is native. In Settings, then Navigation, drag a link underneath another link to nest it. Horizon renders nested links as an expandable submenu with no code.

A mega menu, the big multi-column panel with images, is a bigger job. Horizon's header block has some of this built in on desktop. For a full custom mega menu, you are either extending the theme or using an app. The tabbed drawer in this guide is a different pattern, aimed at the slide-out menu rather than a desktop hover panel.

## Can I put a newsletter signup in the menu?

The code above already does. It uses Shopify's own customer form, so a signup creates the customer and turns on their email marketing consent. No app needed to capture the email.

If you use Klaviyo or another email tool, you can swap their embed code in place of that signup block later. The tabs and the rest of the drawer are not affected, because the signup is just one part of the section.

## What to check if it did not work

If you saved the section and the drawer still looks plain, run through these.

- **Handles do not match.** The most common cause. The handle in the code has to match the menu handle exactly. Check Settings, then Navigation, and confirm your menu handles are `shop-menu` and `explore-menu`, or edit the handles at the top of the code to match.
- **You added it to the wrong place.** The section must load site-wide. The Footer group is the safe spot. If you added it inside a single template, it will only load on that page.
- **You did not Save.** The theme editor needs an explicit Save. If the button stayed greyed out, click into the box, add a space, delete it, then Save.
- **Browser cache.** You saved, but your phone still shows the old drawer. Reload, or check in a private window.

## Custom Liquid vs editing theme code

People often ask whether they should just edit Horizon's files instead. For this, Custom Liquid is the better tool.

Editing theme code means opening the code editor and changing the drawer snippet and the header block. It works, but a theme update can overwrite those files, and a typo can break the header on every page. The Custom Liquid section is self-contained. It cannot be overwritten by a Horizon update, and if you ever want it gone, you delete the one section.

Reach for theme code only when you need something Custom Liquid genuinely cannot express. For a tabbed drawer, it can.

## The no-code alternative

If you would rather not paste any code, a menu or drawer app can build a tabbed navigation visually. Meteor Mega Menu, qikify Smart Menu, and Buddha Mega Menu are all popular for this. They cost more over time than a free section, but they give you a visual editor and support.

For a store that wants exactly the Shop and Explore drawer, though, the two menus plus one section is hard to beat. It is free, it is fast, and everything after setup is editable from your admin.

## The short version

- Horizon's drawer shows one plain menu and has no built-in tabs or signup.
- Create two menus, Shop Menu and Explore Menu, in Settings, then Navigation.
- Add one Custom Liquid section in the Footer group and paste the code, matching the three handles to your menus.
- The section injects the tabs, signup, and footer into your existing drawer, on desktop and mobile.
- Tabs switch panels without closing the drawer, and every link stays editable from your admin with no code.

That is how to customize the Shopify Horizon theme menu into a proper tabbed drawer, without touching a single theme file.


---

---
title: How to Customize the Shopify Inbox Chat Button
description: What you can change on the Shopify Inbox chat widget today, what you cannot, and the free code and app workarounds for a custom button text, icon, and greeting.
---

## The problem

A merchant asked about this on the Shopify Community. They wanted more control over the Shopify Inbox chat widget than the app seems to allow.

Their list was clear:

- A rich-text greeting message, not a plain box.
- Their own text on the chat button, instead of picking from a fixed list.
- A custom icon they could upload.
- A name for the AI agent, so it feels personal.

These are fair requests. If you have opened the Inbox settings and felt boxed in, you are not missing a hidden toggle. Some of this is simply not built yet.

I installed Shopify Inbox on a test store and went through every chat setting it has. This post shows what you can change today, what you cannot, and the workarounds for the two that matter most: the button text and the button icon.

Shopify Inbox is Shopify's free chat app. It puts a chat button on your storefront so shoppers can message you or ask its AI assistant a question. The button, the greeting, and the colors are all set in one small settings panel.

## What Shopify Inbox lets you change today

Open the Inbox app in your admin. Click Edit chat settings. That opens the theme editor on the App embeds panel, under Online store chat.

Everything you can change lives in that one panel. Here is the honest list.

- **Greeting message.** A single plain-text box.
- **Colors.** Background and font color for the chat window.
- **Icon.** A dropdown of preset icons.
- **Label.** A dropdown of preset button labels.
- **Position.** Left, center, or right, and three height options.

![The Shopify Inbox Greeting Message is a single plain-text field|600x388](/images/blog/customize-shopify-inbox-chat-button/01-greeting-plain-text.png)

That is the whole panel. No free-text label, no icon upload, no rich text, no agent name. Below I go request by request.

## How to change the Shopify Inbox chat button text

You cannot type your own text on the button in the settings. The Label field is a dropdown with a fixed set of choices: Chat, Ask anything, Assistance, Contact, Help, Support, Live chat, Message us, Need help?, and No text.

![The chat button Label is a fixed preset list, not free text|600x348](/images/blog/customize-shopify-inbox-chat-button/02-chat-button-label-presets.png)

If one of those fits, pick it and save. If you want wording that is not on the list, you have two routes.

The free route uses a little code. You hide Shopify's own button, then add your own button with any text you like, and have it open the chat. I show the exact steps further down.

The no-code route is an add-on app. More on that below too.

So the short answer to "how do I change my Shopify chat button text": inside Inbox you can only pick a preset. For truly custom words, you replace the button.

## How to use a custom chat button icon

Same story as the text. The Icon field is a dropdown, not an upload. Your choices are Chat bubble, Email, Question mark, Smiley face, Team, Hand wave, and No icon.

![The chat button Icon is six presets with no upload option|600x243](/images/blog/customize-shopify-inbox-chat-button/03-chat-button-icon-presets.png)

There is no way to upload your own logo or SVG in the Inbox settings. To show a custom icon, you use the same trick as the text: hide the default button and build your own, with your own image on it.

## Can you use a rich-text greeting message?

Not today. The Greeting Message is one plain-text field, as the first screenshot shows.

You can write the words you want. You cannot bold part of it, add a heading, add a link, or split it into styled blocks. There is no rich-text editor, and there is no reliable workaround. Anything that hacks formatting into that box tends to break the next time Shopify updates the app.

If your goal was to separate information for shoppers, the closest built-in tool is Instant answers inside Inbox. That lets you set up common questions and canned replies. It is not rich text in the greeting, but it does help you present information in a tidy way.

## Can you name the Shopify Inbox AI agent?

Not today. Inbox does not give the assistant a name field.

You can turn the agent on or off, and you can set its tone and rules so replies sound like your brand. But you cannot label it "Ava" or "Sam" in the chat header. That is a genuine gap, not a setting you missed.

## How to change the chat button color and position

Two things you asked less about are fully supported, so it is worth naming them.

**Color.** The settings panel has a Background and a Font color for the chat window. There is also an Invert activator colors switch for the button itself. So the chat button color is adjustable, even though the icon and text are not.

**Position.** You can set the button to the left, center, or right, and to one of three heights. That is how you move it off a menu or a cookie bar.

So if your real question was how to change the Shopify chat button color or move it, that part is easy and native. Set it in the same panel and save.

## The free way to get a custom button text and icon

This is the route when you want your own words and your own image, without paying for an app.

The idea is simple. You hide Shopify's own chat button. You add your own button anywhere on the page. When someone clicks it, it opens the real Inbox chat. One code block does all three.

Here is the button you start with. This is the default Shopify Inbox chat button.

![The default Shopify Inbox chat button on a test store|1280x704](/images/blog/customize-shopify-inbox-chat-button/04-default-chat-button.png)

**Where to paste it.**

The chat button is added by an app, so it does not live in your theme files. To replace it on every page, put the code in your layout, not on a single page.

Go to Online Store, then Themes, then the three dots, then Edit code. Open `layout/theme.liquid` and paste the block just before the closing `</body>` tag. A Custom Liquid section works too, but it only appears on the one page you add it to, so `theme.liquid` is the right place for a button that follows the whole store.

![Where to paste the code: layout/theme.liquid in the theme code editor|2600x1410](/images/blog/customize-shopify-inbox-chat-button/07-where-theme-liquid.png)

Then change the text and the icon to your own. Upload a light-colored icon under Settings, Files and paste its URL in place of `YOUR-ICON-URL`.

```html
<style>
#my-chat-launcher{position:fixed;right:20px;bottom:20px;z-index:2147483000;display:flex;align-items:center;gap:8px;background:#7a3cff;color:#fff;border:none;border-radius:999px;padding:12px 20px;font:600 15px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#my-chat-launcher img{width:22px;height:22px}
</style>

<button id="my-chat-launcher" type="button">
  <img src="YOUR-ICON-URL" alt="">
  <span>Message our team</span>
</button>

<script>
(function () {
  var HIDE = '.activator{opacity:0!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;overflow:hidden!important}';
  function allRoots() {
    var rs = [document];
    (function walk(r) {
      r.querySelectorAll('*').forEach(function (el) {
        if (el.shadowRoot) { rs.push(el.shadowRoot); walk(el.shadowRoot); }
      });
    })(document);
    return rs;
  }
  function findActivator() {
    var rs = allRoots();
    for (var i = 0; i < rs.length; i++) {
      var el = rs[i].querySelector('button.activator');
      if (el) return { el: el, root: rs[i] };
    }
    return null;
  }
  function hideDefault() {
    var f = findActivator();
    if (f && !f.root.querySelector('style[data-hide-default]')) {
      var st = document.createElement('style');
      st.setAttribute('data-hide-default', '1');
      st.textContent = HIDE;
      f.root.appendChild(st);
    }
  }
  setInterval(hideDefault, 400);
  hideDefault();
  document.getElementById('my-chat-launcher').addEventListener('click', function () {
    var f = findActivator();
    if (f && f.el) f.el.click();
  });
})();
</script>
```

Save, then open your store. The default button is gone, and your own button shows in its place.

![The default chat button replaced by a custom Message our team button|1280x752](/images/blog/customize-shopify-inbox-chat-button/08-default-replaced.png)

Click it, and the real Shopify Inbox chat opens.

![Clicking the custom button opens the real Inbox chat|1280x704](/images/blog/customize-shopify-inbox-chat-button/06-custom-button-opens-chat.png)

I tested this on a Dawn store with Shopify Inbox turned on. The default Chat button stayed hidden, my own purple button took its place, and clicking it opened the real chat. It also stayed hidden after opening and closing the chat, which is the part a simpler script gets wrong.

A quick note on how it works, so you can trust it. The Inbox button lives inside a `<shopify-chat>` element, and once the chat's agent loads, its real button (class `activator`) sits in a shadow DOM nested a couple of layers deep. The script walks every shadow root to find it, hides it, and forwards your click to it. It also re-checks a few times a second, because the widget rebuilds that button each time the chat opens and closes. That is why plain CSS like `#shopify-chat{display:none}` does not work, and why a one-time script lets the default button creep back after the first use.

The trade-off is real. This is a small custom build, and you are responsible for keeping it working after theme or app updates. If Shopify changes the widget's internals, the script may need a tweak. If you are comfortable pasting code, it costs nothing. If you are not, read the next section.

## The no-code alternative: an add-on app

If you do not want to touch code, an add-on app can give the Inbox button a custom icon, your own label text, and a custom font. One example is Spark Tools for Inbox, which is a paid add-on at around \$5 a month.

An app like that sits on top of Inbox. You do not rebuild anything. You install it, set your icon and text, and it restyles the existing chat button.

Weigh it against the free route. The app is faster and needs no code, but it is a monthly fee and a new app on your store. The code route is free but is yours to maintain. Both reach the same result for the button text and icon.

Neither an app nor code can add a rich-text greeting or name the AI agent. Those still live inside Shopify Inbox, which does not expose them.

## How to send this as a feature request to Shopify

For the two gaps that only Shopify can fix, the rich-text greeting and the named AI agent, the best move is to ask for them properly.

- Use the feedback link inside the Shopify Inbox app. That goes to the team that builds Inbox.
- Post the request on the Shopify Community and keep the thread active. Other merchants can add their voice.

Features like these get built on demand. The more merchants who ask for the same thing, the more likely it moves up the list. A single request is easy to miss. Fifty requests for the same feature is a signal.

## If the chat button is not showing at all

A quick detour, since it is a common follow-up. If your chat button is missing after setup, check these.

- **The app embed is off.** The chat button is an app embed on your theme. Open the theme editor, go to App embeds, and make sure Online store chat is turned on for the theme you publish.
- **You edited a different theme.** Settings on an unpublished theme do not affect your live store. Confirm you are editing the live theme.
- **Business hours.** If you set the chat to only show during staff hours, it can hide outside those hours depending on your setup.
- **Cache.** Old styles linger. Refresh hard, or open the store in a private window.

## Definitions people mix up

A few terms get tangled here. The plain version.

**Shopify Inbox versus the chat widget.** Inbox is the app and the inbox where you read messages. The chat widget is the button and window shoppers see on your storefront. Same product, two parts.

**The greeting versus Instant answers.** The greeting is the one line that shows when the chat opens. Instant answers are preset questions and canned replies. Different features, both inside Inbox.

**The Label versus custom text.** The Label is the preset word on the button, chosen from a dropdown. Custom text means wording that is not on that list, which needs the code or app route.

**The icon preset versus a custom icon.** The icon dropdown offers a handful of built-in shapes. A custom icon is your own uploaded image, which the settings do not support.

**App embed versus theme code.** An app embed is a toggle that lets an app add itself to your theme, like the chat button. Theme code is the actual Liquid and CSS files. Turning the chat on or off is an embed toggle. The free custom-button route touches a bit of code.

That is the full picture. On the Shopify Inbox chat button you can change the color, the position, and pick a preset icon and label. For your own text or your own icon, you replace the button with code or an app. And for a rich-text greeting or a named AI agent, the honest answer today is to file the request and rally other merchants behind it.


---

---
title: "Shopify New Customer Accounts: Customizing the Login Page"
description: "Can you redesign the Shopify customer login page on Horizon or any modern theme? Here is what you can actually change in 2026, why the old fully custom login is gone, and the real options left."
---

## The problem

A merchant asked this on the Shopify Community, and it is a fair question with a frustrating answer. It comes down to Shopify's new customer accounts, and what they let you change.

They run the Horizon theme. Their login page is Shopify's standard sign-in screen, a "Continue with Shop" button and an email field. They wanted to replace it with a fully custom design: a photo on the left, and email plus password boxes with their own buttons on the right.

So the question was simple. Can you change the Shopify login page to a custom design like that?

They also asked a good follow-up: would switching to a different free theme let them do it?

I dug into this on a test store. The short answer is that the exact custom design is not possible on Horizon, or on any current theme, and the reason is a platform change most guides have not caught up with. But there is a real set of things you can change, so let me walk through both.

## Why you cannot edit the login page like you used to

This is the key shift, so it is worth being precise.

Shopify has two generations of customer accounts.

The **old, classic** accounts rendered the login page from inside your theme. There was a login template in the theme files, and you could rebuild it: add a side image, add email and password fields, restyle everything with Liquid and CSS. The custom design the merchant wanted is exactly that old style of login.

The **new** customer accounts are different. The login page is hosted by Shopify, not by your theme. Your theme does not contain a login template at all. There is nothing in the theme code to edit, because the page is not served from the theme.

Horizon is a new theme, so it uses new customer accounts. I checked its files: there is no customer login template anywhere in it. That is by design.

And classic accounts are on the way out. Shopify deprecated the classic customer accounts in early 2026. Stores that are not already using them can no longer switch to them. So the theme-editable login that the merchant's target design relies on is simply not available to turn on.

## The new login has no password field

There is a second reason the target design cannot be recreated, separate from the layout.

New customer accounts do not use email and password at all. Customers sign in with a one-time code sent to their email, or through Shop, Google, or Facebook. There is no password box to add, because passwords are not part of the new sign-in.

So even setting aside the custom layout, the email-and-password form in the merchant's mockup is not something the new login supports.

## What you CAN change on the login page

Now the useful part. The Shopify-hosted login is not frozen. You can brand it, and the controls live in your admin, not in theme code.

- Go to **Settings > Customer accounts**.
- Next to **Configurations**, click **Customize**.

![Settings, Customer accounts, then click Customize](/images/blog/customize-shopify-login-page/01-customer-accounts-customize.png)

This opens the branding editor that is shared by checkout and customer accounts. Open the **Settings** tab, the gear icon on the left, and you can set:

- your **logo** and its alignment
- **background, accent, and button colors**
- **fonts** for headings and body text

![The branding editor showing logo, color palette, and font controls](/images/blog/customize-shopify-login-page/02-branding-editor.png)

Click **Save**, and these apply to the login screen and the account pages. The editor even labels these as applying to "checkout and customer accounts", so you can see the scope while you edit.

That is the full extent of the built-in styling: logo, colors, and fonts. There is no layout change, and no option for a side image. You cannot turn the single-column Shopify login into the two-column, image-plus-form design from the mockup.

## Does switching to another free theme help?

The merchant asked this directly, so it deserves a clear answer. No.

The login page limitation is not a Horizon problem. It comes from customer accounts, which is a store-level setting, not a theme feature. Every current theme on a store using new customer accounts gets the same Shopify-hosted login. Dawn, Spotlight, Refresh, Horizon: same login page, same branding-only controls.

Changing themes changes your storefront. It does not give you back a theme-editable login, because no current theme ships one.

## If you truly need a fully custom login

If the branded Shopify login is genuinely not enough, and you need the side image and your own form layout, there are two real routes. Both are bigger commitments.

- A **customer login or account app** from the Shopify App Store. Some apps add their own account and login experiences that sit alongside or in front of the default. This is the lighter option, though it depends on the app.
- A **custom, headless build**. Here you build your own storefront and your own login flow against Shopify's APIs. This gives full design control, but it is a full development project, not a settings change.

Neither is achievable with theme code alone on a current theme, which is the honest bottom line.

## How to preview your branded login page

Change branding, then look at the real thing before you decide it is not enough.

Your customer account area has its own URL. In **Settings > Customer accounts**, there is a URL field near the bottom that points at your account and login pages. Open that link in a private browser window, where you are not already signed in, and you will see the login screen exactly as a customer does.

Do this after you set your logo, colors, and fonts. It is the honest test of how far the branding gets you. For a lot of stores, a clean logo and matching brand colors on the login screen is genuinely enough, even though it is not the fully custom layout the merchant originally pictured.

If you decide it is not enough after seeing it live, that is the point to weigh an app or a headless build, not before.

## Should you force customers to log in?

A related setting confuses people, so it is worth clearing up.

Separate from styling the login page, you can decide whether accounts are optional or required. In the checkout and accounts configuration, there is an option to require customers to sign in before checkout. Turning it on sends every shopper through the login screen, so the branding you set there matters more.

Most stores leave login optional, so guests can check out without an account. If you run a wholesale or members-only store, requiring login makes sense. Either way, the styling options are the same. Requiring login just means more customers see the page you branded.

## Classic vs new customer accounts

Since the two get confused constantly, here is the plain distinction.

**Classic customer accounts** were theme-rendered. Email and password login, a login template in your theme, fully customizable with Liquid and CSS. Deprecated in early 2026 and not available to switch on for stores that were not already using them.

**New customer accounts** are Shopify-hosted. Passwordless sign-in by email code, or Shop, Google, and social login. Not editable in theme code. Branding only, through Settings > Customer accounts.

If your store is new, or on a new theme like Horizon, you are on the new system. That is the reality the design decision has to work within.

## Common questions

**Can I add my own CSS to the login page?**
Not in the way you could with the classic theme login. The page is hosted by Shopify. You style it through the branding controls, not with custom CSS in your theme.

**Can I at least put my logo and brand colors on it?**
Yes. That is exactly what Settings > Customer accounts > Configurations > Customize covers. Logo, colors, and fonts carry across the login and account pages.

**Can I remove the "Continue with Shop" button?**
The Shop sign-in option is managed under Settings > Customer accounts > Authentication, along with Google and Facebook. You control which sign-in options appear there, rather than editing them out with theme code.

**Why does the login ask for an email code instead of a password?**
That is the new customer accounts flow. Instead of a password, Shopify emails a one-time code to verify the customer. It removes password resets and locked-out-customer support tickets, which is a large part of why Shopify moved to it. It is not something you switch off per theme.

**Will Shopify bring back the custom login?**
The direction is the opposite. Shopify is consolidating on the hosted new customer accounts and retiring the classic, theme-editable version. Plan around the hosted login, not against it.

I tested all of this on a Horizon store. The login is served by Shopify, the only built-in styling is logo, colors, and fonts, and there is no layout or side-image option in the theme. The branding controls above are the real, supported way to make the login page look like yours.


---

---
title: "How to Customize a Shopify POS Receipt (Visual Editor)"
description: "Shopify's new POS receipt visual editor moved things around. How to move the order code to the bottom, what you can change, and what is locked."
date: "2026-08-12"
---

## Shopify changed my POS receipts, how do I change them back

A merchant asked this on the Shopify Community. Shopify had swapped their printed POS receipts to a new visual editor overnight, and the layout changed on them. They wanted two things: move the QR code (their order code) to the bottom of the receipt, and add separator lines between the line items. They do not write code and wanted plain directions.

This is the new **Printed receipts visual editor** for Shopify POS. It is a block-based editor, and it rolled out to a lot of stores at once. One of the two changes is doable with no code. The other one is not, and it is better to know that up front than to hunt for a setting that does not exist.

I rebuilt this on a POS Pro test store and worked through both. Here is exactly what you can and cannot do.

## Where the POS receipt editor is

First, so you are in the right place:

1. From your Shopify admin, open the **Point of Sale** channel in the left sidebar.
2. Go to **Settings**.
3. Under Customization, click **Printed receipts**.
4. Click **Customize your receipts**.

That opens the visual editor. On the left is a block tree: a **Header** section, a **Content** section, and a **Footer** section. The receipt preview is on the right.

The Header holds blocks like your logo, location details, and the **Order code**. The Footer holds customer information, a **QR code** block, a return policy, and more. The Content section in the middle is your list of items.

## Move the order code to the bottom

This is the doable one, and it is no code.

The "QR code" people mean is usually the **Order code** block, and by default it sits in the Header, at the top. The visual editor only reorders blocks inside a section, so you cannot drag the Order code from the Header down into the Footer. That is the wall people hit.

The way around it is to hide it up top and re-add it at the bottom.

1. In the left panel, open the **Header** section.
2. Click the **Order code** block, then click the **eye icon** next to it to hide it. It stops printing at the top.
3. Open the **Footer** section and click **Add block**, then choose **Custom Liquid**.
4. Paste this into the block: `Order number: {{ order.name }}`
5. Click **Save**. The order number now prints at the bottom.

![Hide the order code in the Header, then add it to the Footer](/images/blog/customize-shopify-pos-receipt/01-move-order-code-visual-editor.png)

A Custom Liquid block is a small box where you can type text and Shopify variables. `{{ order.name }}` is the variable for the order number, so it prints the real number for each sale.

One thing to know so the result does not surprise you:

- The built-in Order code prints the **register receipt number**, which is prefixed by the register (something like #1-1288).
- `{{ order.name }}` prints the **plain order number** (like #1425).

For most shops the plain order number at the bottom is exactly what they want. If you specifically need that exact register-prefixed number moved to the bottom, that precise format is not available without code.

## Separator lines between items: the honest answer

This one is not possible in the visual editor.

The item list is the **Content** section, and Shopify locks it. Unlike the Header and Footer, it has no chevron to expand, no eye icon, and no **Add block** button. You cannot add a divider, a line, or any custom element between the line items.

So there is no toggle to find. If your goal was lines between products on the printed receipt, the visual editor cannot do it today. It is better to hear that than to keep looking.

## What about the code editor

There is a code editor for printed receipts, and it is more capable. On POS Pro it lives behind an **Edit code** link in the receipts editor, and it supports HTML, CSS, and Liquid. In there, the item rows are styled by a rule that draws the divider under each item, so solid separator lines between products are reachable with a small CSS change.

Two honest caveats.

First, it is code, and this merchant did not want code. Editing Liquid templates is a different skill from clicking blocks.

Second, once the new visual editor is fully active on a store, the code editor is not always shown anymore. If you do not see an **Edit code** link in your receipts editor, that route is not open to you, and the visual editor limits above are what you have.

So the summary is: the order-code move is a clean no-code win, and item dividers are either a code job or not available, depending on what your store still exposes.

## Where is the Shopify POS receipt editor?

It is inside the Point of Sale channel, not the theme editor. Point of Sale, then Settings, then Printed receipts, then Customize your receipts. This trips people up because online store receipts and POS receipts are edited in completely different places. The theme editor does not touch POS printed receipts at all.

## Why did my Shopify receipts change on their own?

Shopify replaced the older printed-receipt setup with the new visual editor and rolled it out automatically. If your printed layout looks different than it used to, that is why. Nothing on your account broke. The blocks and defaults are simply new.

If the change has not shown up on your actual printed receipts yet, check the POS app version on every device. The new template only prints from a current app version, and a device on an older version keeps printing the old layout. If you run more than one device, update them all, or some will print the new layout while others print the old one.

## Can I add a logo or a QR code to POS receipts?

Yes, both are blocks in the visual editor.

The logo is a Header block. A scannable QR code is a Footer block, so it prints near the bottom by default. Add it from the Footer with **Add block**, then set its label and the link it points to. That QR is separate from the Order code discussed above, so do not confuse the two: the Order code identifies the sale, the QR block can point anywhere you choose, such as a review page or your store.

For a sale that did not go through POS, such as a market stall sale you write up later, the [free receipt maker](/tools/receipt-generator) makes a POS-style receipt on 58 mm or 80 mm paper.

## Do I need POS Pro to customize receipts?

For the deeper edits, yes. The code editor and the fuller block controls are POS Pro features. On the base POS plan you can still edit the header and footer message text, but the advanced layout control and the code route are Pro.

If you are on Pro and still cannot find a control mentioned here, it is usually because that specific block sits in a section you have not expanded, or because the item Content section is genuinely locked, as covered above.

## Visual editor vs code editor: which one am I in?

Quick way to tell.

- **Visual editor:** you see a block tree with Header, Content, and Footer, and you click blocks and toggle their visibility. No code.
- **Code editor:** you see files like `header.liquid` and `line-items.liquid` and you edit HTML, CSS, and Liquid directly.

Most merchants are now in the visual editor by default. The code editor, where still available, is the "advanced edits" escape hatch behind an **Edit code** link.

## What to check if it did not work

A few things trip people up on this receipt editor:

- **The order code still prints at the top.** The Header block was not hidden. Open the Header, select the **Order code** block, and confirm the eye icon shows it as hidden. Hiding is per block, so make sure you toggled the Order code, not a neighbour.
- **The Custom Liquid block shows nothing.** Check the text is exactly `Order number: {{ order.name }}`, with the double curly braces. A typo in the variable prints blank. The `order` object is available in the receipt template, so `{{ order.name }}` resolves at print time, not while you are editing.
- **Your edits are not on the printed paper.** That is almost always the POS app version. The new template only prints from a current app, so update the app on every device, not just one.
- **You changed it for one location but not another.** Receipt settings can apply per location on POS Pro. If you run several, confirm you edited the location you are printing from.
- **You cannot find Add block on the item list.** That is expected. The Content section is locked, so there is no Add block there. It only appears on the Header and Footer.

## Order code vs QR code vs receipt number

These three get mixed up, so quickly:

- The **Order code** block is a scannable code that encodes the sale, and it lives in the Header by default.
- A **QR code** block is a separate Footer block you can point at any link, like a review request or your store.
- The **receipt number** (register-prefixed, like #1-1288) is the printed sale reference, which differs from the plain order number (#1425) that `{{ order.name }}` prints.

Knowing which one you actually want saves a lot of back and forth. The merchant here wanted the order identifier moved down, which the Custom Liquid footer block handles cleanly.

## The short version

Shopify's new POS receipt visual editor is block-based, at Point of Sale, Settings, Printed receipts, Customize. To move the order code to the bottom, hide the Order code block in the Header with the eye icon, then add a **Custom Liquid** block in the Footer containing `Order number: {{ order.name }}`. Separator lines between items are not available in the visual editor, because the Content section is locked. Those need the code editor, if your store still shows one, and that is a code change rather than a click.


---

---
title: "Customize Shopify Product Page Layout With CSS"
description: The product info on your Shopify product page starts too far down on desktop. Here is why the right column sits low, and one small CSS rule that lifts the whole column up while leaving mobile alone. Tested on Atelier, with screenshots.
---

## The problem

A merchant asked about this on the Shopify Community. On desktop, the whole right-hand column of their product page sat too low. The images filled the left side from the top, but the title, price, variants and Add to cart button all started well below them, with a big empty gap above.

They wanted to move the entire right column up together as one block: the product title, the price, the variants and options, the quantity, the Add to cart button, the Buy buttons and the description. Everything, in one move, so it sits closer to the top.

There was one hard rule. The mobile layout had to stay exactly as it was. Only desktop should change.

This is a common request, and it looks like it should be a single setting. It is not, and the reason is worth understanding before you touch anything.

I reproduced it on an Atelier store. Here is the product page with the gap. Notice how the images start at the top on the left, but the title and price on the right begin much lower down.

![A Shopify product page on Atelier where the right column of product info starts far below the images](/images/blog/customize-shopify-product-page-layout/01-before-info-column-too-low.png)

That empty space at the top of the right column is the whole complaint. The page is not broken. It is doing exactly what the theme tells it to do.

## Why the product info starts so low

Here is the part that trips people up.

The theme is adding a fixed amount of space to the top of the product info column, and it only does it on desktop. In Atelier that space is 80 pixels. The theme sets it with a single rule that runs at tablet and desktop widths and does nothing on phones.

In plain terms, the column has a built-in top padding. Padding is empty space inside a box, above the content. So the title, price and everything under it get pushed down by that padding, while the image column next to it starts at the very top. The two columns are the same height, but one has a cushion on top and the other does not.

This is why nudging the title, or the price, or the Add to cart button on their own never works cleanly. The gap is not on any one of those pieces. It is on the container that holds all of them. Move the container and every piece inside it moves together, which is exactly the behaviour the merchant wanted.

It is also why there is no on and off switch for it in the theme editor. The gap is written into the theme's own stylesheet, not exposed as a setting. So no amount of clicking through the Product information section will reveal a control that removes it.

Another person on the thread suggested looking for a built-in Product Details position or height control first. That is a sensible thing to check, and you should. But when the merchant went looking on their version of Atelier, their reply was short and clear: they did not see those controls. That is the normal outcome. The top gap is styling baked into the theme, and the fix has to happen in CSS.

## First, check the easy things

Before you add any code, rule out the two things that occasionally are a setting.

Open your theme and go to Online Store, then Themes, then Customize. Open a product and click into the Product information section, then into each block. If your version of the theme happens to expose an alignment or vertical-position control for the details column, try it first. On some themes and some versions it exists. On the Atelier version in this case, it did not.

Also check whether the gap is coming from the section's own top spacing rather than the column. In the theme editor, select the Product information section and look for a Padding or spacing control. If the whole section has a large top padding, reducing that is the cleanest fix and needs no code. In this case the section spacing was normal and the gap was on the column itself, so a setting could not remove it.

If neither of those applies, which is the usual result, one small CSS rule does the job.

## The fix: one Custom Liquid section

The clean way to add a little CSS to a single template, without an app and without editing theme files, is a Custom Liquid section. It lives only on the template you add it to, so it cannot leak onto the rest of your store. I tested every step below on an Atelier store.

Duplicate your theme first if you want to be safe. You are only adding one section, but a duplicate lets you preview with zero risk.

### Step 1: Add a Custom Liquid section to your product template

Go to Online Store, then Themes, then Customize.

Make sure the template selector at the top says Default product, or whichever product template you use. This matters, because it scopes the change. Anything you add here shows up on product pages only.

In the left panel, click Add section, then choose Custom Liquid. In Atelier it is listed under Layout.

![Adding a Custom Liquid section to the product template in the Shopify theme editor](/images/blog/customize-shopify-product-page-layout/02-add-custom-liquid-section.png)

### Step 2: Paste the CSS and Save

Click into the new Custom Liquid section. Paste this into the Liquid code box, then click Save.

```html
<style>
@media (min-width: 768px) {
  .product-information .product-details { padding-top: 0 !important; }
}
</style>
```

![Pasting the desktop-only CSS into the Custom Liquid code box](/images/blog/customize-shopify-product-page-layout/03-paste-css-liquid-box.png)

That is the whole fix. Here is what each part is doing, so you can adjust it with confidence.

The `@media (min-width: 768px)` wrapper means the rule only runs at 768 pixels wide and up. That is tablet and desktop. Phones are narrower than that, so the rule never touches them. This is what keeps the mobile layout untouched, which was the merchant's hard requirement.

The `.product-information .product-details` part targets the product info column inside the main product section, and nothing else. It is written that way on purpose. The short version, just `.product-details`, would also match the small product card inside quick-add popups, which reuse the same name. Scoping it to the product section keeps the change where you want it.

Setting `padding-top` to `0` removes the cushion entirely, so the top of the title lines up with the top of the images. If you would rather keep a small breathing space instead of going flush, change `0` to `20px`, or any value you like. That single number is the one knob you adjust.

Here is the same page after saving. The whole right column has moved up as one block and now sits level with the images.

![The Shopify product page after the fix, with the right column moved up to sit level with the images](/images/blog/customize-shopify-product-page-layout/04-after-info-column-at-top.png)

On the store I tested, the product info moved up 80 pixels, from starting well below the images to lining up with their top edge. Everything inside the column moved together: title, price, variants, quantity, Add to cart, Buy buttons and description. Mobile did not change at all.

## How do I move the Add to cart button up on Shopify?

This is the same problem seen from a different angle, and the answer is the same rule.

The Add to cart button is not floating on its own. It sits inside the product info column, below the title, price and variants. If the whole column is pushed down, the button is pushed down with it. So you do not move the button by itself. You move its container, and the button follows.

Trying to move the button alone with its own negative margin tends to backfire. It can slide the button up over the price, or break the spacing between the variant picker and the button on some screen sizes. Lifting the column keeps all the internal spacing intact and just changes where the whole group begins.

If your real goal is to keep the Add to cart button visible without scrolling, moving the column up helps, but the bigger lever is often the image size. A very tall image column pushes the fold down. Shortening or constraining the gallery height on desktop can do more for button visibility than moving the text column.

## Can I change the product page layout without an app?

Yes, for spacing and position tweaks like this one. A Custom Liquid section with a few lines of CSS covers most of these small layout complaints, and it costs nothing and loads nothing extra.

Page builder apps like PageFly, Shogun and GemPages are a different tool for a different job. They let you rebuild the product page visually with drag and drop, which is worth it if you want a heavily custom layout with extra sections, tabs and blocks. For a single spacing fix they are overkill. Reach for one when you are redesigning the page, not when you are nudging one column.

The native theme editor also does more than people expect. Most sections have their own Width and Padding controls, so before writing CSS it is always worth checking whether a section setting already does what you want.

## How do I add custom CSS to a Shopify theme?

There are three common places, and it is worth knowing the difference.

A Custom Liquid section, which is what we used, is the most surgical. It applies to the single template you add it to. That is perfect when you want a rule to affect product pages only, or one specific page only, and never the rest of the site.

Some themes also have a global Custom CSS box in their theme settings. That applies everywhere on the store. It is convenient, but it is the wrong tool when you want to limit a change to one page type, because you then have to add your own conditions to stop it leaking.

The third option is editing the theme's CSS files directly through the code editor. That is the most powerful and the easiest to get wrong, and it is not needed for a small change like this. Keep code edits for things a section cannot do.

For a targeted, page-specific tweak, the Custom Liquid section wins. It is easy to find later, easy to remove, and it cannot affect anything you did not intend.

## What to check if it did not work

- **Nothing changed on desktop.** Confirm the Custom Liquid section is on the product template, not on the home page or another template. Also confirm you clicked Save. If Save stayed greyed out, click once inside the code box, add a space and remove it, and Save should light up.
- **It changed the layout on mobile too.** You probably dropped the `@media (min-width: 768px)` wrapper, or changed the number. Keep the media query exactly as shown. It is the part that protects the phone layout.
- **Something else on the page shifted.** You may have used the short selector `.product-details` on its own. Use the scoped version, `.product-information .product-details`, so the rule stays on the main product column and does not reach quick-add popups.
- **The title now touches the top too tightly.** Change the `0` to `20px` or `30px` for a small gap. There is nothing special about zero. It is just the value that makes the column flush with the images.
- **It works in the editor preview but not on the live site.** Make sure you published the theme, or that you are viewing the same theme you edited. It is easy to edit a duplicate and then check the live one.

## Section, block, template: the words that get mixed up

Most of the confusion around product page edits comes from three words that get used loosely.

A **template** decides which sections appear on a page and in what order. Your product pages use a product template. Adding a Custom Liquid section to that template is what scopes a change to product pages, because the section only exists on that template.

A **section** is a band on the page, like the Product information area or a Custom Liquid block you add. Sections are where most layout settings live, such as Width and Padding.

A **block** is a smaller piece inside a section, like the title, the price or the variant picker inside the Product information section. Blocks are what you rearrange within a section.

And one more pair worth separating: **padding** is empty space inside a box, above or around the content, while **margin** is space outside the box, between it and its neighbours. The gap in this case was top padding on the info column, which is why zeroing the padding, rather than adding a negative margin, is the correct and predictable fix.

Once those words line up, this kind of edit stops feeling like guesswork. You find the container, you find whether the space is padding or margin, and you change it on the one template that should be affected. That is the whole method, and it works for far more than moving a product column up.


---

---
title: "How to Edit the Shopify Cart Page and Add a Message"
description: "Shopify checkout hides the shipping option when a cart holds only pickup-only products, and it never says why. You cannot edit that screen without Plus, but you can edit the cart page. Here is how to add a message there for chosen products, tested on Dawn."
---

## The problem

A merchant on the Shopify Community sells trail mix, dried fruit and chocolate from a local business in Colorado. Some of the products can only be collected in person, so the store has them set to pickup only.

When a customer's cart holds nothing but those products, checkout shows a single delivery choice: collect from the store. There is no shipping option and no sentence explaining why it is missing.

The merchant's concern was that customers assume the checkout is broken and leave. Their request was a line of text on that screen, such as "Shipping isn't available for these items", placed next to the pickup choice.

This article shows what you can do instead. It also covers how to edit the Shopify cart page, because that page is where the fix goes.

## Why checkout shows no shipping option

In Shopify, the shipping rates a customer sees come from a shipping profile. A shipping profile is a group of products plus the delivery prices that apply to them.

A pickup-only product sits in a profile that has no delivery prices at all. If every item in the cart belongs to such a profile, checkout has nothing to offer except pickup, so it shows only that. The step-by-step setup is in [how to make a product pickup only on Shopify](/blog/how-to-make-product-pickup-only-shopify).

Checkout treats this as a normal result, so it shows no warning and no explanation. That works for a shopper who chose pickup on purpose. It confuses a shopper who expected delivery.

## Can you add the message at checkout?

Not directly. The checkout page is not part of your theme, so the theme editor cannot change it.

Two routes exist, and neither suits this case:

- **Edit the wording of the pickup line.** Shopify lets you rename some checkout phrases, such as "There is 1 location with your item". The merchant had already found this. The same phrase appears in other carts too, so a note about shipping would show up where it makes no sense.
- **Add a checkout extension.** An extension is a small add-on that places your own content inside checkout. Putting one on the delivery step needs a Shopify Plus plan.

So the closest option is the last page you do control before checkout: the cart page. The customer reads the message, then clicks Check out already knowing what to expect.

## What the result looks like

This is the cart of a pickup-only product on my test store. Shopify's cart page says nothing about shipping.

![Cart page with one pickup-only product and no message](/images/blog/edit-shopify-cart-page-add-message/01-cart-before-no-message.png)

After the change, a green box explains it above the total and the Check out button.

![Cart page with a green message saying pickup only and shipping is not available](/images/blog/edit-shopify-cart-page-add-message/02-cart-after-pickup-only-message.png)

The box appears only when every item in the cart is a pickup-only product. A cart that mixes pickup-only and shippable products does not show it. I tested both: a cart with the pretzels alone showed the message, and a cart with the pretzels plus a tote bag did not.

![Cart page with two products, one pickup only, and no message](/images/blog/edit-shopify-cart-page-add-message/11-cart-mixed-no-message.png)

Mixed carts behave differently at checkout, and the pickup-only article linked above explains why. In short, a shopper in a mixed cart has to choose Pickup to buy everything in one order.

## Before you start: check your cart type

Dawn and similar themes let you pick what happens after a customer clicks Add to cart. In the theme editor, open Theme settings (the gear icon), then Cart, and look at Cart type.

![Theme settings in the editor with the Cart section open and Cart type set to Popup notification](/images/blog/edit-shopify-cart-page-add-message/12-theme-settings-cart-type.png)

There are three choices: Page, Drawer and Popup notification. Dawn ships with Popup notification. That popup has a button that goes straight to checkout, so a customer can skip the cart page and never see your message.

Set Cart type to **Page** if you want every customer to pass through the cart page. If you keep the drawer or the popup, the message below will only show to customers who open the full cart page.

## Step 1: Tag the pickup-only products

The message needs a way to tell which products are pickup only. A tag does that job. A tag is a short label you attach to a product, and the theme code can read it.

Open each pickup-only product, add the tag **pickup-only** in the Tags box, and save. Type it exactly as written, because the code looks for that spelling.

![Product page in Shopify admin with the pickup-only tag added](/images/blog/edit-shopify-cart-page-add-message/03-product-tag-pickup-only.png)

## Step 2: Open the theme editor

Go to Online Store, then click Edit theme on your current theme. The theme editor is where you change how your store looks without touching the files directly.

![Online Store themes page with the Edit theme button highlighted](/images/blog/edit-shopify-cart-page-add-message/04-online-store-edit-theme.png)

## Step 3: Switch to the Cart page

At the top of the editor there is a page list that says Home page by default. Click it and choose **Cart**.

The editor now shows your cart page. Its sections are listed on the left under Template: Items, Subtotal and Featured collection. A section is one block of a page that you can move, hide or add to.

![Theme editor page list open with Cart selected](/images/blog/edit-shopify-cart-page-add-message/05-theme-editor-pick-cart.png)

If your cart is empty, the editor shows the "Your cart is empty" version of the page. The message stays hidden there, because it only appears when the cart has items.

## Step 4: Add a Custom Liquid section

Liquid is the code Shopify themes are written in. A Custom Liquid section is a box in the theme editor where you paste a short piece of that code.

Under Template, click **Add section**.

![Cart template in the editor with the Add section button highlighted](/images/blog/edit-shopify-cart-page-add-message/06-cart-template-add-section.png)

Type Custom Liquid in the search box and click the result.

![Add section search showing Custom Liquid](/images/blog/edit-shopify-cart-page-add-message/07-search-custom-liquid.png)

## Step 5: Paste the code

Paste this into the Liquid code box:

```liquid
{%- assign pickup_only = true -%}
{%- for item in cart.items -%}
  {%- unless item.product.tags contains 'pickup-only' -%}
    {%- assign pickup_only = false -%}
  {%- endunless -%}
{%- endfor -%}
{%- if cart.item_count > 0 and pickup_only -%}
  <div class="page-width">
    <p style="border:1px solid #1f6f43;background:#eaf5ee;padding:14px 18px;border-radius:6px;margin:0;">
      <strong>Pickup only.</strong> Shipping isn't available for the items in your cart. Choose pickup at checkout.
    </p>
  </div>
{%- endif -%}
```

![Custom Liquid box with the code pasted in](/images/blog/edit-shopify-cart-page-add-message/08-paste-liquid-code.png)

Here is what the code does, in plain words:

- It starts by assuming the cart is pickup only.
- It looks at each item in the cart. If an item does not carry the tag, it changes its mind.
- If the cart has items and every one of them has the tag, it shows the green box. Otherwise it shows nothing.

## Step 6: Move the section above the total

A new section lands at the bottom of the page, below Featured collection. Drag **Custom Liquid** up in the left list until it sits between Items and Subtotal. Shopify shows a blue line where it will drop.

![Left list in the editor with Custom Liquid placed between Items and Subtotal](/images/blog/edit-shopify-cart-page-add-message/09-drag-custom-liquid-above-subtotal.png)

## Step 7: Save

Click **Save** in the top right corner. The message is live on your cart page as soon as the theme you edited is the published one.

![Theme editor with the Save button highlighted](/images/blog/edit-shopify-cart-page-add-message/10-save-theme.png)

I ran these steps on Dawn 11.0.0, the theme the merchant uses. Themes built on the same base look the same. A theme with a different layout may use other section names, but the Add section and Custom Liquid steps are the same.

## Change the wording or the colors

Edit the text between the `<strong>` and `</p>` tags to say what you like. Keep the tag name `pickup-only` the same in the product and in the code. If you rename the tag, rename it in both places.

The colors sit in the `style` line. `border` is the outline, `background` is the fill. Replace the hex values (the codes starting with `#`) with your own brand colors.

The message says "Choose pickup at checkout" because that is what the checkout offers for these items. Change that last sentence if your pickup has an extra step, such as booking a time.

## What else you can edit on the cart page

The cart page is built from the same sections as any other page, so the editor controls cover most changes:

- **Move or hide a section.** Drag a section in the left list to reorder it. The eye icon hides it without deleting it.
- **Add a section.** Any section type your theme offers, such as Rich text or Image banner, can sit on the cart page. Custom Liquid is the one to use when the content depends on what is in the cart.
- **Turn on the cart note.** In Theme settings, under Cart, the Enable cart note switch adds a box where customers can leave a message for you.
- **Change the cart type.** Page, Drawer or Popup notification, as shown earlier.

If you want a message for a different group of products, create another tag and copy the Custom Liquid section with a new tag name. Use `contains` with the tag in the code, the same way as above.

## If the message does not show

- **Check the tag.** The tag on the product must read `pickup-only`, with a hyphen and no capital letters, the same as in the code.
- **Check every item.** The message needs all items in the cart to carry the tag. One product without it hides the message by design.
- **Check the cart type.** With Popup notification or Drawer, a customer may never open the cart page. Set Cart type to Page, or tell customers to open the cart.
- **Check you saved the right theme.** The editor shows the theme name at the top. A draft theme does not change your live store until you publish it.
- **Check the section is on the Cart page.** If you added it while the page list said Home page, the message sits on the home page instead. Switch the page list to Cart and add it again.

## Cart page, cart drawer and checkout

These three get mixed up, so here is the difference:

- **Cart page** is the full page at `/cart`. Your theme controls it, and this article edits it.
- **Cart drawer** is a panel that slides in from the side after Add to cart. It belongs to the theme too, but it is a separate piece of code from the cart page, so a section on the cart page does not appear in it.
- **Checkout** is the page where the customer enters an address and pays. Shopify controls it. Only Plus stores can add their own content to the delivery step.

The merchant who asked already had a pickup note on the cart page and on the product pages. Their wish was for Shopify to add a short explanation at checkout, so this stays a request for Shopify. Until then, the cart page is the last page where you can add your own text for every plan.

## Summary

Checkout shows only the pickup choice when a cart holds nothing but pickup-only products, and it gives no reason. Without Plus, you cannot add that reason at checkout.

Tag the pickup-only products, add a Custom Liquid section to the cart page, paste the code and drag it above the total. On my test store the message showed for a pickup-only cart and stayed hidden for a cart that also held a shippable product.

Set Cart type to Page so that customers see it before they pay.


---

---
title: Remove Archived Products From a Shopify Collection in Bulk
description: Archived products stay in Shopify collections. Remove them in bulk, keep them out with a status rule, or bulk hide products by archive, draft or sales channel.
---

## The problem

A merchant asked about this on the Shopify Community, and it is a good example of a UI change breaking a workflow with nothing in the admin to flag it.

They had a collection they sort by hand. After Shopify's collections redesign, the collection view lost its status filter. Archived products still sit in the collection, still occupy numbered manual positions, and there is no longer any way to filter them out from inside the collection itself.

Their exact words: they had to click "next" roughly 400 times to reach the end of the collection and reorder products.

I reproduced it on a test store. Here is a collection where every single item is archived, and the collection view gives you nothing to hide them with.

![A Shopify collection where every product is archived, with no status filter available](/images/blog/hide-archived-products-shopify-collection/01-archived-products-in-collection.jpeg)

There is no setting for this. The new collection view has no status filter.

## Why archived products still clog the collection

Archiving a product hides it from your storefront and from the main product list in your admin. Customers cannot see it. That part works exactly as you expect.

But archiving does not remove the product from collections it already belongs to. Shopify's Help Center says it directly: archived products stay in collections and are still listed in the Collection items section of the admin, but customers cannot view them. In the admin today the Collection items count includes them, while the list itself opens with a status filter of Active, Draft, Unlisted, and Suspended, so the archived ones only appear once you add Archived to that filter. If you sort manually, each one keeps its position number. So positions 1 through 400 might be mostly products that no shopper will ever see.

That is the whole issue. The archived products are doing nothing for you except taking up slots in your manual sort order.

Once you frame it that way, the answer changes. You do not need to filter them out of the view. You need to get them out of the collection.

Nothing customer facing changes when you do. They were already hidden from shoppers.

## First, check where the collection gets its products

Everything below depends on this, so check it before you start clicking. It takes about five seconds.

Open the collection in your admin. A Shopify collection gets its products from one or more sources, and the two that matter here are:

- **Products you added by hand.** You picked each product, using Browse or Add products. This is what older guides call a **manual** collection.
- **Conditions.** A rule such as "Tag includes summer" that Shopify matches against your catalog and keeps re-checking as products change. This is an **automated** collection. In the current admin the rules sit inside a Products source on the collection page.

A collection can contain items from more than one source, so check for both. Merchants often assume theirs is manual because they remember adding products, when in fact a tag rule has been filling it for months.

That one check decides the method. Products you added by hand need Method 1, a cleanup you perform. Products that come in through a rule get Method 2, a rule that does the work for every future product too.

## Method 1: Remove them in bulk from the Products page

The collection view lost its status filter. The Products page did not. It still has both filters, and it can act on collection membership. So do the work from there instead.

### Step 1. Filter to exactly the products you want gone

Go to Products. Add a filter for Collection and pick your collection. Then add a filter for Status and pick Archived.

![Shopify Products page filtered by collection and archived status](/images/blog/hide-archived-products-shopify-collection/02-filter-collection-status-archived.jpeg)

You are now looking at precisely the archived products inside that one collection, and nothing else. Check the count before you go further. It should match roughly what you expect.

### Step 2. Select them and choose Remove from collection

Tick the checkbox in the table header row. That selects every product on the current page. If more than 50 products match your filters, open the "50 selected" drop-down and click Select all results, which selects every product that matches the filter, not only the ones on screen.

![The Select all results option in the Shopify Products list after filtering by collection and Archived status](/images/blog/hide-archived-products-shopify-collection/07-select-all-results.png)

Then open the `...` overflow menu in the bulk action bar and choose Remove from collection(s).

![The Remove from collections bulk action in the Shopify admin](/images/blog/hide-archived-products-shopify-collection/03-remove-from-collections-bulk-action.jpeg)

Shopify's Help Center notes that larger bulk changes take longer to finish, so give a big selection a minute before you check the result.

### Step 3. Pick the right collection, then Save

The dialog lists all of your collections, not just the one you filtered by. Tick only the collection you are cleaning up, then Save.

![Choosing which collection to remove the products from](/images/blog/hide-archived-products-shopify-collection/04-choose-collection-to-remove.png)

Slow down on this screen. It is the one place in this process where a mis-click costs you real work, because removing the wrong collection's products would wipe a manual sort order you may not be able to rebuild.

### The result

The archived products leave the collection, and the manual order closes up behind them and renumbers from 1 with no skipped numbers.

![The collection after removal, with manual sort order intact and renumbered](/images/blog/hide-archived-products-shopify-collection/05-collection-after-removal.jpeg)

On my test store the collection went from 7 items down to 4, renumbered 1 through 4. The sort order I had set for the remaining products was untouched. That last part is the bit people worry about, and it holds up.

## Method 2: Let a status rule keep archived products out

Method 1 is a cleanup. It fixes today's mess but does not stop the next archived product from landing in the collection.

If your collection fills itself using conditions rather than manual selection, there is a much better answer. Open the collection and, in the Products source that holds your rules, click Add condition and set it to:

- Product status
- is not equal to
- Archived

Make sure the source is set to Match all conditions. With Match any condition, a status rule adds every product with a matching status, so the collection grows instead of shrinking. Shopify's own instructions say to use Match all conditions when you filter a collection by product status.

![Adding a Status is not equal to Archived condition to a Shopify collection](/images/blog/hide-archived-products-shopify-collection/06-status-not-equal-archived-condition.jpeg)

On my test store this took a collection from 24 items to 4 the moment I saved it.

This method works differently from Method 1 because archived products never enter the collection in the first place. Anything you archive in future drops out on its own. There is no page-by-page clicking, no repeat cleanup, and the collection size does not matter. One rule handles 20 products or 20,000.

The catch is that conditions only apply to products the rule matched. Shopify states that a condition does not remove products you added by hand. If your collection has both, add the rule for the matched products and use Method 1 for the hand-added ones.

## Which one should you use

Pick based on where the products came from, not how big the collection is.

| Your situation | Use |
| --- | --- |
| Products come in through conditions, any size | Method 2, the status condition |
| Products added by hand, small collection | Method 1, bulk remove |
| Products added by hand, thousands of items | Method 1 with Select all results, or consider rebuilding it with conditions |
| A mix of both | Method 2 for the rule, then Method 1 for the hand-added products |

That third row deserves a note. The merchant who asked this came back and said they had around 23,000 archived products, all added automatically by tag. Select all results can pick up all of them in one go, but a bulk change that size takes a long time, and the next archived product would land in the collection again.

The detail that matters is "added automatically by tag." That means the collection is already rule based, so Method 2 applies.

Add the status condition alongside the existing tag condition, with Match all conditions. All 23,000 archived products drop out without any clicking through pages. The tag rule keeps working exactly as before.

If you are dealing with a big collection, check for conditions before you start clicking. They change the answer entirely.

## If removing archived products did not work

Each of these ties to one of the two methods above, with the check that rules it out.

**The count did not change after adding the condition.** Check the Match all conditions option on the Products source. On Match any condition, your status rule adds products instead of filtering them.

**Some archived products are still in the collection after Method 2.** Those were added by hand, and a condition does not remove products you added by hand. Run Method 1 on them: filter the Products page by the collection and Archived, select all, and remove them from the collection.

**Products came back later.** A condition is controlling membership. Check the collection for conditions and use Method 2.

**You cannot find the status condition.** Click Add condition inside a Products or Variants source, then pick Product status. Shopify does not offer the status condition in the Exclude section, so look for it under Add condition.

**The Products page shows fewer archived products than the collection.** Check that both filters are on, Collection and Status, and that the Collection filter names the right collection. A Status filter of Active or Draft instead of Archived gives a different count.

**Your manual order looks scrambled.** Removal renumbers to close up the empty positions, so numbers shift, but the relative order stays the same. If the actual sequence changed, check that the collection's sort is still set to Manually and not something like Best selling.

## How to bulk hide products on Shopify

If you searched for a way to hide many products at once, archiving is only one of three ways, plus a fourth option, Unlisted, covered in the table below. Each of the three hides products from your online store, and each leaves something different behind. Shopify's troubleshooting page says to check two things when a product is missing from your online store: that its status is Active and that it is available to the Online Store. Changing either one hides it.

All three start the same way. Go to Products, add filters until the list shows only the products you want hidden, tick the header checkbox, and use Select all results if more than 50 match.

### Archive them

Use this for products you have finished selling. In the bulk action menu, choose the archive option.

![The bulk action menu on the Shopify Products list with Archive products, Unlist products and Exclude from sales channels](/images/blog/hide-archived-products-shopify-collection/08-bulk-actions-menu.png)

Archived products move to the Archived tab, leave your storefront, and stay in their collections. When you unarchive one later, Shopify sets it to Draft, not Active, so you need to set it to Active again before it goes back on sale.

### Set them to Draft

Use this for products you are still preparing. Click Set as draft in the bulk action bar.

![The Set as draft button in the bulk action bar of the Shopify Products list, with several products selected](/images/blog/hide-archived-products-shopify-collection/09-set-as-draft.png)

A Draft product is not Active, so it does not show on your online store. Unlike an archived product, it does not move to the Archived tab. You find it under the Draft view of the Products list.

### Exclude them from the Online Store

Use this when the product should stay Active but leave your website, for example a product you only sell in person. In the bulk action menu, choose Exclude from sales channels, then pick Online Store. The Help Center still calls this action Make products unavailable.

![The Exclude from sales channels dialog in Shopify with the Online Store sales channel selected](/images/blog/hide-archived-products-shopify-collection/10-exclude-from-sales-channels.png)

A sales channel is a place you sell, such as your online store, a marketplace or the point of sale app. The product stays Active, keeps its status, and stays on any channel you did not pick. To find these products later, filter the Products list by Sales channel.

### Which way to hide them

| You want to | Use | Where the products end up |
| --- | --- | --- |
| Stop selling them for good, but keep the records | Archive | Archived tab, off the storefront, still in collections |
| Hide them while you finish the listing | Draft | Draft view, off the storefront |
| Keep selling them elsewhere, just not on your website | Exclude from sales channels | Still Active, off the Online Store channel |
| Keep them buyable by direct link only | Unlisted (Unlist products in the bulk menu) | Still sellable, out of collection pages and search |

Archiving does not take a product out of a collection, and Shopify does not document Draft or channel changes doing so either. If the collection's manual order is your concern, follow Method 1 or Method 2 above as well.

## Hide every product from one brand

If a brand you stocked is discontinued, hide its whole range in one pass. Shopify stores this in the product's Vendor field, which it describes as the manufacturer, wholesaler, or other vendor. If your vendor values are brand names, this works per brand.

On the Products page, add the Vendors filter and pick the brand. Add the Status filter with Active, so you only touch products that are still on sale. Select all results, then archive them or exclude them from the Online Store, as described above.

![The Shopify Products list filtered by one vendor and Active status, ready for a bulk action](/images/blog/hide-archived-products-shopify-collection/11-vendor-filter.png)

Collections built from conditions can also keep a brand out. Add a vendor condition set to is not equal to and the brand name, with Match all conditions. Every product from that vendor that the rules matched drops out, including products you add to your catalog later. Products you added to the collection by hand stay, so remove those with Method 1.

## How to remove a product from a Shopify collection, archived or not

Everything above works for any product, not just archived ones. If you landed here because you simply want a product out of a collection, the route depends on how it got there.

For a product you **added by hand**, open the collection, hover over the product in the Collection items section, click the x next to it, and click Save. Shopify's Help Center confirms that removing an item takes it out of the collection without deleting the product from your store. For several at once, use the Products page method in Step 1 to Step 3 above and skip the Status filter. Filter by Collection only, tick the products you want gone, then use Remove from collection(s).

For a product that came in **through a condition**, Shopify documents the x only for products you added by hand. Either change the rule so it stops matching, or change the product so it no longer qualifies. A Products source also has an Exclude section that keeps products out by category, tag, type or vendor (for example, tag the product and exclude that tag) without changing the include rule.

That distinction matters more than it looks. If a product keeps reappearing in a collection, check the collection for conditions that match it.

For more on the rule side, see [how to build smart collections from extra fields you add to your products](/blog/shopify-smart-collections-metafields). To move a product to the front instead of removing it, see [how to pin a product to the top of a Shopify collection](/blog/shopify-pin-product-to-top-of-collection).

## How to remove or hide a whole collection

Sometimes the collection itself is the thing to go. You have two options, and only one of them is permanent.

**Delete it.** Go to Products > Collections, open the collection, click the trash can icon at the top of the page, then confirm the delete. Shopify removes it permanently, and it also removes links to it from your online store menus. You can delete several collections at once with a bulk action from the collections list.

![The trash can icon at the top of a Shopify collection page, which deletes the collection](/images/blog/hide-archived-products-shopify-collection/12-delete-collection-menu.png)

**Hide it from your store.** Open the collection, click Channels, clear Online Store in the Sales channels drop-down, and click Save. The collection stays in your admin and you can turn it back on later.

Hiding a collection does not hide the products in it. Shopify notes that changing a collection's availability does not change the availability of the products inside it, so each product keeps its own setting.

## What happens when you archive a product on Shopify

Shopify's Help Center describes four effects:

- The product moves to the Archived tab of the Products page, so it disappears from the main product list
- It is hidden from your storefront
- It stays in every collection it already belonged to, listed under Collection items, but customers cannot view it there
- If you unarchive it, its status is set to Draft, not back to Active

The third point is the behaviour this whole article exists for. Archiving is about sales visibility, not collection membership, and merchants reasonably expect it to handle both.

You can still find an archived product at any time by opening the Archived view of the Products page or by filtering Status to Archived.

### Archive vs delete

Archiving is reversible and deleting is not. Shopify states that a deleted product is permanently removed and cannot be restored.

**Archive** when you might sell it again, or when you need the product's details for reference. You can unarchive it at any time and set it to Active, and the product's details are still there.

**Delete** only when the product was a mistake, like a duplicate or a test entry.

For seasonal stock, archive. For a product you accidentally created twice, delete. When in doubt, archive, because you can always delete later but you cannot undo a delete.

## Archived, draft, and unlisted are not the same thing

Merchants mix these up often, and it matters here because each status changes where a product shows up.

**Active** is a product that is ready to sell and visible on the channels you have made it available to.

**Draft** is a product you are still working on. It is not Active, so it does not show on your online store, and you find it under the Draft view of the Products list.

**Archived** is a product you are finished selling. Shopify hides it from your storefront and moves it out of your main product list, which is why it feels deleted when it is not.

**Unlisted** is narrower. The product can still be sold and reached by direct link, but it does not appear in collection pages, search results or product recommendations, and Shopify removes it from your sitemap. For more on that, see [how to keep products out of Shopify search results](/blog/shopify-hide-product-from-search).

So if your collection looks cluttered, archived products may not be your only problem. When you run the Method 1 filter, try Status set to Draft as well as Archived, and remove any drafts you find the same way. When you build the Method 2 rule, you can add a second condition, Product status is not equal to Draft, the same way.

Unlisted suits merchants who want a product to stay buyable but stop cluttering their storefront. It is worth knowing about before you reach for archive out of habit.

## One last thing worth asking

Before you clean up thousands of archived products, ask whether they need to stay archived.

Archived is meant for products you are done selling. If you are archiving seasonal stock you plan to bring back next year, the Method 2 rule handles that on its own. Products drop out of the collection while archived. When you unarchive them they come back as Draft. Draft is not Archived, so they rejoin the collection straight away, but shoppers do not see them until you set them to Active. If you also added Product status is not equal to Draft, they return only once they are Active. You never touch the collection.

That is the real advantage of solving this with a rule instead of a cleanup. A cleanup fixes the collection once. A rule keeps it correct while your catalog changes underneath it.

## Frequently asked questions

### Does archiving a product remove it from a Shopify collection?

No. Archived products stay in their collections and are listed under Collection items in the admin, but customers cannot view them. To take them out, remove them from the Products page (Method 1) or add a Product status is not equal to Archived condition (Method 2).

### How do I bulk hide products on Shopify?

Filter the Products list, tick the header checkbox, and use Select all results if more than 50 match. Then archive them, click Set as draft, choose Exclude from sales channels and pick Online Store, or use Unlist products.

### What happens when you archive a product on Shopify?

It moves to the Archived tab, it is hidden from your storefront, and it stays in its collections. It is not deleted. If you unarchive it, Shopify sets it to Draft, so set it to Active to sell it again.

### How do I filter archived products out of a collection?

The new collection view has no status filter. Filter the Products page by Collection and by Status set to Archived instead, then use Remove from collection(s). For a collection built from conditions, add Product status is not equal to Archived with Match all conditions.

### Why did my status condition not remove archived products?

Either the source is set to Match any condition, which adds products instead of filtering them, or the archived products were added by hand. A condition does not remove products you added by hand, so remove those with Method 1.

### How do I remove a collection in Shopify?

Open the collection, click the trash can icon at the top of the page, then confirm the delete. Deleting is permanent. To keep the collection but hide it, click Channels and clear Online Store instead.


---

---
title: How to Add Custom CSS in Shopify (Beginner Guide)
description: Custom CSS lets you fix small design problems in Shopify without touching theme code. Here is where to paste it, how to target the right element, and a real worked example that aligns two image banner boxes.
---

## The problem

A merchant asked this on the Shopify Community. Their homepage had two image boxes side by side, a cat box and a dog box. The left box sat lower than the right one, and they wanted the tops to line up. They were a beginner and asked for the CSS to fix it.

That is one of the most common reasons people reach for custom CSS. The theme is 95% right, one small thing is off, and you do not want to hire a developer or edit theme code for a single rule.

This guide shows how to add custom CSS in Shopify the safe way, using that exact alignment problem as the worked example. The store in the screenshots runs the Vitazen theme, but the steps are the same on Dawn, Horizon, and almost every modern theme.

![Two image boxes on a Shopify homepage, the left box sitting lower than the right](/images/blog/how-to-add-custom-css-in-shopify/01-before-image-boxes-misaligned.jpeg)

## What custom CSS is, in plain words

CSS is the language that controls how your store looks. Spacing, colors, sizes, alignment, all of it.

Your theme already ships with thousands of lines of CSS. Custom CSS is a small block of your own that you add on top. It overrides the theme for one specific thing, without changing any theme files.

Two things make it safe for a beginner:

- It lives in its own box, separate from theme code. You cannot break a template by editing it.
- It is easy to undo. Delete the block, click Save, and you are back to normal.

That is the whole idea. You are not rewriting the theme. You are adding one polite instruction that says "for this element, use my value instead."

## Where to add custom CSS in Shopify

Shopify gives you two places to paste custom CSS. Picking the right one matters, so here they are side by side.

**Per section (the one you want most of the time).** Every section in the theme editor has its own Custom CSS box at the bottom of its settings. CSS you paste there only affects that one section. This is the cleanest option, because it keeps your change scoped and easy to find later.

**Whole theme.** In the theme editor, open Theme settings, then find the Custom CSS box (some themes label it App embeds or Advanced). CSS here applies to every page of your store. Use this only when the change really is site-wide, like a font tweak that should appear everywhere.

For the image box problem, and for most small fixes, the per-section box is the right choice. That is what the steps below use.

## How to add custom CSS to a Shopify section, step by step

Here is the exact process. It took under a minute on the test store.

### 1. Open the theme editor

From your admin, go to **Online Store**, then **Themes**, then **Customize** on your live theme.

### 2. Click the section you want to change

In the preview, click the section that holds the problem. In this example it is the Image banner with the cat and dog images. Clicking it opens that section's settings in the left panel.

### 3. Scroll to the Custom CSS box

Scroll to the bottom of the section's settings. You will see a box labelled **Custom CSS**. It even tells you "Adds custom styles to this section only," which is your confirmation that the change stays scoped.

### 4. Paste your CSS and Save

Paste your rule into the box and click **Save**. That is it. The change is live.

For the two misaligned boxes, the rule was:

```
.banner--image-space-true .grid__item:first-child {
  margin-top: 0 !important;
}
```

![The Custom CSS box inside a section's settings in the Shopify theme editor](/images/blog/how-to-add-custom-css-in-shopify/02-paste-custom-css-into-section.png)

The theme was deliberately dropping the first box down with a top margin to create a staggered look. The rule sets that margin back to zero, so both boxes start on the same line.

![The same two boxes now aligned, both starting on the same line](/images/blog/how-to-add-custom-css-in-shopify/03-after-image-boxes-aligned.jpeg)

## How to find the right thing to target

The hardest part of custom CSS is not writing it. It is knowing which element to point at. Here is the beginner method.

- Open your storefront in Chrome.
- Right-click the element you want to change and choose **Inspect**.
- The panel that opens highlights the element and shows its `class` names.
- Read the styles on the right. The value causing your problem is usually there, often with the file and line it came from.

In the image box example, inspecting the low box showed a `margin-top` of `8rem` on the first `.grid__item`. That single value was the whole problem. Once you can see the value in Inspect, your custom CSS just needs to override it.

You do not have to memorise CSS. You need to find the one property that is wrong and set it to the value you want.

## Section CSS vs theme CSS: which to use

This trips people up, so here it is plainly.

**Section Custom CSS** only affects the section you pasted it into. If you have three image banners and only want to fix one, this keeps the other two untouched. It is the safer default.

**Theme Custom CSS** affects the whole store. It is right for global changes, but risky for one-off fixes, because a broad selector can accidentally hit other pages.

A good rule: start with the section box. Move up to theme-wide only when you genuinely need the change everywhere.

## Does custom CSS apply to products you add later?

Yes. This is the question that arrives once your rule is working: you have styled one product page, and next week you add ten more products. You do not have to open the theme editor ten more times, and the reason is where Shopify puts the code.

The Custom CSS box is not attached to the product you happened to have open in the preview. It is saved into the **template** that the page is built from. A template is the reusable layout a page type uses: one file that decides which sections appear, in what order, with which settings. Every theme ships with one called **Default product**, and unless you deliberately change it, every product in your catalogue is drawn by that same template.

Paste a rule into a product section's Custom CSS box and you have edited the template, not the product. Products you create afterwards are drawn by the same template, so they arrive with the styling already on them.

Here is a product created after the CSS was saved, with the theme editor never reopened in between. The size label and the value are already uppercase and the dropdown already has its blue focus ring.

![A newly created Shopify product page already showing the custom styling, with an uppercase size label and a blue ring on the dropdown](/images/blog/how-to-add-custom-css-in-shopify/04-new-product-styling-applied.png)

Deleting a product does not touch the code either. The rule lives in the template, so removing one of the pages that uses it leaves it exactly where it was.

### The one case where it does not carry over

There is a single exception, and it is easy to check.

Shopify lets you build more than one product template. Shops do this when a few products need a different page shape, such as a bundle that needs extra sections or a made-to-order item with its own form. Each template is a separate file with its own settings, which means each one has its own Custom CSS box.

If you assign a product to one of those other templates, it is no longer drawn by the template holding your rule, so the styling will not appear on it.

To check which template a product uses, open the product in your admin and look at the right hand column, near the bottom. The card is labelled **Theme template**. On a normal product it reads **Default product**.

![The Theme template card on a Shopify product page in the admin, set to Default product](/images/blog/how-to-add-custom-css-in-shopify/05-theme-template-default-product.png)

Leave it on Default product and there is nothing more to do. If you do need a second template, open that template once in the theme editor and paste the same CSS into its own Custom CSS box. That is once per template, which is usually once or twice in the life of a shop, rather than once per product.

### What does remove it

Two things, and neither happens by accident.

- **You edit or clear the box yourself.** The rule stays until you change it.
- **You switch to a different theme.** The code is stored inside the theme, not inside your store, so a brand new theme starts with an empty box. Duplicating your current theme is different: the copy carries every template across, Custom CSS included, which is why duplicating before a big change is the usual advice.

That is also the answer to "is custom CSS permanent?". It is as permanent as the theme it sits in. It survives new products, deleted products, product edits, and normal theme editor work. It does not survive being replaced by a different theme.

## When to use !important

You will see `!important` in a lot of Shopify CSS answers, including the one above. Here is what it does and when to reach for it.

Your theme's own rule and your custom rule can have the same strength. When that happens, the theme can win and your change does nothing. Adding `!important` forces your value to take priority.

Use it when a plain rule has no effect even though the selector is correct. Do not sprinkle it everywhere by default, because once everything is `!important`, nothing is, and future overrides get harder. For a single scoped fix like the alignment one, it is fine and often needed.

## What to check if your custom CSS is not working

If you pasted a rule and nothing changed, run through these in order. One of them is almost always the cause.

- **Wrong selector.** The class you targeted is not the one on the element. Re-check it in Inspect. Class names are case sensitive, so `Banner` and `banner` are different.
- **The theme is winning.** Your rule is being overridden. Add `!important` to the property, or make the selector more specific.
- **You edited the wrong section box.** Section CSS only affects that section. If you pasted it into a different section, it will not reach the element.
- **You did not Save.** The theme editor needs an explicit Save. If the button stayed greyed out, click into the box, add a space, delete it, then Save.
- **Browser cache.** You saved, but your phone or browser is showing the old version. Reload, or check in a private window.

## Common Shopify custom CSS snippets

Once you know where the box is, a lot of small requests become one-liners. Here are a few that come up constantly. Always confirm the class names on your own theme with Inspect first.

Hide an element on mobile only:

```
@media (max-width: 749px) {
  .your-element { display: none !important; }
}
```

Center a heading:

```
.your-heading { text-align: center; }
```

Add space above a section:

```
.your-section { margin-top: 40px; }
```

Make a button full width:

```
.your-button { width: 100%; }
```

These are starting points, not copy-paste magic. Swap `.your-element` for the real class you find in Inspect, paste into the section box, and Save.

## Custom CSS vs editing theme code

People often ask whether they should just edit the theme code instead. For small visual fixes, custom CSS is the better tool, and here is why.

Editing theme code means opening the code editor and changing `.liquid` or `.css` files. It is powerful, but a theme update can overwrite your change, and a typo can break a template. Custom CSS in the section box survives normal theme edits and cannot break a template, because it is additive.

Reach for theme code when you need new markup or logic that CSS cannot express. For spacing, alignment, colors, sizes, and visibility, custom CSS is faster and safer.

## The no-code alternative

Before you write any CSS, it is worth checking the section's own settings. Many staggered or offset layouts, like the image box example, come from a toggle in the section itself.

In that example, the Image banner had an image-offset option turned on. Turning it off aligns the boxes with no code at all. So the order to work in is: check the section settings first, and only add custom CSS if there is no setting for what you want.

## The short version

- Custom CSS is a small block of your own styles that overrides the theme without touching theme files.
- The best place for most fixes is the section's own Custom CSS box, at the bottom of its settings in the theme editor.
- Use Inspect in Chrome to find the exact class and the value that is wrong.
- Add `!important` only when a correct rule is being overridden.
- Check the section's built-in settings first, since a toggle often does the job with no code.

That is how to add custom CSS in Shopify safely. One scoped rule, pasted in the right box, fixed two misaligned image boxes in under a minute, and the same approach handles most of the small design problems a theme leaves behind.


---

---
title: How to Create a Blog on Shopify (Beginner Guide)
description: Yes, you can run a blog or content site on Shopify. Here is how to create a blog, add posts, turn categories into blogs, keep your old URLs, and get recipe rich results. Beginner steps with screenshots.
---

## The problem

A merchant asked this on the Shopify Community, and it is a fair question if you only know Shopify as a store builder.

They run a recipe site on custom code. They want to move it to Shopify for features they cannot build themselves. But everything they read says Shopify is for ecommerce. So they asked the obvious thing: can you actually make a blog site on Shopify, or is it stores only?

The short answer is yes. Shopify has a full blog built in, and plenty of content and recipe sites run on it without a single product listed.

Here is their live site. It is a clean recipe blog with posts and categories like Baking, Salads, Muffins, and Pastries.

![A custom-coded recipe site with posts and categories, the kind that moves to Shopify well](/images/blog/how-to-create-a-blog-on-shopify/01-recipe-site-before.png)

That structure maps onto Shopify almost one to one. This guide walks through it, using a recipe site as the example, but the steps are the same for any blog.

## Yes, Shopify can be a blog or content site

You do not need a plugin, an app, or a theme change to blog on Shopify. The blog is part of every plan.

What you get out of the box:

- Unlimited blog posts and multiple blogs
- A clean editor with images, formatting, and video
- Categories, tags, and an author for each post
- A built-in SEO listing so each post has its own Google title and description
- Fast hosting and good mobile performance without any setup

The one thing to know upfront: in Shopify, the word "blog" does not mean the whole blog area. It means one category. Each blog holds a group of posts. You can have as many blogs as you want. More on that in step 3, because it trips up almost every beginner.

## How to create a blog on Shopify, step by step

I set this up on a test store so the screenshots match what you will see. It took a few minutes.

### 1. Find the blog

In your Shopify admin, go to **Content** in the left menu, then **Blog posts**. Every post you write lives here.

There is nothing to install. It is already switched on.

![The Content > Blog posts screen, where every post lives, with Manage blogs and Add blog post at the top right](/images/blog/how-to-create-a-blog-on-shopify/02-blog-posts-list.png)

The two buttons to remember are top right. **Add blog post** writes a new post. **Manage blogs** is where your categories live.

### 2. Write your first post

Click **Add blog post**. You get a title field, a content box, and an image panel.

- Type the title, for example "Easy Lemonade Scones".
- Write the post in the content box. It handles headings, bold, links, lists, and images, so a recipe with ingredients and steps formats cleanly.
- Add a **featured image**. This is the photo that shows on the blog and on the post card.
- Fill in the **Excerpt**. This is the short summary that appears under the title on your blog index.

![The Add blog post editor with a title, recipe content, and the featured image panel](/images/blog/how-to-create-a-blog-on-shopify/03-add-blog-post.png)

That is one recipe done. Everything else on this screen is optional polish.

### 3. Turn your categories into blogs

This is the step people get stuck on, so read it slowly.

In Shopify, each category is its own **blog**. A recipe site with Baking, Salads, and Pastries needs three blogs, one per category.

On the post editor, look at the **Blog** menu on the right. Open it and choose **Create a new blog**. Name it after the category, for example Baking. Repeat for each category you need.

![The Blog menu on a post open, showing the Create a new blog option](/images/blog/how-to-create-a-blog-on-shopify/04-create-blog-category.png)

For finer sorting inside a category, use **Tags**. On a Baking post you might tag "gluten-free" or "30-minute". Tags let visitors filter within a blog, while blogs are the top-level categories. Between blogs and tags you can build the full category and filter structure a recipe site needs.

### 4. Publish the post and set the SEO listing

A new post starts hidden. To make it live, set **Visibility** to **Visible** and click **Save**.

While you are on this screen, scroll to **Search engine listing** and fill it in. This is the exact title and description Google shows in results. Writing it yourself, instead of letting Shopify guess, is one of the easiest SEO wins there is.

![Visibility set to Visible and the Search engine listing preview filled in](/images/blog/how-to-create-a-blog-on-shopify/05-visible-seo-listing.png)

Once it is Visible and saved, the post is live on your storefront at a URL like `/blogs/baking/easy-lemonade-scones`.

### 5. Add the blog to your menu

A published post is not much use if readers cannot find it. Add the blog to your navigation.

Go to **Content**, then **Menus**, then open your **Main menu**. Click **Add menu item**, name it something like "Recipes", and set the **Link** to **Blogs**. Pick the blog you want it to point at, or link a single blog per category.

![Adding a menu item and setting its link to a blog so visitors can find it](/images/blog/how-to-create-a-blog-on-shopify/06-add-blog-to-menu.png)

Save, and your recipes now show in the top navigation, right where visitors expect them.

### 6. Keep your old URLs when you move over

If you are moving from custom code or another platform, this step protects the traffic you already have.

Go to **Content**, then **Menus**, then **URL redirects**. For each old address on your current site, add a redirect that points it at the matching new Shopify URL.

Do this and visitors who click an old link, and Google's index, land on the right new page instead of a dead end. Your rankings carry over instead of resetting to zero.

## Blogs vs tags: how to organize a recipe site

Because the naming is odd, here is the plain-English version.

A **blog** is a category. Baking is a blog. Salads is a blog. Each one has its own page that lists the posts inside it.

A **tag** is a label inside a category. "Vegan", "quick", and "kid-friendly" are tags. One post can carry several tags, and visitors use them to narrow a category down.

A **post** is a single recipe.

So the shape of a recipe site on Shopify is: a handful of blogs for your main categories, tags for the cross-cutting filters, and a post per recipe. That covers almost every content site, not just recipes.

## Moving from custom code or WordPress

Two things make the move painless.

**Bulk import.** You do not have to retype years of posts. You can import your existing posts and images in one batch, so the content moves over intact.

**Redirects.** Covered in step 6. The reason it matters so much is that a content site's value is its existing Google rankings. Redirects hand that value to the new pages instead of throwing it away.

If your current site is on WordPress, the same two ideas apply. Export the posts, import them into Shopify, then redirect the old permalinks.

## Recipe rich results: the stars and cook time in Google

If you run a recipe site, you have seen the Google results with a photo, a star rating, a cook time, and a calorie count. That is recipe rich results, and it comes from structured data on the page.

Shopify's plain blog does not output recipe structured data by default. To get it you have two routes:

- A **recipe app** that adds a proper recipe card with ingredients, steps, and the schema behind them.
- **Theme metafields** plus a small block of custom code, if you or a developer want to build it into the theme.

For most recipe sites, an app is the faster path and gives you the printable card and the rich-result markup together.

## Shopify blog vs WordPress for a content site

This is the question most people ask next, so here is the honest version.

WordPress is more flexible for pure blogging, with a bigger plugin ecosystem aimed at content. If your entire business is content and you will never sell anything, WordPress is a reasonable pick.

Shopify wins when you might sell later. You get a fast, hosted, secure site with a real blog now, and the option to add products, digital downloads, or ads without moving platforms again. For a recipe creator who might sell an ebook, a meal plan, or merch one day, that matters. Moving platforms twice is the expensive path.

## Shopify blog examples

Plenty of brands run their blog on Shopify as a genuine content channel, not an afterthought. Recipe creators, coffee roasters, and skincare brands all use the built-in blog for guides, stories, and how-tos that pull in search traffic and feed their email lists. The blog is a first-class part of the platform, so there is no ceiling on treating it seriously.

## What to check if your blog is not showing

If a post does not appear on your storefront, run through these in order.

- **Visibility.** The post must be set to Visible, not Hidden. A saved but hidden post will not show.
- **The right blog.** Confirm the post is in the blog you are looking at. A post in "News" will not appear on the "Baking" page.
- **The menu link.** If visitors cannot find it, the blog is probably not in your navigation yet. See step 5.
- **The URL.** Blog URLs follow the pattern `/blogs/<blog-handle>/<post-handle>`. If you linked the wrong handle, the page will not load.

## Blog, blog post, and page: the words Shopify uses

Three terms get mixed up, so here they are side by side.

A **blog** is a category that holds posts, like Baking.

A **blog post** is one article inside a blog, like a single recipe. It is dated and shows in the blog feed.

A **page** is a standalone, undated document like About or Contact. It is not part of any blog and does not appear in the feed.

For a recipe site you will use blogs and blog posts for the recipes, and a few pages for About, Contact, and your policies.

That is the whole picture. Shopify absolutely works as a blog or content site, the blog is built in on every plan, and a recipe site with categories and tags fits it naturally.


---

---
title: How to Import Reviews to Shopify for Free
description: You can import a supplier or manufacturer's existing product reviews into Shopify for free, label them honestly, and keep them apart from your own. Here is the exact route, plus the Google-stars problem most guides skip.
---

## The problem

A merchant asked this on the Shopify Community. They sell a lot of products through Shopify Collective and dropshipping. In many cases the manufacturer already has hundreds of real reviews for the exact same product, while that product starts at zero reviews on their own store.

They wanted an app that could pull those reviews over, label them clearly as coming from the manufacturer, and keep them separate from reviews left by their own customers. Ideally for free.

It is a fair thing to want. A product page with zero reviews converts worse than the same page with fifty. When the reviews already exist and are genuine, starting from zero feels like throwing away social proof you are entitled to use.

So here is how to import reviews to Shopify the honest way, what is free, and the one catch that can get your store in trouble with Google before you notice.

## The short answer first

Two things are true, and you need both before you start.

- You can import existing reviews into Shopify for free. A CSV import into a review app does it, and it does not cost anything on the plans most stores already have.
- No app can safely and reliably keep scraping a manufacturer's website and syncing new reviews forever. That part does not really exist, and the tools that claim it are fragile.

So the realistic setup is a one-time import you control, not a live feed. Once you accept that, the rest is straightforward.

## Decide two things before you pick a tool

I see people install three apps and give up before they answer these. Answer them first.

**One-time import or ongoing sync?** Most review apps import a structured file just fine. Almost none can safely watch a supplier's own site and pull new reviews on a schedule. If you truly need ongoing sync, that is a custom job, not an off-the-shelf app. For most stores, a one-time import of the reviews that exist today is enough.

**Should the imported reviews feed your star rating?** This is the one almost every guide skips, and it matters more than which app you choose. More on it below, but decide early, because it changes the whole approach.

![How importing manufacturer reviews into Shopify actually works, as a flow](/images/blog/how-to-import-reviews-to-shopify/01-import-reviews-flow.png)

## The free way to import reviews into Shopify

Most stores already run a review app. When I looked at the merchant who asked this, their store was already on Judge.me. So the first move is usually not installing anything new. It is using the importer in the app you already have.

Judge.me is the common one, it has a generous free plan, and its Import Wizard is included. The steps are the same idea in Loox, Yotpo, or Stamped if you use one of those instead.

Here is the flow in Judge.me:

- Open the app and go to the import area, then choose Import Wizard.
- Upload your file. CSV is safest. Judge.me also accepts .xls and .xlsx, up to 100 MB per file.
- Map the columns. You match the headers in your file to Judge.me's fields using dropdowns: rating, review title, review body, reviewer name, date, and photo URLs.
- Confirm and import.

One rule trips up most imports: you cannot import a review that is only a star rating. Every row needs review text in the body, or that row is skipped. So a bare "4 stars, no comment" export will not come through.

![Mapping a CSV of supplier reviews to Judge.me's review fields](/images/blog/how-to-import-reviews-to-shopify/02-csv-to-judgeme-mapping.png)

## Getting the reviews out of the manufacturer's site

The import is the easy half. The reviews have to come from somewhere first, and this is where you protect yourself.

Do not scrape. Ask instead. Contact the manufacturer or supplier and ask two questions:

- Which review platform do you use?
- Can you send an authorized export of the reviews for the products we carry?

Most review platforms can export a CSV. If the supplier is on Yotpo, Okendo, Stamped, or similar, that export is a normal thing for them to hand over. You then map that file in the step above.

If they say no, stop there. A scraper that copies reviews from a site without permission raises consent and terms questions, even when the product is identical to yours. It also breaks the moment they redesign their page. An authorized export is the only version of this that is safe and stable.

## If the same product is also on AliExpress, Amazon, or eBay

This is the common dropshipping case, and it has better tooling. If the exact item is also listed on a marketplace, you can import those reviews by product URL.

- Opinew imports reviews from Amazon, AliExpress, and eBay, and it fits dropshipping stores well.
- Ryviu imports from AliExpress, Amazon, Etsy, and a few others. Its free tier covers AliExpress through a browser extension, with paid tiers for the rest.

The limit is important: these tools pull from those marketplaces, not from a manufacturer's own custom website. So they solve the AliExpress-reviews-to-Shopify case cleanly, and they do nothing for a supplier who only sells on their own site. For that supplier, you are back to the authorized CSV route above.

## Label them honestly, and keep them separate

The merchant who asked this was clear that they did not want to pass manufacturer reviews off as their own. Good. Here is how to disclose the source and keep the two sets distinct.

There is no built-in "sourced from manufacturer" badge in Judge.me. So you create the label yourself, two easy ways:

- Put the source in the reviewer name column of your CSV, like "Jane D. (via BrandName)". It then shows on every imported review.
- Or add a short first line to each review body, like "Originally posted on BrandName's site."

Keeping them separate is partly automatic. Reviews you import by CSV do not get Judge.me's "Verified buyer" badge, because there is no order behind them. Reviews your own customers leave after buying do get it. So your real reviews carry a badge the imported ones never will, which is a clean visual line between the two.

That verified-badge difference only holds for CSV imports. Migrations straight from Loox, Yotpo, or Stamped can carry verification across, so if you go that route, the line blurs.

## The Google-stars problem almost every guide skips

This is the part worth reading twice.

Most Shopify review apps write the star rating that shows up in Google search results, the little row of stars under a product. The app builds that number from every published review in its database. That includes the manufacturer reviews you just imported.

So the moment you import them, syndicated reviews become part of your store's Google star rating. That is a different and bigger claim than a labeled line on the page saying where a review came from. And Judge.me, like most apps, cannot exclude just one source from that rating. It is all reviews or none.

![Imported manufacturer reviews get folded into your storefront's Google star rating](/images/blog/how-to-import-reviews-to-shopify/03-syndicated-reviews-google-stars.png)

Decide whether you are comfortable with that. If you are, importing into your review app is fine. If you are not, do not put the manufacturer reviews in the review app at all. Use the no-app method below instead, which keeps them off your star rating entirely.

## The no-app alternative

If you want the social proof without touching your star rating or any app, there is a clean version.

- Create a product metafield that holds a short summary of what buyers said on the manufacturer's site.
- Show it on the product page as a labeled, collapsible row, something like "What buyers said on BrandName."

You lose star sorting and filtering, and you lose the review count. But you keep the social proof, there is nothing to sync or scrape, and it never touches the star rating Google reads. For a store that cares about staying clean on the rich-snippet side, this is often the better trade.

## What to check if the import did not work

If you ran the import and the reviews did not show up, work through these.

- **Rows with no text.** Rating-only rows are skipped. Every review needs body text.
- **Product mapping.** The file has to point each review at the right product, usually by handle or by SKU. A wrong or blank product column sends reviews nowhere.
- **Date format.** If dates come in blank or wrong, the column mapping missed the date field, or the format is one the importer did not read.
- **Widget not placed.** The reviews imported fine but your theme is not showing the reviews widget on the product page. That is a theme placement issue, not an import one.
- **Still processing.** Large imports take a few minutes. Give it time before assuming it failed.

## Quick answers to related questions

**Can you import AliExpress reviews to Shopify for free?** Yes, with limits. Ryviu's free tier imports AliExpress reviews through a browser extension. Opinew also imports from AliExpress. Both pull from the marketplace listing, not from a supplier's own website.

**Does Judge.me import reviews for free?** Yes. The Import Wizard and CSV import are available on the free plan. You map your file's columns to Judge.me's fields. Reviews need body text, not just a star rating.

**Can you automatically sync a supplier's reviews?** Not reliably from a custom supplier website. Marketplace importers can refresh reviews from Amazon or AliExpress listings, but there is no safe, off-the-shelf way to keep syncing a manufacturer's own site. Treat it as a one-time import.

**Will imported reviews hurt my SEO?** Not by themselves, but they do get folded into the star rating Google shows, so they change what that rating represents. If that concerns you, keep them out of the review app and use the metafield method.

## The short version

- You can import existing manufacturer or supplier reviews into Shopify for free with a CSV import into a review app like Judge.me. The Import Wizard is on the free plan.
- Get the reviews as an authorized export from the supplier. Do not scrape, it is fragile and raises consent issues.
- If the item is also on AliExpress, Amazon, or eBay, Opinew or Ryviu can import from those listings by URL.
- Label the source in the reviewer name or the review body. Imported reviews stay unverified, which keeps them visually distinct from your own.
- Watch the Google stars. Imported reviews join your storefront's star rating, and most apps cannot exclude them. If that matters, use a labeled metafield block instead of the review app.

That is the whole picture. The import itself is free and takes minutes. The care goes into where the reviews come from, how you label them, and whether you want them counting toward the stars Google shows.


---

---
title: "How to Make a Product Pickup Only on Shopify"
description: "Some products should never be shipped, only picked up in store. Shopify has no product-level 'no shipping' checkbox, but you can get the same result with one custom shipping profile. Here is the exact setup, what the customer sees at checkout, and the one catch with mixed carts. Tested with screenshots."
---

## The problem

A merchant asked this on the Shopify Community: they wanted to mark certain products as in-store pickup only, so those items can be bought on the storefront but can never be added to a shippable order. Think of a florist's fresh bouquets, a bakery's cakes, a heavy item, or anything too fragile or too local to post.

They were looking for a simple switch on the product page. Something like a "no shipping" checkbox you tick per product.

Shopify does not have that checkbox. There is no product-level control that says "this item is pickup only."

But you can get exactly that behaviour with one setting change, and it takes about five minutes. I built it on a test store and ran real checkouts through it, so this is what actually happens, not just the theory.

## Why there is no "no shipping" checkbox

Here is the part that trips people up, and it is worth understanding before you touch anything.

In Shopify, shipping is not set on the product. It is set on a shipping profile. A shipping profile is a group of products plus the shipping rates that apply to them. Every store starts with one profile, called the General profile, and by default every product lives in it.

So a product does not carry its own "can this ship" flag. It inherits shipping from whatever profile it sits in. That is why there is no per-product switch: the setting lives one level up, on the profile.

Once you see it that way, the fix is obvious. You make a second profile that has no shipping rates at all, and you move your pickup-only products into it. A product in a profile with no rates cannot be shipped anywhere, because there is no rate for the checkout to charge. If local pickup is switched on, that product can still be bought, just for pickup only.

That is the whole idea. Now here are the steps.

## Step 1: Turn on Pickup in store

Local pickup has to be on first, otherwise your pickup-only products cannot be bought at all.

- Go to Settings, then Shipping and delivery.
- Scroll to Pickup in store and open it.
- Choose the location customers will collect from, turn pickup on, and Save.

![Pickup in store enabled for the store location](/images/blog/how-to-make-product-pickup-only-shopify/01-pickup-in-store-enabled.png)

Make sure the pickup location is the store where customers actually collect, and that it has a real address. On my test store, a location with no street address did not show up as a pickup option at checkout, so fill the address in.

## Step 2: Create a shipping profile with no rates

This is the part that replaces the missing checkbox.

- In Settings, then Shipping and delivery, find Shipping profiles.
- Click Add custom profile.
- Give it a name only you will see, for example "Pickup only".
- Add your pickup-only products to it.
- Do not add any shipping rates. Leave that section empty.
- Save.

![Add a custom profile in Shipping and delivery](/images/blog/how-to-make-product-pickup-only-shopify/02-add-custom-shipping-profile.png)

When you save, Shopify shows a yellow "No shipping rates" warning that says customers will not be able to complete checkout for products in this profile. On a normal profile that warning is a problem. Here it is exactly what you want. No rates is the point. It is what stops these products from ever being shipped.

![Custom profile with No shipping rates and one product](/images/blog/how-to-make-product-pickup-only-shopify/03-profile-no-shipping-rates.png)

That is the closest thing to a per-product "no shipping" switch that Shopify has today. The products in this profile can now only be bought for pickup.

## What the customer sees

I added a pickup-only product to a cart and went to checkout. The Delivery section did not offer shipping at all. It only offered Pickup in store, at the location I turned on, for free.

![Checkout shows only Pickup in store, with no shipping option](/images/blog/how-to-make-product-pickup-only-shopify/04-checkout-pickup-only.png)

So a cart that contains only pickup-only items behaves perfectly. There is no shipping method, no address form for delivery, just the pickup location. The customer picks it up, exactly as intended.

## The one catch: mixed carts

This is the part every short answer skips, and it is the thing most likely to confuse your customers, so test it yourself.

What happens when a shopper puts a pickup-only item and a normal shippable item in the same cart?

I tried it. With the delivery method set to Ship, checkout showed "Shipping not available" for the whole order. It could not ship, because one of the items has no shipping rate, and Shopify will not ship part of an order and hold the rest for pickup.

![Mixed cart set to Ship shows Shipping not available](/images/blog/how-to-make-product-pickup-only-shopify/05-mixed-cart-shipping-not-available.png)

I checked this with split shipping turned on, which is the newer Shopify setting that can split an order across locations. It did not change the outcome. Split shipping splits shipments across your locations, but it will not turn one order into "ship this item and pick up that one."

There is a way through, though. If the shopper switches the delivery method to Pickup, the whole order goes through, as long as your shippable items are also in stock at the pickup location.

![Mixed cart set to Pickup goes through for the whole order](/images/blog/how-to-make-product-pickup-only-shopify/06-mixed-cart-pickup-works.png)

So the practical guidance is simple. Add a short line to your pickup-only product pages so no shopper gets stuck:

"In-store pickup only. Please order pickup items separately from shipped items."

That one sentence saves a lot of confused checkout attempts.

## How do I set up local pickup on Shopify?

If you have never used it, local pickup is a built-in Shopify feature, free on every plan. You turn it on per location under Settings, then Shipping and delivery, then Pickup in store. You pick which of your locations offer collection, set how long orders usually take to be ready, and write a short "ready for pickup" message.

Once it is on, pickup appears as a delivery choice at checkout for products that are in stock at a pickup location. For a store that only does pickup, that is all you need. For a store that ships most things but wants a few items to be pickup only, you combine it with the no-rates profile above.

## Can I turn off shipping for just one product?

Not with a single toggle on the product, no. The no-rates profile is how you do it. Add that one product to a custom profile with no shipping rates, and it becomes pickup only while every other product keeps shipping as normal.

The reason is the same one from earlier. Shipping is a profile setting, not a product setting. So "turn off shipping for one product" really means "put that one product in a profile that has no shipping."

## Can a customer pick up one item and ship another in the same order?

No, not in a single order. This surprises people, so it is worth saying plainly. A Shopify order has one delivery method for the whole order. It is either shipped or picked up, not a mix.

That is why a mixed cart forces the choice. The customer either picks up everything, or they place two separate orders, one for the pickup items and one for the shipped items. There is no native way to split a single order into part-ship and part-pickup.

## Do I need an app for pickup only?

For the setup above, no. It is all native Shopify settings and costs nothing.

You only need an app if you want more than "pickup only." Two common reasons:

First, a hard block. The setup above stops pickup-only items from being shipped, but it does not stop a customer from adding a pickup-only item to a cart that also has shippable items and then hitting the "Shipping not available" wall. If you want to actively prevent that combination, that needs a checkout validation. You can do it for free with a Shopify Function, which a developer sets up once with no monthly fee, or with a cart and checkout validation app.

Second, pickup scheduling. If you want customers to choose a pickup date and time slot, that is not native. Apps like Zapiet - Pickup + Delivery or Store Pickup + Delivery (Amai) add date and time pickers and are popular with florists, bakeries, and food shops.

## What to check if it did not work

- **The pickup-only product cannot be bought at all.** Check that Pickup in store is turned on for a location, and that the product is in stock at that location. A product with no rates and no pickup has no way to be sold.
- **Pickup does not appear at checkout.** The pickup location needs a real, complete address. A location with only a country and no street will not show as a pickup point.
- **The product still shows a shipping option.** Confirm the product is actually inside the no-rates profile, not still in the General profile. A product can only be in one profile at a time.
- **A mixed cart shows "Shipping not available."** That is expected. Tell the customer to choose Pickup, or to order the pickup item separately. Add the note to the product page.
- **The product is hidden from the storefront.** Making it pickup only does not unpublish it. If it is missing, check that it is published to the Online Store channel and set to Active.

## Shipping profile, local pickup, local delivery: the words that get mixed up

These three get confused, and the confusion is behind most pickup questions.

A **shipping profile** is a group of products plus their shipping rates. It decides how, and whether, products get shipped. A profile with no rates is what makes a product pickup only.

**Local pickup** is the customer collecting the order from your store or location themselves. There is no delivery. It is free to the customer unless you set it otherwise.

**Local delivery** is you, or a driver, dropping the order at the customer's address within a set radius. It is a delivery, just not a courier. It is a separate setting from pickup, with its own rates and zones.

Once those three line up, pickup-only products stop feeling like a missing feature. You are not looking for a checkbox that does not exist. You are putting the product in a profile with no rates, turning on pickup, and letting checkout do the rest.


---

---
title: Is t.shopifyemail.com or shopifyemail.com Legit or a Scam?
description: Yes, t.shopifyemail.com and g.shopifyemail.com belong to Shopify, and the store+ number identifies the shop. Three checks verify who sent the email.
---

## The problem

You bought something. The confirmation landed in your inbox. Then you looked at the sender and it said something like this:

```
store+86183936294@t.shopifyemail.com
```

No shop name. No brand. A random-looking number bolted onto the word "store". It looks exactly like the kind of address a scammer would generate.

A buyer posted almost that exact question on the Shopify Community in July 2026, and the same question shows up there several times a month in English, French, German ("ist t.shopifyemail.com seriös?") and Italian. So it is worth answering properly rather than with "yes it is fine".

## Is t.shopifyemail.com or g.shopifyemail.com a scam?

The addresses themselves are not a scam: both belong to Shopify. When a store has not set up email on its own domain, Shopify sends that store's emails from `shopifyemail.com` instead. Its Help Center says the sender email is "rewritten to store+123@shopifyemail.com" and that "the string of numbers (123) ... is unique to your store". The `t.` and `g.` versions are subdomains of that same Shopify domain.

The word `store` at the start is the same for every shop. Searches for `store@t.shopifyemail.com` or `store@g.shopifyemail.com` are usually about an address like `store+86183936294@t.shopifyemail.com`, and the digits after the plus sign are what tell one shop from another.

Shopify's Help Center and developer docs do not say what `t.` and `g.` are each used for. The public DNS records (the internet's address book, which anyone can query) showed this on 14 October 2026:

- `t.shopifyemail.com` and `g.shopifyemail.com` are subdomains of `shopifyemail.com`, which the domain registry lists as registered to Shopify Inc., and opening either one in a browser redirects to shopify.com.
- Both have a `mailer.` subdomain wired to the same SendGrid mail server (SendGrid is an email delivery service) as `mailer.shopifyemail.com`, the "mailed-by" name in the Gmail screenshot further down.
- `shopifyemail.com` publishes a DMARC policy of `p=reject`, and neither subdomain has a policy of its own, so the same rule covers them. DMARC is a public request to receiving mail servers: here it asks them to refuse mail that shows these addresses in the From line but cannot prove Shopify allowed it to be sent.

Shopify also runs a marketing email app called Shopify Email. Its Help Center says that if a store has not authenticated its own domain, "Shopify sends your emails from a fully authenticated shopifyemail.com subdomain". So a shop's newsletter can also come from a shopifyemail.com address, not only its order emails.

So the address is not the scam. The two open questions are whether the email really came through Shopify, and whether the shop behind it will deliver. A fake email can type any address into the From line, and a real Shopify email can come from a shop that never ships. The three checks below answer both: the first two prove the email came from the shop you paid, and the third shows who runs that shop.

## What that address actually is

Every Shopify store has a sender email set under Settings, then Notifications. The merchant types in the address they want customer emails to come from.

The catch is that Gmail, Yahoo, Outlook and other free providers publish DMARC policies that forbid other services from sending as them. Shopify cannot send as `someshop@gmail.com` without those emails landing in spam. So it does not try.

Instead it substitutes its own address and puts the merchant's real one in the reply-to field. Shopify says so directly in the admin:

![The Shopify admin explaining that customers will see store+number@shopifyemail.com as the sender](/images/blog/is-shopifyemail-com-legit/01-shopify-sender-email-setting.jpeg)

"Public domains like Gmail don't support custom sending. Customers will see your email as store+68540465329@shopifyemail.com."

That is a screenshot of my own test store's admin. Which brings us to the interesting part.

## Those digits are the store's Shopify shop ID

The number is not random and it is not a tracking code. It is the store's Shopify shop ID, the internal numeric ID Shopify assigns to every shop.

I verified this rather than assuming it. I sent myself an order confirmation from a store I control. The sender was:

```
store+68540465329@t.shopifyemail.com
```

That store's shop ID is 68540465329. Every Shopify storefront prints its own shop ID in the page source, inside the analytics config, as `"shopId":68540465329`.

Then I checked it against a store I have nothing to do with. Back in 2025 someone on the Shopify Community posted about an order email from `store+61122347259@t.shopifyemail.com` and named the shop it came from. I pulled that shop's homepage today. Its page source reads `"shopId":61122347259`. Same number, an unrelated store, a year apart.

So the digits identify the exact Shopify account that sent the mail. That is a lot more useful than "the domain is legit".

## How to prove the email came from the shop you paid

You do not need to view page source for this. Your own email already contains the second copy of the number.

Open the confirmation and look at where the "View your order" button points. Do not click it yet, just hover it or long-press to copy the link. A real Shopify order status URL looks like this:

```
https://theshop.com/68540465329/orders/<token>/authenticate?key=<key>
```

That first path segment is the shop ID again. So you have two things to compare, both sitting in the same email:

1. The digits in the sender address.
2. The digits at the start of the order status link.

They must match. And the domain in that link must be the site you actually typed your card into. If someone builds a convincing fake order email, getting both of those to line up with a real store is not something they can fake casually.

If the numbers disagree, or the link goes to a domain you have never seen, treat the email as hostile and do not click anything in it.

## The From line can be faked. The signature cannot.

This is the check the reassuring forum answers usually skip, and it is the one that actually decides the question.

Anyone can put `store+86183936294@t.shopifyemail.com` in the From header. The From header is just text. It is not authenticated by anything on its own.

What cannot be forged is the DKIM signature. DKIM signs the message with a private key held by the sending service, and the receiving mail server checks it against a public key published in DNS. No key, no pass.

In Gmail: open the email, click the three-dot menu, choose **Show original**. You get this.

![Gmail Show original showing SPF PASS, DKIM PASS with domain shopifyemail.com, and DMARC PASS](/images/blog/is-shopifyemail-com-legit/02-show-original-spf-dkim-dmarc.png)

That is the real order confirmation from my test store. The three lines that matter:

- **SPF: PASS** means the server that sent it is allowed to send for that domain.
- **DKIM: 'PASS' with domain shopifyemail.com** means the message carries a valid signature from Shopify's email infrastructure.
- **DMARC: PASS** means the authenticated domain lines up with the visible From address.

A phishing copy that simply types the same address into the From line fails DKIM. It cannot do anything else, because it does not have Shopify's signing key.

On Outlook the equivalent is View, then View message source, and you look for the `Authentication-Results` header. On Apple Mail it is View, Message, All Headers.

If DKIM fails or is missing on an email claiming to be an order confirmation, stop there.

## Find out who the merchant actually is

The third check takes about five seconds and tells you something the shop's own website often hides.

In Gmail, click the small arrow under the sender name. The details panel opens:

![The Gmail details panel showing reply-to, mailed-by and Signed by for a Shopify order email](/images/blog/is-shopifyemail-com-legit/03-gmail-reply-to-details.png)

Note the `reply-to` line. Because Shopify had to replace the sender address, it puts the merchant's real address there instead. So this line reveals the human behind the shop.

That matters. In a long Shopify Community thread from 2024, someone posted an order confirmation from `store+57924911166@t.shopifyemail.com` asking whether it was a scam. The reply-to on that email was `fastingfast2@gmail.com`, and the body invited them to contact the same free Gmail address.

The shopifyemail.com domain was not the red flag in that thread. The reply-to was.

A real brand with a warehouse and a support team almost always has support@ their own domain. A dropshipper who spun up a store last Tuesday has a Gmail. Neither is proof by itself, but combined with the rest it tells you a lot.

## What the address does not prove

All three checks have a limit. They prove the email is real. They prove which Shopify account sent it. They prove nothing about whether the parcel will arrive.

Shopify is a platform. It does not vet merchants, it does not vouch for them, and having a Shopify checkout is not a quality signal. Anyone with a card and 20 minutes can open a store.

The Shopify Community has plenty of threads where all of this was true and the buyer still got nothing. One person in 2025 posted about a real, well-known consumer electronics brand and received an empty box. Another posted about a store that later went offline completely. In a French thread from July 2026, a buyer was charged three times for one order.

So the email being real and the shop being trustworthy are two separate questions. Answer the first with the checks above. Answer the second with the ones below.

## Checking the shop itself

Once you know which Shopify account sent the email, you can do something useful with it.

**Compare it to the official store.** In the thread that prompted this article, the buyer had ordered a band's new album from a French site. The band's own store is on Shopify and its shop ID is 73158885695. The label's European shop is a different Shopify store with ID 22808743. The buyer's email said 86183936294, which is neither. That does not make the shop a scam, but it does mean the band's own customer service cannot help, and it is worth knowing before you wait six weeks.

**Check the domain age.** Look the domain up on a WHOIS service. A store registered three weeks ago running heavy ads on a hyped product is the single most common pattern in these threads.

**Check the legal page.** In the EU this is not optional. A French site must publish mentions légales with a company name, address and SIREN number. You can put that SIREN into the French government's own company directory at annuaire-entreprises.data.gouv.fr and see whether the company exists. No legal page, or a number that returns nothing, and you have your answer.

**Look for a real phone number and a physical address.** Then search the brand name plus the word "reviews" and skip the first page of results, which is usually affiliate content.

## Why your own store's emails say shopifyemail.com

If you found this page as a merchant rather than a buyer, the fix is straightforward and worth doing.

Go to Settings, then Notifications, then Sender email, the field in the screenshot near the top. Enter an address on a domain you own, such as `orders@yourbrand.com`. Shopify will then ask you to authenticate the domain by adding CNAME records at your DNS provider.

Once those records verify, your customer emails go out from your own address instead of `store+<shop id>@shopifyemail.com`. If you bought your domain through Shopify, the records are added for you.

This is worth ten minutes of your time. Every thread linked in this article exists because a customer could not tell whether an order email was real. A branded sender address removes that doubt, and it measurably helps deliverability too, since receiving servers trust a consistent authenticated domain more than a shared one.

Note that the reply-to substitution goes away as well, so support replies land where you expect them. If you are changing what the email says as well, see [how to edit the Shopify order confirmation email](/blog/shopify-edit-order-confirmation-email).

## The lookalike problem

One last thing, because it is where people actually get caught.

`shopifyemail.com`, `t.shopifyemail.com` and `g.shopifyemail.com` are Shopify's real domains. `mailer.shopifyemail.com` appears as the "mailed-by" value and is also real.

What is not real is any of the near misses. Look carefully at the characters. A domain like `shopify-email.com`, `shopifyemails.com` or `t-shopifyemail.com` is not where Shopify sends store emails from. Phishing kits lean on exactly this, because the eye reads the shape of a word rather than its letters.

This is also why the DKIM check beats reading the address. You are not asked to judge a string of characters at a glance. The mail server does the comparison for you and prints the answer.

Real Shopify emails about your Shopify account, as opposed to a store's order emails, come from `shopify.com` addresses. Shopify will never ask for your password by email.

## Quick checklist

If you are staring at one of these emails right now:

1. Open Show original. Confirm DKIM says PASS with domain shopifyemail.com.
2. Compare the digits in the sender address to the digits at the start of the order status link.
3. Confirm that link's domain is the site you actually bought from.
4. Check the reply-to address in the details panel and judge it.
5. Look up the shop's domain age and its legal or contact page.
6. Keep the confirmation and the invoice.

If the parcel never turns up, the confirmation email is your evidence. Card issuers accept "goods not received" disputes, commonly up to 120 days from the date delivery was expected, and PayPal's buyer protection window is 180 days. Check your own provider's terms, because the windows vary.

Shopify will not refund you, since it is not the seller. It does take reports about merchants at its report an issue page, which is worth filing so the store gets looked at.

Three checks, about a minute, and you will know a great deal more than "the domain looks weird".


---

---
title: How to Make Shopify Banner and Slideshow Images Clickable
description: Shopify only makes the button on a banner clickable, not the image. Here are two tested ways to fix that, for Horizon and for Dawn, plus the CSS rules that defeat the usual advice with no error to explain it.
---

## The problem: your banner looks clickable, but only the button is

You upload a hero image to your Shopify homepage. It fills the screen. It looks like a giant button.

Then a customer clicks the middle of it and nothing happens.

Only the small **Shop now** button actually goes anywhere. The image around it is decoration.

A merchant asked about exactly this on the Shopify Community. They wanted their slide images to link to a page on their site and could not find the setting.

There is no setting. That is the whole problem.

I reproduced it on a test store and worked out two fixes. One takes about thirty seconds and no code. The other makes the entire image clickable and needs one small theme edit.

I also hit two things that break the usual advice you will find in other threads. Both are covered below, because if you do not know about them the code looks correct and simply does nothing.

## Why Shopify does not ship this

This is a deliberate choice, not an oversight.

Shopify's banner and slideshow sections give you a **Button** block with a link field. They do not give you a link field for the image itself.

The reasoning is accessibility. A screen reader announcing a link needs text to read out. A button labelled "Shop winter coats" is meaningful. A giant image wrapped in an empty link announces as "link" with nothing after it, which is useless to anyone not looking at the screen.

So the default is the accessible option. That is defensible.

But it is also true that customers click images. If your banner reads like a call to action, people will click the picture, not hunt for the button. Making the image clickable is a real conversion improvement, as long as you keep an accessible label on the link. Both methods below do that.

## First, check which section you actually have

This matters, because the fix differs and people mix these up constantly.

Open **Online Store > Themes > Customize** and click the section on your homepage. The panel on the left names it:

![The theme editor section list naming the Image banner section](/images/blog/make-shopify-banner-slideshow-clickable/11-customize-section-list.png)

- **Image banner** is one static image. One picture, no arrows, no rotation.
- **Slideshow** rotates through several slides. Each slide is a separate block inside it.

They are different sections with different files. If you follow slideshow instructions on an image banner, nothing will happen and you will assume the code is wrong.

The rest of this guide covers both.

## If you already tried this and the image got huge

This is the most common failed attempt, and it looks nothing like a CSS problem.

You find an older snippet that says to wrap the banner image in a link, like this:

```liquid
<a href="/collections/all">
  {{ section.settings.image | image_url: width: 3840 | image_tag }}
</a>
```

You save it. The link works. The image is now enormous, the crop is wrong, and the banner no longer fills its row.

Nothing is broken in your code. The theme sizes that image with a **direct child** rule in `base.css`:

```css
.media > *:not(.zoom):not(.deferred-media__poster-button) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
```

`>` means direct child only. Slipping an `<a>` in between makes the link the direct child instead of the image. The link gets the absolute full-size treatment, and the image inside it falls back to its own pixel dimensions.

On a Craft test store I measured it: the banner photo went from 560px tall to 1233px, its natural height, the moment the wrapper went in.

![A Craft image banner after the image was wrapped in a link, no longer filling the row](/images/blog/make-shopify-banner-slideshow-clickable/07-craft-banner-image-blown-up.jpeg)

The fix is not to force the size back with more CSS. It is to stop wrapping the image at all. Every method below puts a separate link **over** the image and leaves the image markup untouched, so the theme keeps sizing it.

## Method 1: add a button block to the slide (no code)

Do this one first. It works on every modern theme, it survives theme updates, and it takes under a minute.

The trade-off is that the button is clickable, not the whole image.

**Step 1.** Go to **Online Store > Themes**, then **Customize**.

**Step 2.** In the left panel click **Slideshow**, then click an individual **Slide**.

**Step 3.** Click **Add block**, then choose **Button**.

![Click your Slide, then Add block, then Button](/images/blog/make-shopify-banner-slideshow-clickable/01-add-button-block-to-slide.jpeg)

**Step 4.** Click the new **Button** and paste the page you want into the **Link** box.

**Step 5.** Click **Save**.

![Paste your page into the Link box](/images/blog/make-shopify-banner-slideshow-clickable/02-paste-page-into-link-box.jpeg)

That is it. If a visible button is acceptable, stop here. Nothing below is necessary, and this method cannot break when your theme updates.

## Method 2: make the whole image clickable (one code edit)

If you want the entire image to be a link, you need to add a stretched, empty link on top of it.

The idea is simple. You place an `<a>` element over the image, size it to cover the whole slide, and let the existing button sit above it so both still work.

The execution is where people get stuck, because two separate CSS rules in the free themes defeat it, with nothing on screen to say why. Both are covered under [the two rules that break this on Dawn](#the-two-rules-that-break-this-on-dawn-with-no-error), and the code below already handles them.

### Back up your theme first

Non-negotiable. You are editing a theme file.

Go to **Online Store > Themes**, click the **...** button on your theme, and choose **Duplicate**. That copy is your rollback.

Then open the **...** menu again and click **Edit code**.

![Duplicate first, then Edit code](/images/blog/make-shopify-banner-slideshow-clickable/03-duplicate-then-edit-code.png)

### On the Horizon theme

Horizon builds slides from a block file rather than a section file.

In the file list on the left, open the **blocks** folder and click **_slide.liquid**. That is one of the files your theme is built from, written in Liquid, the templating language Shopify themes use.

![Open blocks then _slide.liquid](/images/blog/make-shopify-banner-slideshow-clickable/04-open-blocks-slide-liquid.jpeg)

First, give the customizer a link field. Find `"id": "video_1"`. Scroll down a few lines to the `},` that closes it, and paste this on the next line:

```json
{
  "type": "url",
  "id": "slide_link",
  "label": "Slide link"
},
```

Next, add the link itself. Find `{% content_for 'blocks' %}`. Below it are two `</div>` lines, then a line saying `{% endcapture %}`. Paste this in between:

```liquid
{%- if block_settings.slide_link != blank -%}
  <a
    class="slide__link"
    href="{{ block_settings.slide_link }}"
    aria-label="{{ block_settings.image_1.alt | default: 'View more' | escape }}"
  ></a>
{%- endif -%}
```

Then the styling. Find `{% stylesheet %}` and paste this right below it:

```css
.slide__link {
  position: absolute;
  inset: 0;
  z-index: var(--layer-flat);
}

slideshow-slide:has(.slide__link) .slide__content {
  pointer-events: none;
  z-index: var(--layer-raised);
}

slideshow-slide:has(.slide__link) .slide__content :is(a, button, summary, label, input) {
  pointer-events: auto;
}

slideshow-slide[aria-hidden='true'] .slide__link {
  pointer-events: none;
}
```

Click **Save**.

Go back to **Customize** and click a **Slide**. There is now a **Slide link** box. Pick your page and save.

![The new Slide link box in the customizer](/images/blog/make-shopify-banner-slideshow-clickable/05-slide-link-box-in-customizer.jpeg)

The whole image is clickable now.

![The whole slide is clickable](/images/blog/make-shopify-banner-slideshow-clickable/06-whole-slide-clickable.jpeg)

That last rule matters more than it looks. A slideshow keeps its off-screen slides in the DOM. Without `slideshow-slide[aria-hidden='true'] .slide__link { pointer-events: none; }` a hidden slide's link can sit over the visible one and send people to the wrong page.

### On the Dawn theme

Dawn is the theme most people are actually on, and it is easier, because **you do not need to add a link field at all.**

Dawn's slide block already has a `url` setting. It is the one powering the button. You can reuse it, which means one edit instead of two.

For the **Slideshow** section, open `sections/slideshow.liquid`. Find the `</div>` that closes `slideshow__media`, and add the link right after it:

```liquid
{%- if block.settings.link != blank -%}
  <a
    class="slide__link"
    href="{{ block.settings.link }}"
    aria-label="{{ block.settings.heading | strip_html | default: 'View more' | escape }}"
  ></a>
{%- endif -%}
```

For the **Image banner** section, open `sections/image-banner.liquid`. The banner's link lives on a `buttons` block rather than on the section, so you have to look it up first. Paste this just above the `<div class="banner__content ...">` line:

```liquid
{%- liquid
  assign banner_link = blank
  assign banner_link_label = blank
  for block in section.blocks
    if block.type == 'buttons' and block.settings.button_link_1 != blank
      assign banner_link = block.settings.button_link_1
      assign banner_link_label = block.settings.button_label_1
    endif
  endfor
-%}
{%- if banner_link != blank -%}
  <a
    class="banner__link"
    href="{{ banner_link }}"
    aria-label="{{ banner_link_label | default: 'View more' | escape }}"
  ></a>
{%- endif -%}
```

That detail is easy to miss. `section.settings.link_1` does not exist on Dawn's image banner. The setting is `button_link_1` and it is on a block.

Then the CSS, inside the existing `{%- style -%}` block near the top of the file:

```css
#Banner-{{ section.id }} .banner__link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
}

#Banner-{{ section.id }}:has(.banner__link)::after {
  pointer-events: none;
}

#Banner-{{ section.id }}:has(.banner__link) .banner__content {
  pointer-events: none;
}

#Banner-{{ section.id }}:has(.banner__link) .banner__content :is(a, button) {
  pointer-events: auto;
}
```

### On the Craft theme

Craft is built on Dawn, so the Dawn instructions above work as written. Two things differ in practice.

The first is that Craft's **Image banner** has no link setting of its own to borrow. If you want the banner clickable *instead of* using a button, rather than as well as, give the section its own setting so the link survives deleting the button block.

Open `sections/image-banner.liquid` from **Online Store > Themes > ... > Edit code**.

![Edit code, then the sections folder and image-banner.liquid](/images/blog/make-shopify-banner-slideshow-clickable/08-craft-edit-code-image-banner-liquid.jpeg)

Find this line, roughly 120 lines down:

```liquid
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width
```

Paste this block directly above it:

```liquid
{%- if section.settings.banner_link != blank -%}
  {%- style -%}
    #Banner-{{ section.id }} .banner__link {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }
    #Banner-{{ section.id }} .banner__content {
      pointer-events: none;
    }
    #Banner-{{ section.id }} .banner__box a,
    #Banner-{{ section.id }} .banner__box button {
      pointer-events: auto;
    }
  {%- endstyle -%}
  <a
    href="{{ section.settings.banner_link }}"
    class="banner__link"
    aria-label="{{ section.settings.banner_link_label | default: section.settings.banner_link | escape }}"
  ></a>
{%- endif -%}
```

Then scroll to `{% schema %}` and paste these two settings straight after the `image_2` block:

```json
{
  "type": "url",
  "id": "banner_link",
  "label": "Banner link"
},
{
  "type": "text",
  "id": "banner_link_label",
  "label": "Banner link description",
  "info": "Read out by screen readers.",
  "default": "Shop the collection"
},
```

Save, then open **Customize > Image banner**. The new field is there.

![The new Banner link field in the Craft theme editor](/images/blog/make-shopify-banner-slideshow-clickable/09-craft-banner-link-setting.jpeg)

Leave it empty and the section behaves exactly as it did before, which makes this safe to add and forget.

![The whole Craft banner is one link, and the image is the same size as before](/images/blog/make-shopify-banner-slideshow-clickable/10-craft-whole-banner-clickable.jpeg)

The second difference is the z-index. Craft's tint layer sits at `z-index: 1`, and a link at `z-index: 1` loses to it because the tint is painted later, so the clicks land on the tint. `z-index: 2` is doing real work in that snippet, not padding.

I checked the result by hit-testing the corners, the area behind the heading and the button itself. Every point over the image returns the banner link, the button still returns the button, and the photo measured the same before and after.

## The two rules that break this on Dawn, with no error

This is the part missing from every other answer I have seen, and it cost me two rounds of debugging on a live test store.

**1. Dawn hides empty links.** Dawn's `base.css` contains this:

```css
a:empty, ul:empty, div:empty, section:empty, p:empty { display: none; }
```

Your stretched link is an empty `<a></a>`. So Dawn hides it. The element is in the HTML, the CSS looks right, and it measures zero by zero pixels.

That is why `display: block` is in the rule above. Without it nothing happens and there is no error to tell you why.

**2. The image overlay eats the click.** Both sections have a decorative dark overlay drawn as `::after`, sitting at `inset: 0` with `z-index: 1`.

If your link is also `z-index: 1`, the overlay is painted later and wins. Clicks land on the overlay instead of your link.

Two things fix it, and the code above does both: put the link at `z-index: 2`, and set `pointer-events: none` on the overlay so it stops intercepting.

I confirmed the result by hit-testing points across the banner in the browser. Every point over the image returns the link, and the button centre still returns the button. Both work, which is exactly what you want.

## Which method should you use

| | Button block | Whole image clickable |
| --- | --- | --- |
| Code required | None | One file edit |
| Survives theme updates | Yes | No, re-apply after updating |
| Clickable area | The button only | The entire image |
| Accessibility | Best, real link text | Fine with an `aria-label` |
| Time | Under a minute | Ten to fifteen minutes |

Use the button block if a visible button suits the design. It is the better answer for most stores, because it survives every theme update and needs no code.

Use the whole-image method when the banner is the call to action and a button would clutter it, or when you already know customers are clicking the image and bouncing.

You can also do both. Keep the button for clarity and make the image clickable for shoppers who do not aim carefully. The code above is written for exactly that, which is why the button stays clickable on top of the stretched link.

## Does this hurt SEO or accessibility

Not if you keep the `aria-label`.

An empty link with no label is a real accessibility failure. Screen readers announce "link" and stop. Automated audits like Lighthouse flag it as *Links do not have a discernible name*.

Every snippet above sets `aria-label` from something meaningful: the image alt text on Horizon, the heading or the button label on Dawn. Set those properly in the customizer and the label follows automatically.

For SEO it makes no real difference. It is an internal link to a page already in your navigation. It will not help rankings and it will not hurt them.

## If it did not work, check these

**Nothing appears to change.** Confirm you edited the right section. Image banner and Slideshow are separate files, and the block and section names differ between themes.

**The link is there but not clickable.** This is nearly always the `z-index` and overlay problem above. Right-click the banner, choose Inspect, and see which element is on top at that point.

**The link measures zero pixels.** That is the `a:empty` rule. Add `display: block`.

**The button stopped working.** Your link is covering it. Keep `pointer-events: auto` on links and buttons inside the content box.

**Clicking a slide opens the wrong page.** Off-screen slides are still in the DOM. Add the `aria-hidden='true'` rule so hidden slides stop receiving clicks.

**It broke after a theme update.** Expected. Theme updates replace section files. Re-apply the edit, or move to the button method if you update often.

## One thing worth checking afterwards

Once the banner is clickable, look at where it actually sends people.

A hero image linking to a broad collection with two hundred products is a weak destination. Sending that traffic to a focused collection, a specific product, or a page matching the promise in the banner artwork usually converts better than the catch-all.

The click is the easy part. The destination is what earns the sale.


---

---
title: "Shopify Button Hover Color: Remove the Grey"
description: On Shopify Horizon, buttons turn grey on hover and the grey sticks after a tap on mobile. Horizon has no setting for it. Here is the CSS that keeps your button colour on hover, and how to scope it so it does not break the checkout button.
---

## The problem, in the words a merchant would use

A merchant asked about this on the Shopify Community. Their buttons looked fine until someone clicked or tapped them. Then a grey wash appeared over the button. On a phone the grey stayed on the button until they tapped somewhere else on the page.

It looked worst on secondary buttons and custom buttons, but it showed up on the main buttons too.

Their store runs the **Horizon** theme. This is Shopify's newer free theme, and it behaves differently from Dawn, so the old Dawn fixes people paste in do not always work here.

I reproduced it on a Horizon test store. Here is the grey appearing on hover.

![Horizon buttons turning grey on hover](/images/blog/remove-grey-button-hover-shopify-horizon/01-horizon-buttons-grey-hover.jpeg)

If you searched for something like "shopify button hover color", "shopify button turns grey", or "remove hover effect on button Shopify", this is the same issue. The fix below keeps the button the same colour on hover, so nothing changes when a visitor points at it or taps it.

## Why Horizon turns your button grey

This is the part the quick answers skip, and it is the reason the fix works.

Horizon has no colour picker for the hover state. You cannot go into the theme settings and set a hover colour. There is no such setting.

Instead, Horizon builds the hover colour for you. It takes your normal button colour and shifts it automatically to create a "hover" version. For a dark button, that automatic shift lightens the colour. A dark button becomes a lighter, washed out grey the moment you hover it.

So the grey is not a bug and it is not an overlay you can simply hide. It is the hover colour Horizon calculated from your button colour.

Horizon does this with **CSS variables**. A CSS variable is just a named value the theme reuses in many places, written like `--button-background-color`. On hover, Horizon points those button variables at its auto-derived hover colours. That is the whole mechanism.

Once you know that, the fix is obvious. You do not need to fight the grey with heavy overrides. You just tell the button to use its **normal** colours on hover as well. If the hover colour equals the normal colour, nothing changes on hover, and the grey never appears.

## Why the grey "sticks" after a tap on mobile

The merchant described it as happening "on click", not on hover. That wording is a clue.

On a desktop with a mouse, hover is a real, live state. You point at the button, it goes grey, you move away, the grey clears. Annoying, but it comes and goes.

On a phone there is no mouse and no real hover. When you tap a button, the browser fakes a hover state for that tap. But nothing moves away afterwards, so the faked hover stays applied. The button holds the grey until you tap a different element and the browser moves the hover somewhere else.

So on mobile the grey looks like it triggers on click and then gets stuck. It is the same hover colour as on desktop. It just has no natural way to clear on a touch screen.

This is why the fix matters more on mobile. Removing the hover colour change removes the stuck grey at the same time.

## The fix: keep the button colour on hover

Add a small piece of CSS to your theme. It sets the hover colours equal to the normal colours, so the button does not change when hovered or tapped.

**The code**

```css
.button:hover,
.button-custom:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-background-color: var(--color-primary-button-background);
  --button-color: var(--color-primary-button-text);
  --button-border-color: var(--color-primary-button-border);
}
.button-secondary:hover {
  --button-background-color: var(--color-secondary-button-background);
  --button-color: var(--color-secondary-button-text);
  --button-border-color: var(--color-secondary-button-border);
}
```

Read that in plain terms. On hover, set the button background, text, and border back to your primary button colours. The secondary button block does the same with your secondary button colours. Because these are your real theme colours, the button looks identical before and after hover.

Notice it names the payment button on purpose. That is the checkout button. Naming it here, with its own primary colours, is what keeps the checkout button safe. More on that in the failure-mode section below, because it is exactly where the merchant first hit trouble.

**Where to put it**

- Go to **Online Store > Themes**.
- Click the **...** menu next to Horizon, then **Edit code**.
- Open **assets/base.css**.
- Paste the code at the very bottom of the file, then click **Save**.

![Edit code, then open assets base.css and paste at the bottom](/images/blog/remove-grey-button-hover-shopify-horizon/02-edit-code-base-css.jpeg)

That covers the Add to cart button, secondary buttons, and custom buttons. After you save, the grey is gone and nothing sticks after a tap.

![Buttons keep their colour after the fix, no grey on hover](/images/blog/remove-grey-button-hover-shopify-horizon/03-buttons-keep-colour.jpeg)

I tested this on a Horizon store. The buttons hold their colour on hover on desktop, and on mobile the grey no longer sticks after a tap.

## Want a hover colour instead of none?

Removing the change is one option. Some merchants do want a hover effect, just not the auto grey. You can pick your own.

Change the background line in the first block to any colour you like. For example:

```css
--button-background-color: #5c0f14;
```

Now the button turns that exact colour on hover instead of the grey Horizon would have chosen. You are in control of the hover colour, which is the setting Horizon does not give you in the editor.

Do the same in the secondary block if you want secondary buttons to have their own hover colour.

## What to check if the checkout button looks off

This is the failure mode the merchant actually hit, so it is worth its own section.

A common first attempt is a broad rule like this:

```css
.button:hover {
  background-color: transparent;
}
```

That looks tidy, but `.button:hover` matches **every** button on the store. The checkout button on the cart is also a button. So this broad rule strips the checkout button's background too, and the checkout button suddenly looks wrong. That is exactly what happened here. The grey went away, but the checkout button at the cart no longer looked right.

The lesson is to **scope your CSS**. Do not blanket every button. Target the buttons you mean, and give the payment button back its own colours rather than blanking it.

Two ways to stay safe:

- Use the code in the fix above. It names the payment button and restores its primary colours, so checkout stays correct.
- Or, if you only want to touch secondary and custom buttons, target just those and leave `.button` alone entirely:

```css
.button-secondary:hover,
.button-custom:hover {
  --button-background-color: var(--color-secondary-button-background);
  --button-color: var(--color-secondary-button-text);
  --button-border-color: var(--color-secondary-button-border);
}
```

If the grey is only bothering you on one specific button, scope to that button. Right-click it, choose **Inspect**, read the class on the button, and use that class instead of `.button`. A narrow selector never breaks checkout.

## How do I change button color in Shopify Horizon?

Your base button colours do have a setting, even though the hover colour does not.

- Open the theme editor: **Online Store > Themes > Customize**.
- Open **Theme settings**, then **Colors**.
- Horizon uses colour schemes. Edit the scheme your buttons use, and set the button background, text, and border there.

That changes the normal button colour across the store. The hover colour is the one thing that setting does not expose, which is why the CSS above exists. Set your base colour in the editor, then use the CSS only to control what happens on hover.

## Why does my Shopify button turn grey?

Almost always for one of these reasons:

- **Horizon (or a similar newer theme) derived the hover colour from your button colour.** A dark button lightens to grey on hover. This is the case in this article.
- **A Dawn-style overlay.** Dawn and many Dawn-based themes draw a semi-transparent layer over the button on hover using an `::after` pseudo-element. That reads as a grey sheen. The fix there is different: hide that overlay, not the variables.
- **The theme editor selection state.** Inside the customizer, Shopify draws its own highlight over the section you are editing. That is not your live button style. Always confirm on the real storefront in a separate tab before you write any CSS.

To find out which one you have, right-click the button, choose **Inspect**, hover it, and watch which rule lights up in the Styles panel. On Horizon you will see the `--button-` variables change. That confirms you need the variable fix in this article.

## Hover, active, and focus are not the same thing

These three states get mixed up, and they explain a lot of "grey button" confusion.

**Hover** is when a pointer is over the button. On a phone there is no true hover, so a tap fakes it and it can stick, as covered above.

**Active** is the split second while the button is actually being pressed. Some themes darken or shift the button during the press. That flash is normal and usually fine to leave alone.

**Focus** is when the button is selected by keyboard or after a tap, often shown as an outline. Do not remove the focus outline. It is what keyboard users and screen-reader users rely on to see where they are. It is an accessibility feature, not a style bug.

The grey in this thread is the **hover** colour. That is the one to change. Leave active and focus alone unless you have a specific reason.

## What the Horizon button CSS variables mean

You do not need to memorise these, but knowing them helps you read the fix.

- `--button-background-color` is the fill colour of the button.
- `--button-color` is the text colour inside the button.
- `--button-border-color` is the button's border colour.
- `--color-primary-button-background`, `--color-primary-button-text`, and `--color-primary-button-border` are your primary button colours from the colour scheme.
- The `--color-secondary-button-*` variables are the same three values for secondary buttons.

The fix simply says: on hover, set the first group equal to your saved primary or secondary colours. Same colour on hover as at rest, so no change and no grey.

## A few last notes

- **Test on the live storefront, not inside the customizer.** The editor draws its own overlay that can look like a grey hover but is not.
- **Re-add the CSS after a theme update.** Editing `base.css` is a code change. If you update Horizon to a new version later, the change can be replaced, so keep a copy and paste it back if the grey returns.
- **Scope beats force.** A single narrow selector aimed at the right button is safer and cleaner than a broad rule plus a pile of `!important`. Broad rules are what break checkout.

The grey is not something you did wrong. It is Horizon choosing a hover colour for you. Once you set the hover colour to match your button colour, the grey is gone on desktop and it stops sticking on mobile.


---

---
title: How to Schedule Shopify Products by Time of Day
description: Shopify can schedule a product by date, but not by hour. Here is how to make products like cafe items un-orderable outside set hours, and actually block checkout, not just hide them.
---

## The problem

A merchant asked about this on the Shopify Community, and it is a common one for anyone selling food, pickup, or made-to-order items.

They run a cafe inside their shop. The shop is open from 10 to 5. The cafe is only open from 10 to 3. Cafe items are on the website for pickup.

The trouble: customers place cafe orders after 3, when the kitchen is closed. Then the merchant has to cancel and refund those orders by hand, every day.

What they wanted sounds simple. Turn the cafe items (or the cafe page) off after 3 PM, and back on at 10 AM the next day. Leave the rest of the store running until 5.

I reproduced the setup on a test store to work out the cleanest fix. Here is what I found.

## Why Shopify cannot do this on its own

This is the part that trips people up, so it is worth being clear.

Shopify has no setting that turns a product, collection, or page on and off by the hour.

The scheduling that does exist works by **date**, not by time of day. You can set a product to publish on a future date, or a discount to run between two dates. But there is no native "available 10 AM to 3 PM" control anywhere in the admin.

Local pickup settings do not help either. They control how quickly an order is marked ready for pickup. They do not stop someone from placing the order in the first place.

So "hide after 3 PM" is not a checkbox. It has to be built. The good news is that it is a small build, and one of the ways is free.

## First, tag your cafe items

Whichever route you pick below, start here. It is the one step they all share, and it takes a minute.

Give every product that has limited hours the same tag. I used `cafe`. Open the product, find the Tags box, type `cafe`, and save.

![Tag your cafe products with the tag cafe in the Shopify product editor](/images/blog/schedule-shopify-products-by-time/01-tag-cafe-products.jpeg)

Now every method points at that one tag. Your regular products are never touched, so the rest of the store keeps selling normally until close.

## The important distinction: hide versus block

Before the fix, understand what "make it unavailable" really means. There are two very different things, and people mix them up.

**Hiding** the product removes it from the collection page and search. It looks gone. But the product still exists, and its direct link still works. Anyone with that link, or a saved cart, or a bookmarked page, can still add it and check out.

**Blocking** stops the actual order. The item cannot be purchased outside the window, no matter how the shopper reached it.

The cafe owner does not care whether the item looks hidden. They care about the refunds. Refunds come from orders that go through. So the real goal is to **block checkout**, not just to hide the product.

Keep that in mind, because the most common advice online only hides, and it will not stop the refunds by itself.

## Route 1: an app (no code)

The easiest path for most merchants is an app built for order timing.

Install an order-scheduling or pickup app, then set the cafe order window to 10 AM to 3 PM. Outside that window, cafe items cannot be ordered. Everything else stays available.

Apps worth looking at:

- Bird Pickup Delivery Date, which has a free plan.
- Zapiet Pickup and Delivery, the heavyweight for cafe and local pickup.
- TimeGate Timed Products, aimed directly at products that are only available at set times.

One thing to check before you commit to any of them. The app must block **checkout**, not just the Add to cart button. If it only hides or disables the button, someone with the direct product link can still order, and you are back to refunds. Test that before you rely on it.

## Route 2: a checkout rule (free, set up once)

If you want a free solution and you have a developer, or you are comfortable with the Shopify command line, there is a clean built-in way.

Shopify lets apps add a **checkout validation rule**. This is a small piece of logic that runs when someone tries to check out. It can stop checkout and show a message when the cart breaks a rule you set.

For the cafe, the rule is: if the cart contains a `cafe` item and the current time is outside 10 to 3, block checkout with a message.

Why this route is nice:

- It runs on **your store's timezone**, on Shopify's own servers.
- It covers the fast checkout buttons too, like Shop Pay, Apple Pay, and Google Pay, which many workarounds miss.
- It works on any Shopify plan.
- Once it is on, it needs no daily attention.

I built this exact rule and tested it with three sample carts. A cafe item after 3 PM was blocked at checkout with the message "Cafe items can only be ordered between 10 AM and 3 PM." The same item before 3 PM went through. A non-cafe item was never affected.

A developer sets it up with the Shopify command line: scaffold a cart and checkout validation function, drop in the small file, deploy it, and switch it on under Settings, then Checkout. The whole thing is a few dozen lines.

## Why hiding in the theme is not enough

There is a third idea that comes up a lot, and it causes its own problems.

You can edit your theme so the cafe collection or products disappear after 3 PM. It feels like the answer, but it only hides.

The direct product link still works. Search engines and old links still point at it. A shopper who added the item earlier can still finish checking out. So the refunds keep coming.

Use a theme hide only as a **visual cue** on top of Route 1 or Route 2, never on its own. Show a "Cafe closes at 3 PM" note so shoppers see the window early. Let the app or the checkout rule do the actual blocking.

## How to schedule products on Shopify by date

Worth covering the neighbour question, because many people searching for this actually want date scheduling, not hours.

If your goal is "make this product go live next Monday" or "take it down at the end of the month," Shopify can do that, sort of, through publishing. You unpublish the product, or use the sales-channel publishing dates where available, or an app that flips product status on a schedule.

That is date-based. It is a different job from "open at 10, close at 3, every day." Time-of-day control is the one Shopify does not offer natively, which is why the cafe case needs one of the routes above.

If you only need a one-time date change, you may not need any app at all. If you need a repeating daily window, you do.

## How to make a Shopify product unavailable

A few quick ways, depending on what "unavailable" should mean:

- **Permanently, from all channels:** archive the product. It leaves the storefront and every sales channel. This is not scheduled, it is manual and lasting.
- **Temporarily, but still hidden only:** set it to draft, or unpublish it from the Online Store channel. It comes off the storefront until you publish it again. Still a manual switch, and still only hides.
- **On a daily schedule, and actually blocked:** the app or checkout-rule routes above. This is the only option that both repeats on its own and stops the order.

Match the method to the meaning. Most people who ask about "store hours" want the last one.

## What to check if orders still slip through

Once your rule or app is live, a quick check in the first week saves surprises. A fellow merchant on the thread put this well, and it is good advice.

- Test a cafe-only cart just **before and just after 3 PM**, in your store's timezone. Confirm the block turns on at the right minute.
- Test an **accelerated checkout** too, like Shop Pay or Apple Pay, not just the normal checkout button. This is where weaker solutions leak.
- For the first week, glance at your **order timestamps each morning**. Confirm no cafe orders landed after the cutoff.

If something did slip through, the usual cause is one of two things. Either the app only hid the button instead of blocking checkout, or the times are being read in the wrong timezone. Both are quick to spot with the tests above, before they turn into more refunds.

## Quick answers

**Can I set store hours for one product on Shopify?**
Not with a native setting. You add an app or a checkout validation rule, and point it at a tag on those products.

**Does Shopify have opening hours?**
Not for ordering. You can display business hours with a theme section or app, but that is a label. It does not stop orders.

**Will hiding the product stop after-hours orders?**
No. Hiding removes it from view, but the direct link still checks out. You need to block checkout to stop the refunds.

**Does the checkout rule work on the Basic plan?**
Yes. Cart and checkout validation works on any plan, and it covers the fast wallet checkouts too.

## The short version

Shopify schedules by date, not by hour, so daily "open at 10, close at 3" needs a small add-on. Tag the affected items first. Then either install an order-timing app or add a free checkout validation rule. Make sure whatever you choose blocks checkout, not just hides the product, or the after-hours refunds keep coming.


---

---
title: "Shopify Accordion: Different Details on Every Product"
description: "One accordion, but the same text on every product page. Here is the no-code way to make each product show its own Details and Care content, using metafields and a dynamic source."
---

## The problem

A merchant asked this on the Shopify Community and the frustration in the post was real. She had spent about three hours on it before posting.

She was on Horizon, Shopify's newer free theme, using the default product template. She had built a clean accordion on her product page with two rows: **Details** and **Care**. Inside each row she added a Text block and typed the content.

Then she opened a second product and found the same text sitting there. She changed it on one product, and it changed on every product in the store.

Her words: "the Text block is shared across all products, so when I update the content for one product, it changes on every product page."

She had two hard constraints, and they are the right ones to have:

- No separate product template for every product.
- No theme code editing.

Both are achievable. Here is the finished result, two different products sharing one accordion, each showing its own text.

![Two Shopify products sharing one accordion, each showing its own Details content](/images/blog/shopify-accordion-product-page/01-accordion-per-product-result.png)

Same accordion. Built once. Different content per product.

## Why the text is shared

This is the mechanism, and once you see it the rest is obvious.

When you type words into a Text block in the theme editor, that text is stored as a **theme setting**. It lives in the template file, not on the product.

A template is a layout, and one layout serves every product assigned to it. So anything you type into the layout is, by definition, the same for all of them. The theme is doing exactly what it was designed to do.

For content to change per product, it has to be stored **on the product**. Shopify's mechanism for that is a metafield, and the theme editor reads metafields through a feature called a dynamic source.

That is the whole idea: the block stays in the template, but instead of holding text it holds a pointer to a field on whichever product is being viewed.

The separate-template approach fails for the same reason, just more slowly. Fifty products would mean fifty templates, and every design change would need repeating fifty times.

## The two things that were actually blocking her

Worth calling out, because they are the reason this looks impossible before it looks easy.

**The dynamic source icon does not appear until a matching metafield exists.** If you have not created a metafield of a compatible type yet, the theme editor shows no icon at all on the Text field. It looks like the theme does not support it. It does, there is just nothing to connect to yet. Create the metafield first and the icon appears.

**"Add block" only offered "Accordion row".** She was clicking Add block while the accordion itself was selected, and an accordion only accepts rows. The Text block sits one level deeper, inside a row. You have to expand the row first.

Neither of those is documented anywhere obvious. Both look like a missing feature.

## Step 1: Create the two metafields

Go to **Settings > Custom data > Products > Add definition**.

- Make one called **Details** and one called **Care**.
- Set both to type **Rich text**.
- Leave **Storefront access** on. Without it the theme cannot read the value.

![Creating Details and Care as Rich text product metafield definitions in Shopify admin](/images/blog/shopify-accordion-product-page/02-create-rich-text-metafields.jpeg)

Rich text is the right type here because it supports paragraphs, bold, and bullet lists, which is what a Details or Care block usually needs. Single line text works too but strips all formatting.

If you want the longer walkthrough of metafields as a concept, I wrote one separately on [how to add metafields in Shopify without an app](/blog/shopify-add-metafields).

## Step 2: Fill in the content per product

Open a product, scroll to the bottom of the product page in admin, and you will find a **Metafields** card with your two new fields in it.

Fill in that product's own Details and Care.

![Filling in the Details and Care metafield values on a single Shopify product](/images/blog/shopify-accordion-product-page/03-fill-product-metafields.png)

Repeat per product. This is the part that changes, and it is the only part you repeat.

You do not have to do all of them before continuing. Do one or two, get the theme side working, then fill the rest in.

## Step 3: Select the Text block inside the accordion row

Back in the theme editor, open your product page and find the accordion in the left sidebar.

- Expand the **Accordion**.
- Expand the **Accordion row** inside it.
- Click the **Text** block inside the row.

![The Text block nested inside an accordion row in the Shopify theme editor sidebar](/images/blog/shopify-accordion-product-page/04-text-block-inside-accordion-row.png)

Two levels of expanding. That is the step that trips people up.

## Step 4: Connect the dynamic source

With the Text block selected, look at the Text field in the settings panel. There is a small database icon next to it. That is **Connect dynamic source**.

- Click the icon.
- Pick **Details**.
- Delete any leftover placeholder text in the field, or the row will show both the old text and the metafield value.

![Connecting a dynamic source on a Text block and picking the Details metafield](/images/blog/shopify-accordion-product-page/05-connect-dynamic-source.png)

Then repeat the whole of step 3 and 4 for the Care row, picking **Care** instead.

That is it. One accordion, built once. Every product now shows its own text.

## Hiding a row when the product has no content

If a product has no Details value, the accordion row still renders. It just opens onto nothing, which looks broken.

Another merchant on the thread posted a neat fix for this, and it is worth including. If your metafield is Rich text, paste this into the **Custom CSS** setting of the Product information section:

```css
accordion-custom:not(:has(.details-content *)) {
  display: none;
}
```

That hides any accordion whose content area has no child elements. Different metafield types render differently, so if you used something other than Rich text you may need to adjust the selector.

The simpler answer, if you only have a handful of products, is to fill in every metafield and not worry about it.

## How to add an accordion to a Shopify product page

If you do not have an accordion yet, here is the step before all of this.

The block is not always called an accordion. Theme names vary, and that is the main reason people cannot find it:

- **Horizon, Fabric, Studio and the other 2024+ themes**: it is called **Accordion**, added as a block inside the Product information section.
- **Dawn**: it is called **Collapsible row**, added as a block on the product, or **Collapsible content** as a full section.
- **Many paid themes**: it is called **Tabs**, **FAQ**, or **Product tabs**, and often sits in a dedicated section.

In every case the route is the same. Theme editor, open a product page, find the product information section, **Add block**, and pick the collapsible one. Then add rows for each heading you want.

You do not need an app for this on any modern theme.

## Can I use this for an FAQ accordion?

Yes, and it is the same pattern with one decision to make first.

If the FAQ is the same across the whole store, do not use metafields at all. Type it straight into the theme, because shared text is exactly what a theme setting is for. That is the one case where the "problem" in this article is the desired behaviour.

If the FAQ differs per product, create a Rich text metafield called something like `faq`, and connect it the same way as Details above.

If the FAQ is a long list of question and answer pairs that you want to reuse across groups of products, metafields get clumsy. That is the point where a metaobject makes more sense, because you can define one FAQ entry and reference it from many products.

## What to check if the metafield does not appear

This is the failure most people hit, and the merchant in the thread hit it too. She scrolled the whole dynamic source list and her Rich text metafield was not in it.

Work down this list.

**Type mismatch.** The dynamic source picker only lists metafields whose type the field can render. A Text field lists text-like types. It will not list a File, a Product reference, or a Dimension. If your metafield does not appear, check the type before anything else.

**Storefront access is off.** In the definition, under access settings, storefront access must be enabled. If it is off the theme cannot read the field and the picker hides it.

**You are on the wrong owner type.** A Product metafield does not appear on a collection template, and a Collection metafield does not appear on a product page. Check that the definition was created under **Products**, not under something else.

**The definition exists but has no value.** The picker does still list empty metafields, but the storefront will render nothing, which looks identical to a broken connection. Fill a value on the product you are previewing before you judge it.

**You are previewing a product with no value.** The theme editor previews one specific product. If that product has no Details, you see an empty row even though everything is wired correctly. Switch the preview to a product you have filled in.

**Placeholder text is still in the field.** If you connected the dynamic source but did not clear the old typed text, some themes render both. Clear the field.

## Metafield, metaobject, or theme setting

Three storage locations, and picking the wrong one is what causes this whole problem. Here is the distinction in one line each.

A **theme setting** is text typed into the theme editor. It is stored in the template and shared by every product using that template. Correct for a shipping notice or a store-wide guarantee.

A **metafield** is a custom field on one specific product. Different value per product, one definition. Correct for Details, Care, materials, dimensions, ingredients.

A **metaobject** is a reusable record you define once and point many products at. Correct for a size chart shared by all your dresses, or a care guide shared by everything made of merino.

The rough rule: if the text is the same everywhere, use a theme setting. If it is different per product, use a metafield. If it is shared by groups of products and you would hate to update it in twenty places, use a metaobject.

## The takeaway

An accordion that shows the same text on every product is not a bug and not a theme limitation. It is a theme setting doing its job.

Move the content onto the product with a Rich text metafield, connect the Text block to it with the dynamic source icon, and one accordion serves the whole catalogue.

I reproduced the merchant's exact setup on a Horizon store with no code and no app. Two products, one accordion, two accordion rows. One product shows its merino wool description, the other shows its cotton-blend lace description, each pulling from its own metafield. No extra product templates, no theme code.


---

---
title: Add an Account Dropdown Menu in Shopify Horizon
description: Turn the Shopify Horizon account icon into a dropdown with login, orders and logout links using a small Custom Liquid block.
---

## The problem

A merchant asked about this on the Shopify Community.

The account icon in their header used to open a small menu right under the icon. Login, orders, and profile links all sat neatly below it.

Then, over two days, it changed on its own. The menu now opened stuck to the far right edge of the screen. It floated past the account icon, not under it.

The merchant had not touched the theme. All their apps were disabled. They ran the Ride theme, then published Horizon to check, and saw the exact same thing.

That is the tell. It is not a Ride bug and not a Horizon bug. It is a Shopify change to a shared login element.

I reproduced it on a test store on the Horizon theme. Same result. The account menu opened flush to the far right edge of the header.

![Shopify Horizon account menu opening at the far right edge of the header instead of under the account icon](/images/blog/shopify-account-dropdown-horizon/01-account-menu-far-right-edge.png)

In the shot above, the red box on the right is the account icon. The wide red box is the menu. It has slid all the way to the screen edge. The gap between the icon and the menu looks broken, even though every link inside still works.

If you searched for a way to fix your **shopify account dropdown** and landed here, this is the same issue. Below is the small fix I tested, plus a no-code path and answers to the questions that come up around it.

## Why it happens

This is the part most forum answers skip, so let me explain it plainly.

The account icon in Horizon is not built by the theme. It is a Shopify web component called `shopify-account`. Think of a web component as a small, self-contained widget that Shopify drops into the page. The theme just places it in the header.

The menu that opens is a popover. A popover is a floating panel that sits on top of the page. Shopify renders it inside the component using a shadow part named `dialog`. A shadow part is a slice of the widget's internals that the theme is allowed to style from outside.

Here is the key point. Because the icon is Shopify's own element, and the same element ships on every Horizon-based theme, one Shopify update changes it everywhere at once. Ride, Horizon, and any theme in the Horizon family all move together.

Shopify updated how the popover positions itself on desktop. It now anchors to the right edge of the header. Before, it anchored under the icon. Nothing in your theme code changed. Nothing in your apps changed. That is why turning apps off did nothing, and why the theme developer could not fix it in their own code.

So the account menu is still there. It still works. It is just parked in the wrong spot.

## Prerequisite check: are you on a Horizon-based theme?

This fix is for the new Horizon family of themes. That includes Horizon itself, Ride, and other themes built on the same engine.

To confirm, open your store, click the account icon, and watch where the menu appears. If it slides to the far right edge on desktop, you are in the right place.

If you run an older theme like Dawn or Debut, your account link behaves differently. It usually goes straight to a login page instead of opening a popover. That case is not what this article fixes.

## The fix: pull the account menu back under the icon

The plan is simple. We add a tiny block of CSS that tells the popover to anchor under the account icon again. We do not touch any theme file. We do not edit the header code. We add one Custom Liquid section that loads on every page.

A Custom Liquid section is a theme block where you can paste your own HTML, CSS, or Liquid. It is safe, and you can remove it any time.

**Step 1. Open the theme editor**

- Go to Online Store.
- Go to Themes.
- Click Customize on your live theme.

**Step 2. Add a Custom Liquid section in the footer**

- In the left panel, scroll down to the Footer group.
- Click Add section.
- Choose Custom Liquid.

I put it in the footer on purpose. The footer shows on every page. So the fix applies site-wide, not just on the home page.

**Step 3. Paste the code and save**

- Click into the Liquid code box.
- Paste the snippet below.
- Click Save.

![Adding a Custom Liquid section in the Shopify Horizon footer and pasting the account menu CSS](/images/blog/shopify-account-dropdown-horizon/02-footer-custom-liquid-paste.png)

Here is the exact code I used:

```
<style>
  @media (min-width: 751px) {
    shopify-account { anchor-name: --account-trigger; }
    shopify-account::part(dialog) {
      position-anchor: --account-trigger;
      inset-inline-end: anchor(right);
      inset-inline-start: auto;
      inset-block-start: calc(anchor(bottom) + 8px);
    }
  }
</style>
```

Let me translate what each line does in plain words.

- The `@media (min-width: 751px)` line means the rule only runs on desktop. On phones the menu already sits fine, so we leave it alone.
- `anchor-name: --account-trigger` gives the account icon a name. Now other elements can pin themselves to it.
- `shopify-account::part(dialog)` reaches into the widget and grabs the popover panel.
- `position-anchor: --account-trigger` tells the popover to pin itself to the named icon.
- `inset-inline-end: anchor(right)` lines up the popover's right edge with the icon's right edge.
- `inset-inline-start: auto` lets the left side grow naturally.
- `inset-block-start: calc(anchor(bottom) + 8px)` drops the popover 8 pixels below the icon, so it sits just under it.

**Step 4. Check the result**

After saving, click the account icon on your desktop storefront. The menu should now open right under the icon. Its right edge lines up with the icon.

![Shopify Horizon account menu fixed and opening as a dropdown right under the account icon](/images/blog/shopify-account-dropdown-horizon/03-account-menu-under-icon.png)

I tested this on a Horizon store. I added exactly this as a Custom Liquid section. The popover moved from the far edge to right under the account icon. That is the whole fix.

To nudge it left or right, change `anchor(right)`. For example, `calc(anchor(right) + 20px)` shifts it 20 pixels to the right.

## An alternative: a shorter no-code style tweak

If your theme has a Custom CSS field, you can skip the Custom Liquid section and use that instead.

Some Horizon-based themes expose a Custom CSS box under Theme settings. If yours does, paste the same rule there. The result is the same.

There is also a shorter version of the CSS. The merchant in the thread found it worked on their own store:

```
shopify-account::part(dialog) {
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}
```

This pins the popover to the right side and cancels any offset that pushed it away.

A note on the two approaches. The anchor version ties the menu to the icon, so it stays lined up even if your header layout shifts. The short version pins to the container edge, which is simpler but less precise. Try the anchor version first. Fall back to the short one if your header is unusual.

Either way, you are not changing Shopify's element. You are only styling the panel it renders.

## Will Shopify add a setting to move the account menu?

Right now there is no built-in setting to move it left, center, or right.

The merchant asked Shopify support about this. Support said the far right position is the new standard placement. They forwarded the request for a position setting to their team. So a real toggle may come later.

Until then, the CSS above is the way to control it. It is small and reversible, so there is no harm in using it now.

## How do I add login, orders, and logout links to the Shopify header?

The good news is you do not build these from scratch on Horizon.

The `shopify-account` element already carries them. When a visitor clicks the icon, the menu shows Sign in, Orders, and Profile. Once they log in, it shows their account and a way to sign out.

So your job on a Horizon **shopify header account menu** is placement, not content. Shopify manages the links. You manage where the panel appears. The fix in this article handles that placement.

If you want extra links in that area, like a wishlist or a support page, that is a bigger customization. It usually needs a custom snippet or an app, since you cannot inject items into Shopify's own popover.

## How do I make the account icon open a dropdown instead of a page?

On Horizon-based themes, the account icon already opens a dropdown popover, not a page. That is the default.

If clicking your icon sends you straight to a login page, you are likely on an older theme like Dawn. Older themes link the icon to `/account`. There is no popover to reposition, because there is no popover at all.

To get a true **shopify account icon dropdown** on an older theme, you would need to build a custom menu yourself. That is more work than the Horizon fix. On Horizon, the dropdown is free, and you only fix its position.

## Why does the account menu look different on mobile and desktop?

The menu is responsive. It changes shape based on screen size.

On mobile, the popover usually opens as a wide sheet that fits the small screen. It looks fine there, which is why our fix skips phones with the `min-width: 751px` line.

On desktop, the popover floats near the icon. That is where the far right jump happened. So we only correct desktop. This keeps the mobile view untouched and safe.

Always check both after any header change. A rule that helps desktop can sometimes shift the mobile layout, so a quick look on a phone is worth it.

## If it did not work

A few things can stop this fix from landing. Here is what to check.

- **You saved it in the wrong theme.** The Custom Liquid must be in the live theme, or in the theme you are previewing. If you edit a draft and view the live site, you see no change.
- **Browser support.** This works in Chrome, Edge, and Safari. In Firefox the menu may stay at the edge for now, because Firefox does not fully support CSS anchor positioning yet. The menu still works, so the rule does no harm. It just does not move there.
- **A theme or app already forces a position.** If another snippet sets the popover position with `!important`, it can override this. Try the short `!important` version from the alternative section above.
- **Cache.** Hard refresh the storefront after saving. Old CSS can linger for a minute.
- **You are on mobile.** The rule is desktop-only by design. On a phone the menu will not move, and that is expected.

The merchant hit this at first. It did not work until they spotted a leftover rule in their own CSS file that was fighting the fix. Once they removed it, the menu snapped into place. So if nothing moves, search your theme's Custom CSS for any existing `shopify-account` rule and clear it.

## Definitions and distinctions people confuse

A few terms get mixed up in these threads. Here is a clean version of each.

- **Account icon.** The small person icon in the header. On Horizon it opens a menu.
- **Account menu or popover.** The floating panel that opens under the icon. Same thing, two names. This is your **shopify customer account dropdown**.
- **shopify-account.** Shopify's own web component that draws the icon and the menu. It is not part of your theme, so theme edits and app toggles do not change it.
- **Shadow part.** A named piece of a web component that outside CSS can style. Here it is the `dialog` part, the popover panel. We target it with `::part(dialog)`.
- **Anchor positioning.** A newer CSS feature that pins one element to another. We name the icon, then anchor the popover to it. That is what keeps them lined up.
- **Custom Liquid section.** A theme block where you paste your own code. We use it to load the CSS on every page without editing core files.

One last distinction, since it causes real confusion. Horizon is built by Shopify. Ride and other Horizon-family themes share Shopify's login element. So a change to that element shows up on all of them at once. That is not your theme breaking. It is one shared component moving. And a small, reversible CSS rule is all it takes to put the menu back where your customers expect it.


---

---
title: How to Add Metafields in Shopify Without an App
description: Metafields let you store custom data per product or collection and render it in your theme. Here is the setup, plus a tested limit worth knowing - Liquid inside a metafield does not run.
---

## What metafields are actually for

Shopify gives every product, collection, customer and order a fixed set of fields. Title, description, price, images. That covers most of what a store needs and none of what makes your store specific.

Metafields are the escape hatch. They are **custom fields you define yourself**, attached to any of those records, and readable from your theme.

A size chart per product. A care instructions block. A "harvested in" date on coffee. A different photo gallery on every collection page. All of it lives in a metafield instead of being hardcoded into your theme or pasted into the description.

The value is not really the storage. It is that **your theme stops needing to know about individual products**. You write the template once, and every product or collection fills in its own value.

A merchant asked how to use metafields to put a different gallery on each of their collections. Their app produced an embed code, and pasting it into a custom Liquid block worked, but doing that per collection meant editing the theme every time they added one.

That is precisely the problem metafields solve. But there is a limit on what you can store in one, and I want to cover that first, because it is the thing that will waste your afternoon.

## The limit: Liquid in a metafield does not run

I tested three kinds of content in a multi-line text metafield and rendered them on a Dawn collection page.

**HTML renders.** A `<div>` with inline styles came out as a real styled element.

**JavaScript runs.** A `<script>` tag in the metafield executed normally.

**Liquid does not.** It prints as literal text.

Here is the metafield holding an embed that contains a Liquid object, `{{ collection.title }}`:

![A multi-line text metafield holding an HTML embed with a Liquid tag inside it](/images/blog/shopify-add-metafields/01-image.jpeg)

And here is that same value rendered on the storefront:

![The HTML renders and the JavaScript runs, output from a metafield](/images/blog/shopify-add-metafields/02-image.jpeg)

The HTML box is drawn. The script ran. But look at the text:

![The Liquid tag printing literally as collection.title instead of executing](/images/blog/shopify-add-metafields/03-image.jpeg)

It says `{{ collection.title }}`, literally, on the page. It did not resolve to the collection's name.

That is the whole rule, and it follows from how Shopify renders a page. Liquid is evaluated **once**, when the template is compiled. By the time your metafield's value is fetched and printed, that pass is finished. The string goes to the browser as-is. The browser knows what to do with HTML and JavaScript. It has never heard of Liquid.

So, practically:

- Your app gives you a **plain HTML/JS embed**, a `<div>` plus a `<script>`? A metafield works perfectly.
- The code contains **any Liquid** (`{% ... %}` tags, `{{ ... }}` objects, or an app snippet reference)? That part prints as text instead of running.

Knowing this up front saves you from concluding that metafields are broken. They are doing exactly what they should.

## Step 1: define the metafield

A metafield needs a **definition** before you can put values in it. The definition sets the name, the type, and which records it attaches to.

Go to **Settings > Custom data**. You will see the record types: Products, Collections, Customers, Orders, Variants and more.

Pick **Collections**, then **Add definition**.

Fill in:

- **Name**: `Gallery code`
- **Type**: **Multi-line text**

The **namespace and key** are generated from the name, giving you `custom.gallery_code`. That is how you will refer to it in Liquid, so glance at it before saving. You can set it manually if you want something tidier.

Save.

### Choosing the right type

The type matters more than it looks, because it decides both the admin input and what you get back in Liquid.

- **Single line text** for short values. Renders an input box.
- **Multi-line text** for anything long, including HTML embeds. Renders a textarea.
- **Rich text** gives merchandisers a formatting toolbar. Convenient, but it returns structured content, and outputting it needs `| metafield_tag` rather than a bare print.
- **File** for a PDF or an image. Returns a file object, not a string.
- **Integer, Decimal, Date, True/False** are validated on input, which prevents a lot of nonsense reaching your theme.
- **List of ...** variants hold multiple values, which is how you build an image gallery from real file uploads rather than an embed.

For pasting an embed, **Multi-line text** is right. It accepts anything and returns a plain string.

If you are storing something with a genuine shape, such as a date or a number, resist the urge to use text for everything. A Date metafield stops someone typing "next Tuesday" into a field your theme will try to format.

## Step 2: put values in

Open a collection in your admin and scroll to the bottom. Your **Gallery code** field is there.

Paste that collection's embed in and save. Repeat per collection, filling in only the ones you want a gallery on.

Products work the same way, with the field appearing at the bottom of each product page.

## Step 3: render it in your theme

Add **one** Custom Liquid block or section to your Collection template in the theme editor, containing only:

```liquid
{{ collection.metafields.custom.gallery_code.value }}
```

That is the entire theme change.

Every collection now renders its own gallery. Collections with an empty field render nothing at all, so there is no placeholder or broken markup to hide. Add a collection next month, paste its embed into the field, and the theme keeps working untouched.

The address is predictable: `collection` (or `product`, `customer`, `shop`), then `.metafields`, then the namespace, then the key, then `.value`.

### The .value part

`.value` returns the content. Leaving it off returns the metafield **object**, which prints inconsistently depending on type and is a common source of "why is my metafield showing as an object".

Always use `.value` unless you specifically need the object, which mostly happens with `| metafield_tag` on rich text.

### Guarding against empty

If your markup wraps the metafield in anything, wrap the whole thing in a check so empty collections do not render an empty container:

```liquid
{%- if collection.metafields.custom.gallery_code.value != blank -%}
  <div class="collection-gallery">
    {{ collection.metafields.custom.gallery_code.value }}
  </div>
{%- endif -%}
```

`!= blank` catches both "never set" and "set then cleared", which `!= nil` does not.

## When your code is Liquid after all

If the gallery code your app gives you contains Liquid, the metafield cannot execute it. But you can still drive the gallery per collection.

Keep the Liquid in a Custom Liquid block where it will actually run, and store only a **small value** in the metafield: a gallery ID, a handle, a layout name. Then branch on it:

```liquid
{%- assign gallery_id = collection.metafields.custom.gallery_id.value -%}
{%- if gallery_id != blank -%}
  {% comment %} the app's Liquid goes here, using gallery_id {% endcomment %}
{%- endif -%}
```

The theme holds the logic, the metafield holds the data. That is the cleaner separation anyway, and it is worth doing even when an embed would have worked.

One more caveat: if your gallery is an **app block** rather than a plain embed, it may need the app's own section or block to initialise. Apps often register a block that loads scripts and passes settings in a specific order. Pasting the visible markup into a metafield gets you the markup without the wiring. In that case add the app block through the theme editor and use metafields for its per-collection settings if it supports them.

## Where metafields are worth it

Some patterns that pay off repeatedly:

**Per-product specifications.** Material, dimensions, care instructions. Define once, render in a table on the product template, fill in per product. No more spec tables pasted into descriptions where they cannot be styled or filtered.

**Collection page content.** A banner image, an intro paragraph, a size guide that differs per category.

**Values driving logic, not display.** A `custom.badge_text` metafield lets merchandisers set a badge per product without touching code.

**Search and Discovery filters.** Some metafield types can back storefront filters, which turns custom data into real navigation.

The common thread: metafields are for data that varies per record but is presented identically. If the *presentation* varies too, you want template logic, not a metafield full of markup.

## If it is not rendering

**Nothing appears.** Check the namespace and key match your definition exactly. `custom.gallery_code` and `custom.gallery-code` are different fields, and a wrong key fails with no error rather than erroring.

**It prints as `[object Object]` or similar.** You left off `.value`.

**Your Liquid prints as text.** That is the limit described above. Move the Liquid into a Custom Liquid block.

**HTML shows as escaped text with visible tags.** Some contexts escape output. Multi-line text printed with `{{ }}` should render, but rich text needs `| metafield_tag`.

**It works on one collection and not another.** The other collection's field is empty. Metafield definitions are global; values are per record.

## What I confirmed on a Dawn store

- Pasting an HTML/JS embed into a `custom.gallery_code` multi-line text metafield and outputting it on the collection template **rendered the HTML and ran the `<script>`** normally.
- Dropping a Liquid tag, `{{ collection.title }}`, into the same metafield **printed it literally** instead of executing it.
- One Custom Liquid block on the template served **every collection**, each with its own value, with empty collections rendering nothing.

The summary: metafields are a data store, not a template. Anything the browser can execute will work when you print it. Anything Shopify's renderer needs to execute will not, because that stage has already finished. Keep Liquid in the theme, keep values in metafields, and the per-collection problem solves itself.


---

---
title: Shopify AI Section: Fix a Price Badge Hidden Behind the Image
description: You built a section with Shopify's AI section generator, but the price badge on each card sits behind the photo. Here is the Custom Liquid fix that brings it to the front without regenerating anything. Tested on a Dawn store.
---

## The problem

A merchant on the Shopify Community used the AI section generator in the theme editor to build a row of cards. Each card has a photo, a title and a small price badge in the top right corner.

The badge was hidden behind the photo. Only a faint edge of it showed above the picture. The merchant did not want to generate the section again, because she had already changed its colours, spacing and card text and would have had to redo all of it.

The generator is the **Generate** option in the theme editor's **Add section** menu. You describe a section in plain words and Shopify builds it for you. It writes the section's code and its settings panel, so you can change colours and sizes without touching any code.

That works well until one detail is drawn in the wrong order. A badge that is behind the photo is that kind of detail.

I could not open the merchant's store, because it is password protected. So I built a similar section on a test store running Dawn 15.4.1, put the photo on top of the badge, and fixed it there. The steps below are the ones I posted in the forum.

![Before: the price badge is hidden behind the photo on both cards](/images/blog/shopify-ai-section-price-badge-hidden/01-before-price-badge-hidden.png)

## Why the badge ends up behind the photo

Every item on a web page sits on a layer. When two items overlap, the one on the higher layer is drawn on top.

The number that sets the layer is called **z-index**. A bigger number is a higher layer. An item with no number is on the default layer.

If two overlapping items are on the same layer, the one that comes later in the page's code is drawn on top. A photo that comes after the badge in the code covers the badge, unless the badge has a higher number.

A price badge in the corner of a card is placed with a rule that lifts it out of the normal flow and pins it to the corner. It floats above the card. Whether it also floats above the photo depends on its layer number.

On the section I generated, the badge had a layer number of 1 and sat above the photo. I removed that number and gave the photo its own position, which is the situation on the merchant's store. The photo then covered the badge on both cards.

The AI wrote the code, so nothing on your side caused this. The generator decides the layer numbers, and it can leave one out.

## The fix: give the badge a higher layer

The fix is one rule that gives the badge a high layer number, so it is drawn above the photo. The rest of the section does not change. Your colours, text and spacing stay as they are.

You paste the rule into a **Custom Liquid** section. Custom Liquid is a section with a box where you paste your own code. It is the quickest way to add a rule to a theme without opening any code files.

Here is the rule:

```html
<style>
[class*="badge"], [class*="__price"] {
  z-index: 99 !important;
}
</style>
```

The selector is the part before the curly brackets. It points at the items the rule applies to. `[class*="badge"]` means any item whose class name contains the word badge. `[class*="__price"]` means any item whose class name contains `__price`.

The AI picks long, random class names for its sections, and I could not see the names on the merchant's store. Matching on the word is how the rule finds the badge without knowing the full name.

`!important` makes the rule win over the number the AI wrote, whatever that number is.

## The steps, with screenshots

### Step 1 and 2: open the theme editor

In your Shopify admin, go to **Online Store**. Then click **Edit theme** next to your current theme.

![Go to Online Store, then click Edit theme next to your current theme](/images/blog/shopify-ai-section-price-badge-hidden/03-online-store-edit-theme.png)

### Step 3: click Add section

In the left list, click **Add section**. It sits just below your last section. A menu opens with a search box and the list of sections.

![Click Add section in the left list](/images/blog/shopify-ai-section-price-badge-hidden/04-add-section.png)

### Step 4: choose Custom Liquid

Click **Custom Liquid**. It is near the top of the list, under **Generate**. The new section is added to the page and opens in the left panel.

![Click Custom Liquid in the section list](/images/blog/shopify-ai-section-price-badge-hidden/05-custom-liquid.png)

### Step 5: paste the code

Click inside the **Liquid code** box and paste the rule from above. Include the `<style>` line at the top and the `</style>` line at the bottom.

The preview on the right updates as soon as you paste. The badge moves in front of the photo.

![Paste the code in the Liquid code box](/images/blog/shopify-ai-section-price-badge-hidden/06-paste-code.png)

### Step 6: set the padding to 0

A new Custom Liquid section comes with space above and below it. On my test store the defaults were 40 px on top and 52 px at the bottom. The section holds no visible content, so that space shows as an empty band on your page.

Scroll down in the left panel. Set **Top** and **Bottom** under **Padding** to **0**.

![Set Top and Bottom padding to 0](/images/blog/shopify-ai-section-price-badge-hidden/07-padding-zero.png)

### Step 7: save

Click **Save** in the top right corner. The button is dark when you have changes to save.

![Click Save in the top right corner](/images/blog/shopify-ai-section-price-badge-hidden/08-save.png)

Here is the result on my test store. The price badge sits on top of the photo on both cards.

![After: the price badge sits on top of the photo on both cards](/images/blog/shopify-ai-section-price-badge-hidden/02-after-price-badge-on-top.png)

## Why not ask the AI to fix it?

Under your AI section's settings there is a box called **Follow up instructions**. You can type a change there, such as "bring the price badge to the front".

I tried it on my test section to see what a follow-up does. I asked for a different layout, and it rebuilt the whole section, including its settings. A three-card layout turned into a two-card layout with different options.

That is fine for a section you have just made. It is risky for one you have already adjusted, because your changes can go. The rule above does not touch the section, so nothing you set is lost.

If you do use the follow-up box, check the settings panel afterwards. Look at the colours, the spacing and the text on each card.

## Where the code goes, and where it does not

The rule works from any section, because it applies to the whole page. I used a Custom Liquid section because it is available on every Dawn-based theme and needs no code editor.

Your theme may have another place for custom code. Many themes now have a **Custom CSS** box in **Theme settings**. If yours does, you can paste the rule there without the `<style>` lines, and you will not need the padding step. The [guide to adding custom CSS in Shopify](/blog/how-to-add-custom-css-in-shopify) shows where to find it.

The Custom Liquid section also has a **Custom CSS** line near the bottom of its panel. I did not test the rule there, so use the **Liquid code** box as in the steps above.

## How to check your own store

You do not need developer tools to see whether this is your problem.

- Open the page with your AI section on a computer.
- Look at the top right corner of each card.
- If you see a faint colour or an edge of the badge but no text, the photo is on top of it.
- Check a phone too. Cards often stack into one column on a small screen, and the badge can look different there.

If the badge is missing on every card and there is no edge at all, the problem is a different one. The badge may be switched off in the section's settings, or its colour may match the card background.

## Layer terms that are easy to mix up

**Z-index.** A number that sets which of two overlapping items is drawn on top. A higher number is on top. It only works on items that are positioned, such as a badge pinned to a corner.

**Layer.** A plain word for a z-index level. Items on the same layer are drawn in page order, so the later one is on top.

**Selector.** The part of a rule that points at the items it applies to. Here, the words inside the square brackets.

**Custom Liquid.** A section with a code box. Anything you paste there is added to the page. Shopify's own wording is "Add app snippets or other code to create advanced customizations".

**AI generated section.** A section made with the Generate option. It has a card in its settings that shows the prompt you typed, and a Follow up instructions box.

If your problem is a menu covered by page content rather than a badge, it is the same idea with a different target. The [dropdown menu behind page content guide](/blog/shopify-dropdown-menu-behind-content) explains it.

If you want a badge over a product photo for a sale or a sold out label, there is a native way for that. The [sale badge percentage guide](/blog/shopify-sale-badge-percentage) and the [sold out overlay guide](/blog/shopify-sold-out-overlay) cover both.

For more on building your own sections, see the [guide to custom sections in Shopify](/blog/shopify-custom-section).

## If it did not work

**Is the badge still hidden after you save?** Hard refresh your store. Press Ctrl and F5 on Windows, or Cmd and Shift and R on a Mac.

**Does your badge use a different word in its class name?** The rule looks for the words badge and `__price`. The AI may use a different word, such as tag or label. Right-click the badge on your store, click **Inspect**, and read the class name in the code that is highlighted. Replace `badge` in the rule with the word you see. For example, if you see `price-tag`, use `[class*="price-tag"]`.

**Did the rule also lift something else?** The word badge appears in some theme class names, such as the labels on product cards. Raising their layer is harmless in most cases. If something now sits above a popup, lower the number from 99 to 10.

**Is the Custom Liquid section on the right page?** A section only affects the page it is on. If your AI section is on the home page, add the Custom Liquid section to the home page too. For a section that appears on several pages, add the rule in Theme settings instead.

**Did you save a duplicate theme?** If you worked in a duplicate, preview it. The live store changes only when you publish the duplicate.

**Is the empty band still showing?** Check that both padding values read 0. The slider and the number box must both show 0.

## What to do

- Add a Custom Liquid section and paste the rule.
- Set the padding to 0 and save.
- Check each card on a computer and on a phone.

I confirmed on a Dawn 15.4.1 test store that the badge moved in front of the photo on both cards as soon as the rule was pasted.


---

---
title: Fix a Shopify Announcement Bar That Moves
description: Announcement-bar text jumping left as it rotates or on a click? In Shopify Fabric it is one line of CSS. Here is the fix.
---

## The problem

Your announcement bar sits at the very top of your store. It shows a short message like "Free shipping" or a location line.

But the text does not stay put. It looks centered on one message. Then it jumps to the left on the next one. On some stores it shifts every time a visitor clicks a link and the page reloads.

A merchant named Lucy asked about this on the Shopify Community. She runs the Fabric theme. Her bar shows a rotating set of messages, and the shorter ones slid to the left while the longer ones looked centered. It happened on every page of her store.

This is the shopify announcement bar text moving problem. It looks like a bug in the theme. It is not really a bug. It is a small styling gap, and it takes one line of CSS to fix.

I reproduced it on a test store on the Fabric theme. I want to walk you through why it happens, the exact fix, a no-risk alternative, and the questions people ask around it.

An announcement bar is the thin strip of text above your header. Shopify themes let you add one or more messages to it. When you add more than one, the bar becomes a rotating slideshow that cycles through them.

![Announcement bar text sitting to the left of center on the Fabric theme](/images/blog/shopify-announcement-bar-text-moving/01-problem-text-hugs-left.png)

In the screenshot above, the message "Prague based" is short. It sits well to the left of center. The bar itself is full width and centered, but the words inside are not. That mismatch is what makes it look like the text is jumping.

## Why it happens

Here is the part most forum answers skip.

Fabric centers the message box. It does not center the words inside that box.

Think of it as two separate things. There is the container, which is the invisible box that holds one slide. And there is the text, which is the actual words. Fabric places the container in the middle of the bar. Good so far.

But the text inside gets a rule called `text-align: start`. In left-to-right languages like English, "start" means "left". So the words line up against the left edge of their box.

When a message is long, it fills the box. The left edge of the text and the center of the bar look close enough. You do not notice a problem.

When a message is short, it only fills part of the box. The text hugs the left. Now there is a big gap on the right. The message looks off-center.

As the bar rotates between a long message and a short one, the start point of the text stays on the left, but the amount of text changes. Your eye reads that as the text "jumping" left and right. On a click, the page re-renders and the same thing happens, so it looks like clicking moves the text.

So the real cause is simple. The box is centered. The text is not. We just need to center the text too.

This is a theme-level default in Fabric, not something you did wrong. It shows up the same way on every page because the announcement bar is part of the header, and the header appears everywhere.

## Before you start: confirm it is the theme, not an app

One quick check saves you time.

Fabric's own announcement bar and a third-party announcement bar app are two different things. The fix below is for Fabric's built-in bar. If you installed an app like Essential or a promo-bar app, that app has its own settings and its own CSS, and this fix may not reach it.

To confirm you are on the built-in bar:

- Open your store in the theme editor
- Look at the top strip of the page
- Click it
- If the left settings panel says **Announcement bar** and lists your messages, that is the built-in bar and you are in the right place

If clicking the top strip opens an app embed or an app block instead, fix it inside that app's settings. The rest of this guide assumes Fabric's native bar, which is what the merchant on the community thread had.

## The fix

This is one line of CSS. It does not touch any theme files. It is safe, and you can undo it in seconds.

CSS stands for the styling rules that control how your store looks. Fabric gives you a small box to add your own CSS to a single section, so you do not have to open the code.

Here are the steps.

**Step 1. Open the theme editor.**

From your admin, go to **Online Store**, then **Themes**, then **Customize** on your live Fabric theme. This opens the visual editor.

**Step 2. Click the Announcement bar.**

Click the top strip of the page in the preview. The left panel switches to the **Announcement bar** section settings. You will see your messages and options like "Time to next announcement".

**Step 3. Open Custom CSS.**

Scroll the section settings down. Near the bottom you will find a **Custom CSS** field. Open it. Fabric notes that this adds styles to this section only, which is exactly what we want.

![The Fabric Announcement bar Custom CSS field with the one-line fix pasted in](/images/blog/shopify-announcement-bar-text-moving/02-announcement-bar-custom-css.png)

**Step 4. Paste this one line.**

```css
.announcement-bar__text { text-align: center; }
```

That is the whole fix. The class `.announcement-bar__text` is the exact element that holds the words on each slide. Setting `text-align: center` overrides the "start" default and puts the words in the middle of their box.

**Step 5. Save.**

Click **Save** in the top right.

Now every message, short or long, is centered on the bar. Nothing shifts when the bar rotates. Nothing shifts on a click.

![The announcement bar message centered on every slide after the fix](/images/blog/shopify-announcement-bar-text-moving/03-after-text-centered.png)

I tested this on a Fabric store. I put in a mix of short and long messages. Before the fix, the short ones sat left and looked like they jumped. After the one line, short and long messages all stayed centered, with no shifting between slides. The screenshot above is the fixed state.

One note on why this line and not a heavier one. You may see answers online that pile on `!important`, or that add `display: inline-block; width: 100%`, or that edit `theme.liquid`. You do not need any of that on Fabric's native bar. The single rule on `.announcement-bar__text` is enough because it targets the real text element, and the Custom CSS box already scopes it to this section. Keep it small. A small fix is easy to read later and easy to remove.

## An alternative: center it without any code

If you would rather not paste CSS at all, check the section settings first.

Some Shopify themes, and some versions of Fabric, expose an **Alignment** or **Text alignment** control right in the announcement bar settings. If yours does, set it to **Center** and save. No code needed.

Look for it in the same left panel where you found Custom CSS. It may sit under a "Layout" or "Content" heading. If you see it, use it. That is the cleanest route because it is a built-in setting, not an override.

If your theme version does not show that control, the one-line CSS above is the reliable path. Both do the same job. The setting is friendlier; the CSS is more certain to be there.

There is also the app route, but I would not reach for it here. Installing a third-party announcement bar app to fix alignment is overkill and it adds another thing to your store to maintain. Only consider an app if you want features the native bar lacks, like a countdown timer or per-country messages.

## How to make an announcement bar move in Shopify

People search "how to make announcement bar move shopify" for two different reasons. Let me split them.

If you want the bar to rotate through several messages, add more than one message to it. In the theme editor, click the announcement bar, then add each message as its own block. Once you have two or more, Fabric turns the bar into a rotating slideshow and cycles between them. The "Time to next announcement" slider controls how many seconds each message shows.

If your text is moving and you did not want that, you are on the wrong kind of "move". That is the jumping problem this whole article fixes. The bar rotating is on purpose. The text sliding left is not. The one-line CSS above stops the sliding while keeping the rotation.

So "moving" can mean the rotation you asked for, or the misalignment you did not. Add messages for the first. Add the center rule for the second.

## How do I edit the announcement bar in Shopify?

To edit the announcement bar in Shopify, work in the theme editor, not the code.

- Go to **Online Store**, then **Themes**, then **Customize**
- Click the top strip of the store preview
- The left panel opens the **Announcement bar** settings
- From here you can change the message text, add or remove messages, set the rotation speed, and pick colors
- Click **Save** when done

To change the text, click a single message block in that panel and type the new words. To change the order, drag the message blocks up or down. To remove one, click it and choose remove. This is the same panel where the Custom CSS field lives.

You do not need to touch theme files to edit an announcement bar. Editing code is only needed for changes the settings do not cover, and centering is not one of those on most themes.

## Why does my Shopify announcement bar text move only on some pages?

A few merchants see the shift on certain pages and not others.

The usual reason is message length, not the page. If a page loads and the current slide happens to be a long message, it looks centered. Load a page while a short message is showing, and it looks left. Same bar, different slide, so it seems page-specific when it is really slide-specific.

A second reason is an app or a different section reserving space near the bar on some templates. If the fix above centers the text everywhere except one page type, look at what else is at the top of that specific template.

The center rule handles the common case, because it fixes every slide regardless of length. If a single page still misbehaves after the fix, the cause is likely a separate element on that page, not the announcement bar itself.

## Can I change the announcement bar alignment for the whole store?

Yes. The Custom CSS box in the section applies to the announcement bar wherever it shows, which on most stores is every page. So one paste covers the whole store.

If you want the rule applied at the theme level instead of the section level, Fabric also has a theme-wide Custom CSS field under theme settings. The section-level box is simpler and is what I used. Keep the fix in one place so it is easy to find later.

For shopify announcement bar alignment in general, remember there are two layers. The box position, which the theme usually centers already, and the text position inside the box, which is the one you are correcting. You almost always want both centered.

## If it did not work

The fix is small, so problems are usually small too. Check these.

- **You pasted into the wrong box.** The line must go in the **Announcement bar** section's Custom CSS field, not a random section. Click the top strip first, then scroll to Custom CSS.
- **You did not click Save.** The editor does not auto-save. Confirm the Save button went grey after you clicked it.
- **You are on an app bar, not the native bar.** If an announcement bar app is running, its text lives in the app's own markup and this class will not match. Fix it in the app.
- **A stronger rule is fighting yours.** Rare on Fabric, but if another custom rule sets the text to the left with `!important`, add `!important` to yours: `.announcement-bar__text { text-align: center !important; }`. Try the plain version first; only escalate if it truly does not take.
- **Browser cache.** After saving, hard refresh your store, or view it in a private window, so you see the new CSS and not an old cached page.

If it still slides after all that, the moving element is probably not the announcement text. Look at the header or a promo section directly below the bar on the page where it happens.

## Definitions and distinctions people confuse

A few terms get mixed up around this topic. Here is the plain-English version.

**Announcement bar vs header.** The announcement bar is the thin strip at the very top with a short message. The header is the bigger band below it with your logo and menu. They are separate sections. This fix is only about the bar.

**The box vs the text.** The box is the invisible container that holds one slide. The text is the words. Fabric centers the box by default. It does not center the text. That gap is the whole problem, and centering the text closes it.

**text-align start vs center.** `text-align: start` lines text up against the reading-start edge, which is the left in English. `text-align: center` puts it in the middle. Fabric ships "start"; you are switching it to "center".

**Custom CSS vs Edit code.** Custom CSS is a safe box in the editor for small style tweaks, and it does not change theme files. Edit code opens the actual theme files and carries more risk. For this fix, Custom CSS is the right tool. You never need to edit code to center announcement bar text.

**Rotating vs jumping.** Rotating is the bar cycling through several messages on a timer, which is a feature. Jumping is the text sliding left when a short message shows, which is the flaw. Keep the rotation; kill the jump.

That is the full picture. One line of CSS on `.announcement-bar__text`, pasted into the section's Custom CSS field, centers every slide on the Fabric theme and stops the announcement bar text from moving.


---

---
title: Fix Narrow App Blocks in Shopify Horizon
description: Shopify Horizon shrinks embedded app blocks to their content width. Here is the one-block CSS fix that makes an app section span full width.
---

## The problem

A merchant asked about this on the Shopify Community. They were new to Shopify and building a store on the Horizon theme.

They added a booking calendar to a page. The app was BTA (Book That App), and it dropped its calendar in as an app block. But the calendar rendered far too small. It sat squashed in a narrow column on the left of the page.

The app's support told them it was a Shopify problem, not an app problem. That left the merchant stuck in the middle, sure it was an easy fix but with no idea where to start.

I reproduced it on a test store on the Horizon theme. The result was exactly what they described.

![Before: a BTA booking calendar app block rendering at about 300px wide, stranded on the left of a full-width Shopify Horizon page](/images/blog/shopify-app-block-full-width-horizon/01-before-narrow-app-block.png)

The calendar was about 300px wide. The page around it was more than 2000px wide. So most of the page was empty white space, and the calendar looked broken even though it worked fine.

An "app block" here just means a piece of an app that you drop into your theme through the theme editor. You do not touch code. You click Add block and pick the app. The app then renders its own content, in this case a calendar, inside your page.

The merchant had already tried the obvious thing. They set the BTA widget to Full-Width in the app's own settings. It still showed small on the page. That is the tell that the width is not coming from the app at all.

## Why it happens

This is the part most forum answers skip, and it is worth understanding because it tells you why the fix works.

Horizon is Shopify's newer theme. It is built on blocks and web components. One of the ways it differs from older themes like Dawn is how it sizes each block.

Horizon sizes each block to its own content width. In plain words: a block is only as wide as the stuff inside it needs to be. If the content does not declare a width, the block does not stretch to fill the space. It shrinks to fit.

Most app embeds do not set a fixed width on themselves. They expect the theme to give them room and they fill it. That works on older themes. On Horizon it backfires.

The BTA calendar has no fixed width of its own. So Horizon has nothing to size the block against. The block falls back to a small default, around 300px, and the calendar sits there squashed.

That is the whole mechanism. It is not a bug in BTA and it is not a setting you missed. It is Horizon's content-width sizing meeting an app embed that does not ask for space.

This is why the shopify horizon app block width problem shows up with all kinds of embeds, not just booking calendars. Review widgets, forms, maps, and any third-party section can hit the same wall. The moment an app block does not declare its own width, Horizon keeps it narrow.

It also explains why the app's own Full-Width toggle did nothing. That toggle controls the layout inside the app's iframe or container. It does not change the width of the theme block that Horizon draws around it. The constraint is one level up, in the theme, so the fix has to live in the theme too.

## The fix

The fix is one small piece of CSS. You add it through the theme editor. There are no code files to edit and nothing to download.

CSS is the language that controls how things look on a web page, including how wide they are. You are going to tell the browser: make the app block, and the calendar inside it, take the full width available.

You add that CSS through a Custom Liquid block. A Custom Liquid block is an empty box in the theme editor where you can paste your own code. It is built into Horizon, so you do not need any app for it.

Here are the steps.

**Step 1.** In your Shopify admin, go to Online Store, then Themes. Find your live Horizon theme and click Customize. On some stores the button reads Edit theme instead. Both open the same theme editor.

**Step 2.** Open the page that has the calendar. Use the page dropdown at the top of the editor to navigate to it.

**Step 3.** Find the section that holds the Event Calendar app block. Click Add block inside that section.

![The Shopify Horizon theme editor with a Custom Liquid block added and the width CSS pasted into the Liquid code box](/images/blog/shopify-app-block-full-width-horizon/02-custom-liquid-css-block.png)

**Step 4.** In the block picker, type liquid in the search, then choose Custom Liquid.

**Step 5.** Paste this code into the Liquid code box:

```
<style>
  .bta-calendar-widget-container { width: 100% !important; }
  .shopify-app-block:has(.bta-calendar-widget-container) { width: 100% !important; }
</style>
```

**Step 6.** Click Save in the top right.

That is it. Two lines do the work.

The first line targets the calendar itself and forces it to 100% width. The second line targets the wrapper Horizon draws around every app block, the `.shopify-app-block` element, but only when it contains the calendar. The `:has()` part means "the app block that has the calendar inside it", so you only widen that one block and leave every other block alone.

The `!important` keyword tells the browser to use your width even if the theme or app tries to set a different one. It is the reliable way to win this specific fight.

I tested this on a Horizon store. The calendar went from about 300px wide to the full width of the section, on desktop and on mobile.

![After: the BTA booking calendar now fills the full width of the section on the Shopify Horizon page](/images/blog/shopify-app-block-full-width-horizon/03-after-full-width.png)

The merchant confirmed the same. In their words, it worked beautifully, and they marked it as the solution.

If your app is not BTA, the fix is the same shape but with a different target. Right-click the narrow widget on your live page, choose Inspect, and find the class name on the app's outer container. Swap that class into both lines in place of `bta-calendar-widget-container`. The `.shopify-app-block:has(...)` wrapper line stays, because that wrapper is the same for every Horizon app block.

## An alternative: no code at all

Some merchants do not want to touch CSS, even one block of it. There are two lighter options worth trying first.

The first is the section's own width setting. In Horizon, click the section that holds the app block, open its settings, and look for a Width option. Set the section to full width or a wider maximum. This alone will not fix a truly narrow app block, because the block still shrinks to its content, but it removes any extra margin the section was adding and sometimes that is enough for a widget that was only slightly boxed in.

The second is to move the embed. Horizon lets you add an app block directly as a section on the page, not only nested inside another section. A block placed as its own full-width section has more room to breathe than one crammed into a column alongside other blocks. If your app offers both an app block and an app section, try the section version.

Neither of these beats the CSS fix when the app block ignores width entirely, as BTA does. But they cost nothing to try and they keep your page code free of custom snippets. If they do not work, the Custom Liquid block above always does.

## Does Full-Width in the app fix the narrow app block?

No, and this trips up most people. The Full-Width toggle inside the app controls the layout inside the app's own container. The Shopify embedded app narrow problem comes from the theme block that wraps that container. The app cannot widen a block it does not control.

Our merchant had the BTA widget set to Full-Width and it still showed small. That is the expected result. Fix the width at the theme level, with the CSS block, not inside the app.

## How do I make a Shopify app block full width in Horizon?

Add a Custom Liquid block in the same section and force the app block wrapper to 100% width with CSS. The two-line snippet above does exactly that. The key line is the one that targets `.shopify-app-block`, the wrapper Horizon puts around every app block. Set it to `width: 100% !important` and the block stops shrinking to its content.

This is the general answer to shopify app block full width on Horizon. Find the app's container class, then widen both the container and its `.shopify-app-block` wrapper.

## Why does Horizon make embeds narrow when Dawn does not?

Dawn and older themes let block content stretch to fill the space by default. Horizon sizes each block to its content width instead. So an embed that does not declare its own width gets a small fallback on Horizon but a full-width slot on Dawn.

Same app, same embed code, different result, purely because the theme's sizing rule changed. This is the shopify horizon custom liquid width situation in a sentence: the theme changed how width is decided, so the width now has to be stated explicitly, and a Custom Liquid block is the cleanest place to state it.

## Where do I put the CSS, and will it slow my site down?

Put it in a Custom Liquid block in the same section as the app block. It loads with that page only, it is a few lines, and it has no measurable effect on speed. You are not adding a file or an app. You are adding a tiny style rule scoped to one block.

Keeping the CSS next to the block it fixes also makes it easy to find later. If you ever remove the app, you delete its Custom Liquid block in the same place and the CSS goes with it.

## If it did not work

A few things to check if the calendar is still narrow after you save.

First, confirm the class name. Open your live page, right-click the narrow widget, and choose Inspect. Read the class on the app's outer element. If it is not `bta-calendar-widget-container`, your CSS is aiming at nothing. Update both lines with the real class.

Second, make sure you pasted the whole snippet, including the opening `<style>` and closing `</style>` tags. Without those tags the browser treats your CSS as plain text and ignores it.

Third, check you added the block to the right section. The Custom Liquid block does not have to sit next to the app block, but keeping them in the same section is the simplest way to be sure the CSS is on the same page as the calendar.

Fourth, clear your cache or open the page in a private window. Themes cache aggressively, and an old copy of the page can hide a fix that is actually live.

Fifth, if the block is still boxed by the section, widen the section too. Select the section, open its settings, and raise its Width or maximum width. The CSS widens the block; the section setting makes sure the section gives it room.

## Definitions people confuse

**App block versus app section.** An app block is a piece of an app you nest inside an existing section. An app section is a whole section the app provides on its own. Sections have more room by default. Some apps offer both; if yours does, the section is often the easier full-width path.

**App block versus Custom HTML block.** Our merchant noted that on Horizon, BTA would only let them use the app block. They could not add the calendar through a Custom HTML block. That is common. Many apps require their own app block on newer themes so the app can render and update itself correctly. If your app forces the app block route, the CSS fix here is the way to widen it.

**Custom Liquid block versus editing theme code.** A Custom Liquid block lives in the theme editor and is safe to add and remove. Editing theme code means opening the code editor and changing files like `theme.liquid` or a CSS asset. For this fix you want the Custom Liquid block. It is contained, reversible, and does not risk the rest of your theme.

**Content width versus full width.** Content width means a block is as wide as its contents. Full width means it fills the space it is given. The shopify app block not full width issue on Horizon is simply content width winning when you wanted full width. The CSS snippet flips that one block back to full width.

Once you see it as a theme sizing rule rather than an app fault, the fix is quick and it sticks. One Custom Liquid block, two lines, and the embed fills the page the way it should.


---

---
title: "Shopify Automatic Discount by Collection: What Works"
description: Shopify automatic discounts cannot ask what collections are in the cart. Here is what the admin really offers, the one native rule that reads collections, and when you need an app.
---

## The problem

You want a discount that fires on its own when a shopper mixes categories.

Something like this. One item from Collection 1 plus one item from Collection 2 takes 10% off the whole order. Add a third item from Collection 3 and it becomes 15%.

No coupon code. No bundle product to build. The cart just needs to notice what is in it.

A merchant asked for exactly this on the Shopify Community. Their reason for avoiding bundles was practical. Some of their collections hold ten or more products, and each product has one to three variants. Building a fixed bundle for every possible pairing is hundreds of combinations to create and keep in stock.

So they wanted a rule, not a product.

I went into a Shopify test store and worked through every native discount screen to see how close you can get. The short answer is that Shopify cannot do this on its own, but it can do a useful part of it, and the part it cannot do has a clear name once you know what to ask for.

## What a Shopify automatic discount can actually check

Start with the four discount types Shopify gives you. Open **Discounts** in the admin and press **Create discount**:

- Amount off products
- Buy X get Y
- Amount off order
- Free shipping

That is the whole native list. Anything else in that menu was added by an app you already installed.

The merchant wanted a percentage off the entire order, so **Amount off order** is the right type. Set the method to **Automatic discount** so no code is needed.

Now scroll to the section that decides when it fires. It is called **Minimum purchase requirements**, and it offers three choices and nothing else:

- No minimum requirements
- Minimum purchase amount
- Minimum quantity of items

![Shopify automatic order discount showing only minimum amount and minimum quantity conditions](/images/blog/shopify-automatic-discount-collection/01-automatic-order-discount-conditions.png)

There is no collection condition. There is no product condition. An order discount can ask how much money is in the cart, or how many items are in the cart, and that is the end of the list.

This is the thing worth understanding. A **shopify automatic discount** on the order total is deliberately blunt. It looks at totals, not contents.

## Where it goes wrong: "applies to collections" is not a condition

This is where a lot of people lose an afternoon, so it is worth pulling apart.

Open **Amount off products** instead and you will see an **Applies to** dropdown with **Specific collections** in it. That looks like the answer. It is not.

On that screen, the collection decides **which items get cheaper**. It does not decide **whether the discount runs**.

Pick "Tops" there and you have said "take 10% off any top in the cart." You have not said "only run this when a top is present alongside something else." A cart with nothing but tops still gets the discount.

Trigger and target are two different jobs. Most native discount screens only let you set the target.

## The one native rule that reads collections: Buy X get Y

There is exactly one native discount type where a collection acts as the trigger, and it is **Buy X get Y**.

Set the method to **Automatic discount**, then look at the **Customer buys** block. The **Any items from** dropdown accepts **Specific collections**.

![Shopify Buy X get Y set to automatic with a collection on the buy side](/images/blog/shopify-automatic-discount-collection/02-buy-x-get-y-collection-trigger.png)

I set the trigger to one item from a Jackets collection. Then the **Customer gets** block takes a collection too, so I pointed it at a Tops and Shirts collection at 10% off.

![Shopify Buy X get Y reward side set to a second collection at 10 percent off](/images/blog/shopify-automatic-discount-collection/03-buy-x-get-y-collection-reward.png)

That rule is genuinely useful and it is free. A shopper who puts a jacket and a top in the cart gets 10% off the top, automatically, with no code.

It also solves the merchant's real objection to bundles. You never name individual products. Both sides read the collection live, so adding a new jacket to the Jackets collection puts it in the promotion straight away. Nothing to maintain, and no variant combinations to build.

If a two-product set is really what you are after, I wrote up the fixed-pair version of this separately in [Create an Automatic Bundle Discount in Shopify](/blog/shopify-bundle-discount-automatic), including the quantity loophole to avoid.

## Where Buy X get Y stops

Two limits, and they are the reason this was not the end of the merchant's problem.

**The discount lands on the Y items only.** In my test the 10% came off the top, not off the jacket, and not off the order total. The merchant wanted a percentage off the entire order. Buy X get Y cannot do that, because it is a product discount by design.

**There is no second tier.** Buy X get Y has one trigger and one reward. There is nowhere to say "and if a third collection shows up, make it 15% instead." You would need a second discount, and a second discount does not know what the first one did, so both can fire and stack in ways you did not intend.

So for the exact ask, native Shopify runs out of road.

## Why counting collections needs an app

The missing capability has a precise name: a condition that counts how many **distinct collections** are represented in the cart.

Shopify does expose that kind of logic, but only through **Shopify Functions**, which is the developer layer that discount apps are built on. Functions are available on every Shopify plan, so this is not a Plus-only feature. You just cannot reach it from the admin without an app in between.

When you go looking, the phrase to search for is "number of unique collections" or "cart contains items from X collections." Several discount apps expose a rule builder with cart conditions like this, usually described as nested logic or a flowchart builder. That is the category you want, not a bundle builder.

Two things to check before you commit to one:

**Ask whether the app needs the collections listed.** A Shopify Function cannot ask "what collections is this product in?" in the open. It can only ask "is this product in one of these specific collections?" against a list you supply. That means an app doing collection counting almost certainly needs you to name the participating collections in the discount itself. If the app's rule builder does not ask you for that list anywhere, be suspicious of the count.

**Check what your products are actually in.** This is the one that bites. A product usually belongs to more than one collection, and automated collections add more. On my test store the Zipped Jacket looked like a Jackets product, but it also sat in a second, automated collection built from a sale tag. Any rule counting distinct collections sees two collections there, not one, so a single product can push a cart into a higher tier on its own.

Before you trust a tier, open a few products and look at the Collections box on the product page. Count what is really there.

## How to create an automatic discount in Shopify

For the simpler cases, the native flow takes about a minute.

1. In the admin, go to **Discounts**.
2. Press **Create discount** and pick a type. Use **Amount off order** for a percentage off the whole cart, or **Buy X get Y** if a collection needs to trigger it.
3. Set **Method** to **Automatic discount**. The Title field is what shoppers see in the cart and at checkout, so write it for them.
4. Set the discount value.
5. Set **Minimum purchase requirements** if you want a floor, remembering these are amount and quantity only.
6. Check the **Combinations** box, covered below.
7. Set the start date and save.

The discount is live from the start date. There is no publish step and no theme change.

## Do Shopify automatic discounts combine?

By default, no. A new discount is created with combinations switched off, and the summary panel says so in plain words: it "won't combine with other product, order, or shipping discounts in the customer's cart."

That matters a lot here. If you build the two-collection rule as one discount and a three-collection rule as another, they will not politely take turns. You have to open **Combinations** on each discount and decide explicitly what is allowed to stack with what.

Shopify has a full page on how the stacking rules resolve, and it is worth reading once before you build a ladder of tiers: [Combining discounts](https://help.shopify.com/en/manual/discounts/discount-combinations).

## How many automatic discounts can a store have?

This one catches people who try to fake tiers with lots of separate discounts.

Shopify's own documentation is explicit: "You can have a maximum of 25 active automatic discounts. This total includes app-based discounts."

That last sentence is the important half. A discount app does not get its own budget. Every rule it creates counts against the same 25. So a plan of "one automatic discount per collection pairing" hits the ceiling faster than you expect, and it takes your app-based rules down with it.

Source: [Automatic discounts](https://help.shopify.com/en/manual/discounts/discount-methods/automatic-discounts) in the Shopify Help Center.

## Why is my automatic discount not showing in the cart?

A few reasons, in the order worth checking.

**The start date has not arrived.** Automatic discounts respect the start date and time, including the time zone shown next to the field.

**Another discount is blocking it.** If combinations are off and a different discount already applied, yours will not.

**It is an order discount and your theme does not show it.** Order-level discounts reduce the order total. Some themes only surface line-level discounts on the cart page, so the reduction appears at checkout instead. Go through to checkout before deciding it is broken.

**The cart does not actually meet the condition.** With a minimum purchase amount, remember the check runs on the subtotal before other discounts are applied, not after.

## Order discount or product discount: which one you want

These two get mixed up constantly, and picking the wrong one is why a rule "works" but discounts the wrong thing.

An **order discount** reduces the order subtotal. Use it when the whole cart should get cheaper. It is the right type for "10% off the entire order," and it is the type with only amount and quantity conditions.

A **product discount** reduces specific line items. Amount off products and Buy X get Y are both product discounts. Use one when only some items should get cheaper. These are the types that can read collections.

The merchant's request sat awkwardly across both. They wanted the trigger behaviour of a product discount and the reward behaviour of an order discount. Native Shopify keeps those in separate boxes, which is the real reason the request needs a Function app rather than a clever setting.

## What I would do

If you want this working today without paying for anything, build the Buy X get Y version. It reads collections, it needs no maintenance as your catalog grows, and it is honest about what it does: a discount on the second category when the first one is present.

If the percentage genuinely has to come off the whole order, and it genuinely has to tier as more categories are added, that is app territory. Look for a discount app with a cart-condition rule builder, confirm it can count distinct collections, and check your products' real collection membership before you set the tier numbers.

And whichever route you take, open the Combinations panel. More collection discounts fail from stacking than from the rule itself.


---

---
title: Shopify Autoplay Video on Product Page: Skip the Play Button
description: Your product video shows a play button instead of playing. How to make a Shopify product page video autoplay on desktop and mobile, with the exact code and steps.
---

## The problem

A merchant asked about this on the Shopify Community. They sell sweat shorts for wrestling and jiu-jitsu, and their product page has a short video in the media gallery. The media gallery is the set of photos and videos shown next to the product title.

They wanted the video to play by itself, on both mobile and desktop. Instead, shoppers saw a still picture with a play button on top, and had to tap it.

Their question was simple: what is the best way to set this up?

The thread had three answers, and none of them gave steps. One suggested turning the video into a GIF. Two said the theme was holding the video back and that the theme code needed editing. None of them said which file to open or what to paste.

I tested this on the merchant's own product page. Here is why it happens and the exact fix.

## Why the video waits for a click

The video was already set up to autoplay. It was muted, it looped, and it had the setting that tells the browser to start it on its own.

The problem is that the page does not show that video at first. It shows a photo of the video, called a poster, with a play icon on it. The real video is stored in a hidden box in the page's code, and the theme only unpacks it after a shopper clicks the poster.

I checked this on the product page. Before any click, the page contained zero video players. After a click, one player appeared and started playing.

This is a speed choice made by the theme. A video file is heavy, and a page that does not load it until someone asks for it opens faster. The cost is that autoplay never gets a chance to run.

So the setting on the video is fine. The theme needs to be told to unpack the video as soon as the page opens.

## Before you start

Three quick checks, so you do not chase the wrong problem.

- **The video must be muted to autoplay.** Chrome, Safari and Firefox block videos that start with sound. A muted video is allowed to start on its own. This is a browser rule, not a Shopify rule, and it applies on every store.
- **Your video is added as product media.** The fix below targets the video player that your theme uses for videos in the product gallery. A video you pasted as a link to YouTube uses a different player.
- **You can edit your theme code.** You need the Edit code option in your Shopify admin. Every theme has it.

Make a copy of your theme first. In the Themes page, click the three dots next to your theme and choose Duplicate. Edit the copy and publish it once it works. A mistake in the copy never reaches your shoppers.

## How to make the product video autoplay

The fix is a small script that you paste into one file of your theme. It finds the hidden video on the page and unpacks it, which is what the click used to do.

Here are the steps for a beginner. You do not need to read the code.

1. Go to **Online Store** in your Shopify admin.
2. Click the **...** button next to your theme.
3. Click **Edit code**.

![Online Store, the three dots menu next to a theme, and Edit code](/images/blog/shopify-autoplay-video-product-page/03-online-store-edit-code.png)

4. In the file list on the left, open **layout**, then click **theme.liquid**. This is the main file of your theme. Liquid is the code that Shopify themes are written in.

![The theme.liquid file under the layout folder in the code editor](/images/blog/shopify-autoplay-video-product-page/04-theme-liquid-file.png)

5. Scroll to the very bottom of the file. Find the line that says `</body>`, and paste this code on the line just above it:

```html
<script>
  customElements.whenDefined('deferred-media').then(function () {
    function playVideos() {
      document.querySelectorAll('deferred-media:not([data-media-loaded])').forEach(function (m) {
        m.showDeferredMedia();
      });
    }
    playVideos();
    new MutationObserver(playVideos).observe(document.body, { childList: true, subtree: true });
  });
</script>
```

![The autoplay code pasted just above the closing body tag in theme.liquid](/images/blog/shopify-autoplay-video-product-page/05-autoplay-code-above-body.png)

6. Click **Save** in the top right corner.

![The Save button in the code editor](/images/blog/shopify-autoplay-video-product-page/06-save-code-editor.png)

Open your product page and reload it. The video should start without a click.

Here is the merchant's product page before the change. The play button is on top of a still picture.

![Product page before the fix: the video is a still picture with a play button](/images/blog/shopify-autoplay-video-product-page/01-product-video-waits-for-click.png)

And here it is after the change. The video is playing, the timer reads 0:04 of 0:09, and the sound is off.

![Product page after the fix: the video plays by itself, muted](/images/blog/shopify-autoplay-video-product-page/02-product-video-autoplaying.png)

## What the code does

The script asks the page for every video that is still hidden behind a poster. For each one, it runs the same step that the click would have run.

The theme calls this hidden-video box `deferred-media`. Deferred means postponed. The script says: do not postpone it, do it now.

The last line of the script keeps watching the page. Some themes rebuild the gallery when a shopper picks a different size or colour. If a new hidden video shows up after that, the script unpacks it too. Without that line, the video would play on the first visit and then go back to the poster after a variant change.

## Does it work on mobile?

Yes. The video in this theme already has the settings that phones need to allow autoplay: it is muted and it plays inside the page instead of jumping to full screen.

I checked the page at a phone width of 390 pixels. On a phone, this theme shows the gallery as a row you swipe through, and the video is one of the slides. The video was playing, muted, with the timer running.

One limit to know about: iPhones in Low Power Mode can block autoplay for every website. A shopper in that mode still sees the poster and play button, and the video starts when they tap it. Nothing on your side changes that.

## The file size cost

Because the theme did not load the video until a click, only shoppers who pressed play downloaded the file. With the fix, every visitor to that product page downloads it.

On this store the video file is about 9 MB. That is a lot to load on a phone with a weak connection, and it competes with your product photos.

Three ways to keep it light:

- **Keep the video short.** Five to ten seconds that loop is enough for a product page.
- **Compress it before you upload.** A free tool like HandBrake can shrink a clip a lot, and a phone screen is small enough that the lower quality is hard to see.
- **Use the autoplay only on products where the video sells.** The script runs on every page that has a hidden video, so remove the video from products where it does not help.

## Should you use a GIF instead?

One answer in the thread suggested converting the video to a GIF, because a GIF always moves.

I would not do that. A GIF is usually much larger than the same clip as a video, and the quality is worse. A GIF also cannot be paused, and it has no sound option for the shoppers who want one.

A short muted video gives you the same moving picture for less data.

## Can shoppers still pause the video?

Yes. The video keeps its normal controls, so a shopper can pause it, turn the sound on, or open it full screen. The script only starts the video. It does not lock it.

## Does this work on other themes?

The code looks for a hidden video box named `deferred-media`. That name is used by several themes, so the same fix may work for you. The theme in this thread was one of those.

To find out, open your product page in your browser, press the right mouse button and choose View page source. Search the page for `deferred-media`.

- **You find it:** the fix above should work. Try it on a duplicate of your theme.
- **You do not find it:** your theme hides the video in a different way, and this code will do nothing. Search the same page source for `poster`. The word near it tells you what your theme calls the hidden video, and a theme developer can adapt the script.

If your theme already has an autoplay switch in the theme editor, use that instead. Look at the product page settings in Customize, under the media or gallery block, before you edit code.

## If it did not work

**The video still shows a play button.** Reload the page with a hard refresh. Press Ctrl and F5 together on Windows, or Command, Shift and R on a Mac. Your browser may be showing an older saved copy.

**You pasted the code and the editor shows an error.** Check that you pasted it above `</body>` and not inside another script. The code starts with `<script>` and ends with `</script>`, and nothing else should be between those two tags.

**The video plays but the gallery jumps.** Some themes resize the gallery when a video loads. Check that the video has the same shape as your photos, for example 4 by 5 for a portrait gallery.

**It works on desktop but not on your phone.** Check that the video was uploaded without sound, or that it is muted in the theme. A video with sound is blocked by the phone's browser.

**It plays twice or restarts.** Make sure the code appears only once in theme.liquid. If you pasted it twice, delete one copy.

## How to undo it

Open theme.liquid again, delete the block that starts with `<script>` and ends with `</script>` that you pasted, and click Save. The video goes back to waiting for a click. If you worked on a copy of your theme, you can also just publish the original theme again.

## Related questions

**How do I add a video to a Shopify product page?** Open the product in your admin, find the Media section, and add the video file there. It then shows in the gallery with your photos. Short MP4 files work best.

**Why does my Shopify video not play by itself?** In most cases the theme shows a poster and loads the real video on a click, as in this thread. The video's own settings are fine.

**Can I make the video play only when it scrolls into view?** Yes, but it needs more code than the fix above, and it is a separate project. For a gallery that sits at the top of the page, where the video is usually one of the first things a shopper sees, starting it on page load is simpler.

**Is this safe for my theme updates?** The code lives in theme.liquid. When you update to a newer version of your theme, the file is replaced and the code is removed. Keep a copy of the script and paste it again after an update.

## What to remember

The video was never broken. The theme hides it behind a picture until a click, and a small script unpacks it at page load instead.

- Paste the script above `</body>` in theme.liquid, on a copy of your theme.
- The video stays muted and keeps its controls.
- Compress the file, because every visitor now loads it.
- Repeat the paste after a theme update.


---

---
title: "Shopify B2B on Basic: What You Get, What Needs Plus"
description: B2B on Shopify is no longer Plus only. Here is exactly what works on the Basic plan, the three limits that still need Plus, and which apps close the gap for around \$25 a month.
---

## The problem

A merchant asked on the Shopify Community whether to move his wholesale store off WordPress. He got two replies. Both said Shopify has "B2B features and apps" and left it there.

That is the answer most people get, and it is not useful. It does not tell you the one thing that decides the whole question: **which parts of B2B need Shopify Plus, and which do not.**

Get that wrong and you either pay for Plus you did not need, or you migrate onto Basic and discover halfway through that your pricing model does not fit.

So here is the actual boundary, checked on a live store.

## What happened to the Shopify wholesale channel

If you have read older guides, you will have seen the Wholesale Channel mentioned. It is gone.

Shopify **discontinued the Plus Wholesale Channel on 28 June 2024**. The reason was technical: the channel ran as a separate password-protected storefront and depended on third-party cookies to keep buyers signed in. Browsers stopped supporting those, so the channel could not keep working.

What replaced it is **B2B on Shopify**, and it is a completely different design. Instead of a separate wholesale storefront, your B2B buyers log into your normal store and see their own prices.

This matters when you are researching, because a lot of the advice still online was written for the old channel. If an article tells you wholesale on Shopify means a second storefront, it is out of date.

## The big change: B2B is not Plus only any more

This is the part that trips people up.

For years, B2B on Shopify meant Shopify Plus. Most blog posts, most forum answers, and most agency pages still say so.

It is no longer true. **Company accounts and most B2B features now work on Basic, Grow and Advanced.**

Here is a company record on a store with no wholesale app installed at all.

![A B2B company record in the Shopify admin showing locations, markets, catalogs, payment terms and orders awaiting approval](/images/blog/shopify-b2b-basic-vs-plus/01-b2b-company-record-catalogs-payment-terms.jpeg)

That is native Shopify. No app, no Plus.

## What you get on Basic

All of this works on the Basic plan:

- **Companies and locations.** A business is a company. It can have several locations, each with its own address and settings.
- **Customer accounts tied to a company.** Buyers log in and Shopify knows which business they are buying for.
- **Ordering approval.** New companies can be held for approval before they can order.
- **Net terms.** Invoice now, get paid in 30 days. Shopify tracks the due date and sends the reminders.
- **Payment reminders**, so you are not chasing manually.
- **Quantity rules.** Minimums, maximums and multiples. Sell only in cases of 12 if you want.
- **Quantity price breaks.** Cheaper per unit as the order gets bigger.
- **Purchase order numbers** on orders.
- **Quick order lists**, so a buyer can type SKUs and quantities instead of browsing.
- **Easy reorders** from past orders.
- **The Trade theme**, free, built for B2B.
- **Shopify Flow automations.**

![The Companies list in the Shopify admin, showing approval status for each business](/images/blog/shopify-b2b-basic-vs-plus/02-companies-list-approval-status.png)

For a lot of wholesale businesses, that list is the entire requirement.

## What still needs Plus

Three things. Only one of them usually matters.

**1. More than 3 active catalogs.** On Basic, Grow and Advanced you can have up to three active catalogs across all your B2B markets. On Plus it is unlimited.

**2. Assigning a catalog directly to one company.** This is the important one, and it is explained below.

**3. Split payments.** Deposits, partial payments, and payment requests per fulfillment are Plus only.

Note what is *not* on that list. Net terms is on Basic. Delaying a payment is free. Only *splitting* a payment costs Plus.

## What is a catalog?

A catalog is a price list with a product list attached. It answers two questions at once: which products can this buyer see, and what does each one cost them.

Say you sell a phone case at \$10 retail. Your wholesale buyers do not pay \$10:

- Acme Ltd, your biggest account, pays \$4
- Bravo Ltd, mid sized, pays \$6
- every other wholesale buyer pays \$8

"Acme pricing" is one catalog. "Bravo pricing" is a second. Your general wholesale list is a third.

That is three catalogs, and you have just hit the Basic cap with three customers.

## The limit that actually decides it

Here is the part that matters more than the cap itself.

**On Basic, a catalog attaches to a market.** A market is a group of buyers, normally by country. So every buyer in your "B2B UK" market sees the same prices.

**On Plus, a catalog attaches directly to one company.**

So on Basic you cannot give Acme a private price without giving it to every other UK buyer. The only workaround inside Shopify is to create a separate market per buyer, which becomes unmanageable quickly.

Individually negotiated pricing per customer is the normal way wholesale works. It is also the exact thing Basic cannot do natively.

That single sentence decides your plan.

## How apps close the gap

This is where the answer stops being "upgrade to Plus".

Several apps do per-customer pricing with no cap on how many price tiers you can have. In their own words:

- **BSS B2B Wholesale Pricing** (4.9 stars, 1,094 reviews, from \$29/month) offers "custom pricing, price lists, registration forms, net terms and tax control".
- **Sami B2B Wholesale Pricing** (4.9 stars, 926 reviews, from \$24.90/month) offers "wholesale and volume pricing, tax-exempt checkout, multi-currency, quick order forms, and net term payments".
- **Wholesale Pricing Discount B2B** (4.9 stars, 691 reviews, from \$24.99/month) runs "wholesale and retail in one store with tiered pricing, volume discounts, customer tags, net terms".

They all sell the same core thing: **unlimited per-customer price lists**. That covers both catalog limits, the cap and the per-company assignment, for roughly \$25 to \$30 a month instead of a Plus upgrade.

### What the apps do not fix

Be clear about this before you commit.

**They do not give you split payments.** Nothing in those listings offers deposits, instalments, or invoicing per shipment. Those are checkout mechanics and an app cannot split a Shopify checkout payment. The usual workaround is draft orders and manual invoicing, which is work rather than a feature.

**Check how the pricing is applied.** Many wholesale apps historically worked by tagging customers and rewriting displayed prices on your ordinary storefront, rather than plugging into Shopify's native company accounts. If that is how the one you pick works, you get unlimited price tiers but you may not get the company, location and approval structure alongside them.

Ask that question on a trial before you migrate. It is the difference between one system and two.

## Tax control, and why wholesale needs it

"Tax control" appears in every wholesale app listing and rarely gets explained.

Wholesale buyers often should not be charged tax at the point of sale. A US reseller with a resale certificate does not pay sales tax, because tax is collected later when they sell to the public. A VAT-registered business buying across a border is handled by reverse charge, so you invoice at zero percent.

So you need to mark a company as tax exempt and have checkout honour it. Get it wrong and you either overcharge your customers or owe money you never collected.

## Shopify quantity breaks and volume pricing

These two terms get used interchangeably and they are the same idea: the unit price drops as the quantity rises. Buy 10 and pay \$9 each, buy 100 and pay \$7 each.

Both are on Basic. You set them per catalog, so every buyer on that catalog sees the same ladder.

Quantity rules are a separate setting and worth turning on at the same time. They let you enforce a minimum order, a maximum, and an increment. If you only ship in cases of 12, set the increment to 12 and the store will not let anyone order 7.

## Do you need the Trade theme?

Trade is Shopify's free theme built for B2B. It is on every plan.

It ships with the B2B pieces already built: a quick order list, quantity rules displayed properly, volume pricing tables, and company account requests.

You can run B2B on other themes. Dawn shows volume price breaks, and Horizon is compatible. But a theme has to do real work to support B2B: it needs to read which company and which location the buyer is ordering for, and show a location picker when a buyer belongs to more than one. Miss that and a multi-location buyer gets the wrong prices.

Trade already does it. Starting anywhere else means rebuilding what Trade gives you free.

## Which route to pick

Work down this list and stop at the first one that matches.

- **Three or fewer price tiers, buyers grouped by region:** Basic covers you natively. No app.
- **Every buyer has their own negotiated prices:** Basic plus a wholesale app at around \$25 to \$30 a month.
- **You need deposits or instalment billing:** that is Plus, and there is no way around it.

Notice that the plan question is really a pricing-model question. Answer "how many distinct price lists do I need, and are they per customer or per region" and the plan chooses itself.

That is a much easier question than "should I move to Shopify".


---

---
title: "Shopify B2B Discounts: How to Turn Them On and Set Them Up"
description: Shopify B2B discounts are off until Shopify Support enables them. Here is how to ask, how to build a B2B market, and how to give company buyers automatic free shipping.
---

## The problem

You sell wholesale on Shopify. You have set up companies, and your buyers log in to order.

Then you create a discount for them, and it does nothing. The buyer reaches checkout and there is no discount. There is not even a box to type a code into.

A merchant asked about this on the Shopify Community. They wanted company buyers to get free shipping on orders of 3 or more items. They tested it by viewing the store as a test company account. The discount code field was missing at checkout, and the automatic discount never showed.

Four people answered with the same discount settings. One mentioned Shopify Support in passing. The settings do not work until Support has made one change.

I reproduced it on a Shopify test store with B2B switched on. On that store, company buyers got no discount of any kind until one account setting was changed. That setting is not in your admin. Shopify Support has to change it.

## What "B2B" means on Shopify

A quick glossary, because the words matter for the fix.

- **Company**: a business customer. It has one or more contacts (the people who log in) and one or more locations.
- **Company location**: one address a company buys for, such as a shop or a warehouse. Prices, payment terms and discounts attach to the location, not to the person.
- **Market**: a group of buyers you treat the same way. Most stores have markets by country. A **B2B market** is a market made of company locations instead of countries.
- **Catalog**: a list of products and prices for a group of company locations, such as "Wholesale price list, 30% off".
- **Automatic discount**: a discount that applies by itself when the cart meets a rule. No code is needed.

If you are still deciding whether your plan includes B2B at all, I covered that in [Shopify B2B on Basic vs Plus](/blog/shopify-b2b-basic-vs-plus).

## Why company buyers get no discount

Shopify keeps discounts away from B2B orders by default. A new discount, set to "All customers", still does not apply to a buyer who is ordering for a company.

I checked this with an order total, not a guess. I built one automatic free shipping discount: all customers, minimum 3 items. Then I priced the same 3-item order twice, with Priority Mail at \$12.06.

| Buyer | Shipping before discount | Shipping after discount |
| --- | --- | --- |
| Regular customer | \$12.06 | \$0.00 |
| Company buyer | \$12.06 | \$12.06 |

The discount worked for the regular customer and was ignored for the company buyer. There was no error and no message. The discount simply did not apply.

I also tried to limit a discount to my B2B market. Shopify refused, and the message named the fix:

> Discounts cannot be assigned to B2B markets. Contact Shopify support to enable B2B discounts.

So the missing code box and the missing automatic discount have the same cause. Discounts for B2B are a feature that Shopify turns on per store, on request.

## Step 1: Ask Shopify Support to enable B2B discounts

Open the Shopify Help Center, start a chat and ask:

> Please enable B2B discounts on my store so I can assign discounts to B2B markets.

Until they do, your B2B market will not appear when you try to pick it on a discount. On my test store the list showed only the country markets: Canada, International and United States. The B2B market I had just created was not there.

![Assign markets list on a Shopify discount showing only country markets and no B2B market](/images/blog/shopify-b2b-discounts/01-b2b-market-missing-from-discount-markets.png)

Shopify's own B2B feature list says to "assign automatic discounts or discount codes to your B2B markets to make the discounts available to only B2B customers." Support's switch is what makes that option appear.

You can do Steps 2 to 5 while you wait. The market is useful on its own.

## Step 2: Create a B2B market

A B2B market is how you tell a discount "only these companies". Your companies are probably sitting in a country market right now, next to your retail shoppers.

Go to **Markets** in the admin and click **Create market**.

![Shopify Markets page with the Create market button highlighted](/images/blog/shopify-b2b-discounts/02-markets-create-market.png)

Name it **B2B**, then click **Add condition**. A condition decides who belongs to the market.

![New market form with the name field and Add condition highlighted](/images/blog/shopify-b2b-discounts/03-name-market-add-condition.png)

In the window that opens, change the **Includes** dropdown to **Company locations**. Tick the companies you want in this market and click **Done**. There is also a switch to include all existing and future company locations, which saves you coming back each time you add a company.

![Market conditions window with Company locations selected and a company ticked](/images/blog/shopify-b2b-discounts/04-company-locations-condition.png)

Click **Save**.

![New B2B market with the company location added and the Save button highlighted](/images/blog/shopify-b2b-discounts/05-save-b2b-market.png)

On my test store the saved market showed a **B2B** badge, and it sat under the United States market as its parent. There was no warning about moving the company out of its old market.

## Step 3: Create the automatic free shipping discount

Go to **Discounts**, click **Create discount** and pick **Free shipping**.

![Select discount type window with Free shipping highlighted](/images/blog/shopify-b2b-discounts/06-create-discount-free-shipping.png)

Set the method to **Automatic discount** and give it a title. Buyers see the title in the cart and at checkout, so make it plain, such as "Free shipping on 3+ items".

![Free shipping discount form with Automatic discount and the Title field highlighted](/images/blog/shopify-b2b-discounts/07-automatic-discount-title.png)

An automatic discount answers the code box problem too. Your buyers do not need to type anything, so it does not matter whether the box is there.

## Step 4: Limit it to your B2B market

Scroll to **Eligibility**. Open the dropdown and pick **Markets**. The other choices are All customers, Customer segments and Specific customers.

![Eligibility dropdown open on a Shopify discount with Markets highlighted](/images/blog/shopify-b2b-discounts/08-eligibility-markets.png)

Click **Browse** and tick your **B2B** market. This is the step that needs Support's switch. Before it, the B2B market is missing from this list.

![Eligibility set to Markets with the Browse button highlighted](/images/blog/shopify-b2b-discounts/09-browse-b2b-market.png)

When you pick Markets, the Countries section above greys out and reads "Countries are set by your selected markets". That is expected.

## Step 5: Set the 3-item minimum and save

Under **Minimum purchase requirements**, pick **Minimum quantity of items** and enter **3**. The summary card on the right updates to "Minimum purchase of 3 items".

![Minimum purchase requirements set to minimum quantity of items with 3 entered](/images/blog/shopify-b2b-discounts/10-minimum-quantity-3.png)

Click **Save** in the bar at the top of the page.

![Unsaved discount bar with the Save button highlighted](/images/blog/shopify-b2b-discounts/11-save-discount.png)

"Minimum quantity" counts every item in the cart. Three of one product counts the same as three different products. If you want a minimum order value instead, pick **Minimum purchase amount** in the same place.

## Can a customer segment do this instead?

It seems like a way around the Support request. A **customer segment** is a saved search of your customer list that keeps itself up to date. Shopify can build one for "customers who belong to a company".

I tried it. I made a segment of company contacts and set the free shipping discount's eligibility to that segment. The company buyer still paid \$12.06 for shipping on a 3-item order.

So a segment does not get past the switch either. The discount is ignored for company orders until Support enables B2B discounts, whatever you pick under Eligibility.

## Catalogs are for prices, not discounts

The merchant also asked whether catalog settings could do this. They cannot, because catalogs control prices.

A catalog can set a company's prices to, say, 20% below retail, or fix a price per product. It can also set quantity rules, such as a minimum of 6 per product. None of that touches shipping, and none of it reads the cart total.

Use a catalog when a company should always pay less. Use a discount when a reward depends on what is in the cart, like free shipping at 3 items.

## Discount codes for B2B buyers

The same switch covers codes. Once B2B discounts are enabled, you can assign a code discount to your B2B market in the same Eligibility section.

If you only want one rule, like free shipping at 3 items, the automatic version is simpler. Buyers get it without being told a code, and your sales team does not have to hand codes out.

## Stacking with other discounts

If you already run an automatic discount for retail, check **Combinations** on both discounts. A free shipping discount only runs alongside a product or order discount when both discounts allow it.

The discount form shows "This discount won't combine with other product, order, or shipping discounts" until you change it. I wrote up how the combination settings behave in [Shopify discount combinations](/blog/shopify-discount-combinations).

## If it still does not apply

Work through these in order.

- **Is the buyer logged in as a company contact?** A company contact buys for a location. The same person browsing while logged out is a regular customer, and a B2B-only discount will not apply.
- **Is their company location in the B2B market?** Open the market and check the Includes card. A location added after you built the market is not included unless you turned on the "all existing and future locations" switch.
- **Did Support confirm the switch?** If the B2B market is still missing from the discount's Browse list, it has not been enabled yet.
- **Does the cart really have 3 items?** Check the quantity, not the number of lines.
- **Is another discount blocking it?** Check Combinations on both discounts.
- **Is the discount active?** Look at the status on the Discounts page and the start date.

## Apps that handle B2B discounts

If you would rather not wait on Support, or you need rules Shopify does not offer, wholesale apps can do it. The three most-reviewed on the Shopify App Store are:

- BSS B2B Wholesale Pricing
- Sami B2B Wholesale Pricing
- Wholesale Pricing Discount B2B

Most of these apps are built around customer tags rather than Shopify's company accounts. Check that the one you pick supports B2B companies before you install it, if you already use them.

## Summary

- Shopify ignores discounts on company orders until Support enables B2B discounts.
- Ask Support for it, then build a B2B market from your company locations.
- Create an automatic free shipping discount, set Eligibility to your B2B market, and set a minimum of 3 items.
- Catalogs change prices. They cannot give free shipping.

This article started as an answer on the [Shopify Community](https://community.shopify.com/t/b2b-discounts/687744).


---

---
title: Shopify Back in Stock Notification on Your Home Page
description: Back in stock apps only inject their widget on the product page, so the Featured product block on your home page gets nothing. Here is a free Custom Liquid block that adds a Notify me button there, tested on Craft.
---

## The problem

A merchant on the Shopify Community had the good kind of problem. They launched a product, it sold out fast, and they already had a back in stock app running on their product pages.

What they did not have was a **Notify me** button on the home page, where the product is featured. Their sold-out hero product sat there with a dead Sold out label and no way for a visitor to ask to be told when it returns.

They were on the Craft theme, using Kbite for back in stock alerts.

The thread filled up with app recommendations. Appstle, Notify Me, Appikon, SC Back in Stock, and a suggestion to switch apps entirely. One reply checked with Kbite support directly and confirmed the app cannot put its button in a home page Featured product block, and that the Featured collection equivalent is on a paid plan only.

So the merchant was being told to migrate their back in stock app to solve a button placement problem.

They do not need to. The fix is a five line Custom Liquid block and it takes about two minutes.

## Why apps do not cover the Featured product block

This is worth understanding because it explains why swapping apps mostly does not help.

Back in stock apps inject their widget in one of two ways.

**As an app block**, which the merchant drops into a section through the theme editor. App blocks are only offered inside sections that declare support for them, and most themes only declare it on the main product section.

**As an app embed**, which runs on every page and finds a target element in the DOM. Embeds usually look for the product form on a product page template, so on the home page there is nothing for them to attach to.

The Featured product section on your home page renders a real product, with a real buy button, but it is not the product template. It is a home page section that happens to display a product. Almost no app treats it as a place to put a widget, and that is a decision on the app's side, not something your theme is blocking.

Here is the starting state on Craft. A sold-out product in the Featured product block, no notify button anywhere.

![No notify button in the home Featured product block](/images/blog/shopify-back-in-stock-notification/01-no-notify-button-featured-product.png)

## The fix: link to the product page, where the app already works

The key realisation is that you do not need the app's form on the home page. You need a way for the visitor to reach the form.

Your back in stock app already works perfectly on the product page. So the home page needs one thing: a button that appears only when the item is sold out, and that takes the visitor to the product page where the form lives.

That is a link, not an integration, and Shopify gives you the tools to add it for free.

### Step 1: open the Featured product section

In your admin, go to **Online Store**, then **Themes**. On your theme, click **Customize**.

Make sure you are on the **Home page** in the top page selector. In the left sidebar, click your **Featured product** section.

### Step 2: add a Custom Liquid block

Click **Add block**, and under **Blocks** choose **Custom Liquid**.

![Add block, then Custom Liquid](/images/blog/shopify-back-in-stock-notification/02-add-block-then-custom-liquid.png)

Custom Liquid is a free, built-in block available in every Online Store 2.0 theme. It is not an app and it does not require the code editor.

### Step 3: paste the code

Paste this into the Liquid code box:

```liquid
{%- assign np = section.settings.product -%}
{%- if np != blank and np.available == false -%}
  <a href="{{ np.url }}" class="button button--full-width" style="margin-top: 1rem;">
    Notify me when available
  </a>
{%- endif -%}
```

![Paste the code, then Save](/images/blog/shopify-back-in-stock-notification/03-paste-the-code-then-save.jpeg)

Four things are happening here, and they are worth reading because they are what makes the block safe to leave in place forever.

`section.settings.product` reads whichever product is currently selected in that Featured product section. You never hardcode a product handle, so when you swap the featured product the button follows it.

`np.available == false` is Shopify's own sold-out check. It is true only when every variant of the product is out of stock and not set to continue selling. That is the same logic your theme uses to draw the Sold out label.

`np.url` is the product's own URL, so the button always points at the right page.

The `button button--full-width` classes are Dawn and Craft's own button styling, so the button matches the rest of your theme without any CSS of your own. If your theme is not Dawn-derived, check what your theme calls its button class and swap it in.

### Step 4: position it and save

Drag the Custom Liquid block so it sits just under **Buy buttons**, then click **Save**.

Position matters more than it looks. Under the buy button is where a visitor's eye already is when they read Sold out, so that is where the alternative belongs.

Here it is live.

![Notify button live in the Featured product block](/images/blog/shopify-back-in-stock-notification/04-notify-button-live.png)

The button shows only when the item is sold out. Restock the product and it disappears on its own, with no further edits.

## Making it feel like one step instead of two

The basic version sends the visitor to the product page and lets them find the app's form. On a long product page that can mean scrolling.

If your back in stock app renders its trigger with a predictable anchor, you can deep link straight to it by appending a fragment:

```liquid
<a href="{{ np.url }}#notify-me" class="button button--full-width">
  Notify me when available
</a>
```

Inspect the app's button on your product page, find its `id`, and use that. If it does not have one, skip this and leave the plain link; it works fine either way.

A second refinement worth having: some apps open their form from a query parameter. If yours does, `{{ np.url }}?notify=1` will open the modal on arrival. Check your app's documentation for the parameter name.

## Where else this same block works

The pattern generalises, because the only theme-specific parts are the setting name and the button class.

**In a Featured collection section**, loop the products instead of reading one:

```liquid
{%- for p in section.settings.collection.products -%}
  {%- if p.available == false -%}
    <a href="{{ p.url }}" class="button">Notify me: {{ p.title }}</a>
  {%- endif -%}
{%- endfor -%}
```

**On a custom landing page**, use a Custom Liquid section rather than a block, and reference the product by handle:

```liquid
{%- assign np = all_products['your-product-handle'] -%}
{%- if np.available == false -%}
  <a href="{{ np.url }}" class="button">Notify me when available</a>
{%- endif -%}
```

**On the product page itself**, you do not need this at all. That is where your app already works.

## Common questions

**Does this replace my back in stock app?**

No, and it is not trying to. The app still collects the email address, still sends the restock alert, and still owns the whole notification flow. This block only fixes where the entry point appears.

**Will the button show if only one size is sold out?**

No. `product.available` is false only when the whole product is unavailable. If size medium is out but small is in stock, the product is still available and the button stays hidden, which is correct: the visitor can buy something.

If you want per-variant behaviour on the home page, that is genuinely harder, because the Featured product block does not track variant selection the way the product template does. Send them to the product page in that case.

**What if I sell products that continue selling when out of stock?**

Then `available` stays true and the button never shows, which again is correct. A product taking orders at zero inventory does not need a notify me button, it needs an add to cart button, and it already has one.

**My theme is not Craft. Will this work?**

Yes, on any Online Store 2.0 theme, which is every free Shopify theme and nearly every paid one from the last several years. The only thing to check is the button class. Look at an existing button in your theme's code and copy its classes.

**Does this slow the page down?**

No. It is Liquid, so it renders server side into the HTML. There is no JavaScript, no network request, and no app involved.

**Can I change the wording?**

Yes, edit the text between the anchor tags. "Email me when it is back", "Join the waitlist", and "Notify me when available" all test fine. Match whatever your app's form says so the visitor is not surprised on arrival.

## If it did not work

**The button does not appear on a sold-out product.** Check the section actually has a product selected in its settings. If `section.settings.product` is blank, the whole block is skipped by design.

**The button appears on an in-stock product.** Check whether that product has "Continue selling when out of stock" enabled on a variant, which keeps `available` true.

**The button looks unstyled.** Your theme uses different button classes. Inspect an existing button on your storefront, copy its class list, and replace `button button--full-width`.

**There is no Custom Liquid option under Add block.** The section does not accept blocks of that type. Add a Custom Liquid **section** immediately below the Featured product section instead, and reference the product by handle as shown above.

## Why this is worth doing rather than switching apps

Migrating a back in stock app means re-collecting existing subscribers, re-theming the form, and re-testing the restock email. That is real work, and in this thread it was being proposed to solve the placement of one button.

The Custom Liquid block costs two minutes, adds no monthly fee, survives theme updates, and keeps the app you already know works. When the choice is between changing a vendor and adding five lines of Liquid, the five lines are usually the smaller risk.

## Tested on

Built and verified on a Craft theme store: added the Custom Liquid block to a Featured product section, confirmed the button renders only while the product is unavailable, confirmed it disappears when stock is added back, and confirmed the link lands on the product page where the notify form is.


---

---
title: "Shopify Barcode Generator: Turn a Number Into a Barcode"
description: Shopify stores a barcode number but never renders the barcode image, and the number alone does not tell you the format. Here is how to identify the symbology and generate a printable barcode for free.
---

## The problem

A merchant on the Shopify Community was handed an 8 digit number and told it was a "Shopify barcode number". They needed the actual barcode, the scannable image, and could not find anywhere in Shopify to produce one.

They were not missing a menu. **Shopify stores a barcode value but never generates a barcode image from it.** The field in the admin is a text field. It holds a number so that your own scanner, your POS, and your inventory reports have something to match on. It does not draw anything.

So getting from a number to a printable barcode takes two steps: work out which symbology the number is, then render it.

## The Shopify barcode field is just text

In your admin, the field lives at **Products > select a product > Inventory > Barcode (ISBN, UPC, GTIN, etc.)**.

Two things follow from it being a plain text field.

**Shopify does not validate it.** You can put anything in there. It will not tell you that a 12 digit number is not a valid EAN-13, or that a check digit is wrong.

**Shopify does not render it.** There is no button, no preview, no print action. Shopify POS can scan a barcode into that field, and barcode label apps can print from it, but the core admin does nothing visual with the value.

That is why the merchant could not find the screen. It does not exist.

## The number alone does not tell you the format

This is the part that turns a simple question into a real one, and it is why the thread went back and forth.

Different symbologies accept overlapping lengths. An 8 digit number could be:

- **EAN-8**, a genuine compact retail barcode with a check digit
- **Code 128**, which accepts any length and any ASCII character
- **Code 39**, same
- An internal SKU that is not a retail barcode at all

You cannot tell which by looking. And it matters, because scanning behaviour differs. An EAN-8 scanned at a supermarket checkout resolves to a product in a global registry. A Code 128 with the same digits does not; it is just a string your own systems understand.

There is one useful clue. **Shopify's own barcode generation, in POS and in most label apps, produces Code 128 by default.** So a number described as "a Shopify barcode" is more likely Code 128 than a retail GTIN. That is a guess, not a fact, and it is worth confirming with whoever produced it.

## The symbologies worth knowing

Eleven formats cover essentially everything a store encounters:

**CODE 128** is general purpose. It supports the full ASCII character set and any length, and it is dense. This is the correct default for internal use: warehouse labels, bin locations, internal SKUs.

**EAN-13** is international retail, 13 digits. This is a real GTIN and it is what a supermarket scanner expects outside North America.

**EAN-8** is the compact retail version, 8 digits, used on small packaging where EAN-13 will not fit.

**UPC-A** is US and Canada retail, 12 digits. The North American equivalent of EAN-13.

**CODE 39** is alphanumeric: letters, digits, and a few symbols. Older, less dense than Code 128, still common in automotive and defence.

**ITF-14** goes on shipping cartons, 14 digits. Encodes the case-level GTIN rather than the unit.

**MSI** is digits only, used for inventory and shelf labels in some retail systems.

**DataMatrix** is a 2D matrix. Very high density in a small square, which is why it ends up on tiny electronic components and pharmaceutical packs.

**PDF417** is 2D and stores a lot: it is what is on the back of a driving licence and on many shipping labels.

**Pharmacode** is a pharmaceutical packaging control code, read at high speed on a production line.

**Codabar** is used by libraries, blood banks, and airbills. Legacy but still in service.

For a Shopify store, three of these matter. **Code 128** for anything internal. **EAN-13 or UPC-A** if you sell through retail channels and need a registered GTIN.

## Generating the barcode

I built a free tool for exactly this, because the answer to "I have a number, I need the image" should not be a paid app.

![The barcode generator: enter the value, choose the symbology, get a downloadable image](/images/blog/shopify-barcode-generator/01-barcode-generator-tool.png)

Enter your barcode value, choose the type, and it renders the barcode image for you to download and print.

**[Open the barcode generator](/tools/barcode-generator)**

It runs in your browser, so the value never leaves your machine, and there is no account or sign-up. If your number is a valid EAN-13 or UPC-A the check digit is handled for you; if it is not valid for the format you picked, you will see that immediately, which is itself the fastest way to identify what format a mystery number actually is.

That is the trick for the merchant's situation: **try the number as EAN-8. If it validates, it is probably a real EAN-8. If it does not, it is Code 128 or an internal SKU.**

## Do you need a registered GTIN?

Worth answering directly, because it is the more consequential question hiding behind "how do I make a barcode".

**If you only sell through your own store**, you do not need a registered barcode at all. Generate Code 128 from your own SKU and use it for picking, packing, and stocktakes. It is never scanned outside your business.

**If you sell through retail**, physical shops or marketplaces, you almost certainly need a real GTIN, which means EAN-13 or UPC-A registered with GS1. A retailer's POS looks the number up in a global registry; a self-generated Code 128 resolves to nothing and will be rejected at onboarding.

**If you sell on marketplaces**, Amazon, Google Shopping and others require a GTIN for most categories. Google Merchant Center in particular will disapprove products with an invalid or self-invented GTIN, and it validates check digits.

This is the distinction to get right. A barcode you generated yourself is scannable, and that feels like success. Whether it is *meaningful* to anyone else is a separate question, and the answer is usually no.

## Getting barcodes onto your products

Once you have values, three ways to get them into Shopify.

**One at a time**, in the product's Inventory section. Fine for a handful.

**Bulk edit.** From Products, select the products, click **Bulk edit**, and add the **Barcodes** column through the Columns picker. One row per variant. This is the right tool for a few hundred, though the cell changed in 2026 and no longer behaves like a plain text box. See the scanning section below.

**CSV import.** Export your products, fill in the `Variant Barcode` column, and import the file back. Right for thousands, and it gives you a record of what you set.

Remember that barcode, like SKU and price, lives on the **variant**, not the product. A product with five sizes needs five barcodes, and each retail size legitimately has its own GTIN.

## Scanning barcodes straight in

If you are holding a scanner rather than typing, this section is the one you want. Shopify changed barcode entry in 2026 and it broke the oldest workflow in retail.

A barcode scanner is just a keyboard. It types the digits and then presses a key. The whole receiving workflow depends on that key moving you to the next row, so you can beep an entire delivery in without touching the mouse.

Shopify added support for multiple barcodes per variant, which is genuinely useful. The cost was that the barcode field stopped being a plain text box and became a small popup. Scan and advance stopped working, and a lot of merchants noticed within a day.

Here is how to get it back.

### On a single variant, you do not have to pick a type

Open a variant and click **Barcodes**. The box opens with the cursor already in it and the type already set to **Custom**.

![The Shopify variant screen with the Barcodes box open, cursor in the field and the type already set to Custom](/images/blog/shopify-barcode-generator/10-variant-barcode-box-custom-type.png)

You can scan straight in. Choosing UPC or EAN is optional, not a gate. That trips people up because the field looks like it is asking you to choose a format first.

### In the bulk editor, four keys do the whole loop

Select your variants and click **Bulk edit**. Open **Columns** and tick **Barcodes**.

![The Shopify bulk editor Columns picker with Barcodes ticked](/images/blog/shopify-barcode-generator/11-bulk-editor-barcodes-column.png)

Leave it as the only extra column. This matters: with one extra column, Tab moves you down to the next row. With several, Tab moves sideways through the columns first.

Click the first Barcodes cell. The popup opens with the cursor already in it.

![The Barcodes cell in the Shopify bulk editor, open as a small popup with the cursor in the field](/images/blog/shopify-barcode-generator/12-bulk-editor-cell-popover.png)

Then repeat this loop down the list:

![The keyboard loop: scan, then Esc, then Tab, then Enter, repeated down the list](/images/blog/shopify-barcode-generator/13-scan-esc-tab-enter-loop.png)

- **Scan.** The value goes in.
- **Esc.** Closes the popup and keeps the value.
- **Tab.** Moves down to the next row.
- **Enter.** Opens that row's popup with the cursor ready.

Save once at the end, not per row.

### Put the loop into the scanner itself

Most 2D scanners can send a programmable suffix, which is a key sequence sent automatically after every scan.

Program **Esc Tab Enter** as the suffix and you are back to one beep per item, with no keyboard work at all. Zebra scanners do this through 123Scan, Honeywell through EZConfig, and most others through the barcode sheet in the manual.

This is the closest thing to the old behaviour, and it is worth the ten minutes of setup if you receive stock regularly.

## Common questions

**Why can I no longer paste a column of barcodes in the bulk editor?**

Because the Barcodes cell is a popup now rather than a plain text cell, which is a side effect of Shopify supporting several barcodes per variant. Use the keyboard loop above, or a CSV import if you are pasting from a spreadsheet.

**Can Shopify print barcode labels?**

Not from the core admin. Shopify POS can print labels with compatible hardware, and there are label apps that read the barcode field and lay out sheets. The barcode field itself is only storage.

**What if I have no barcode at all?**

For internal use, generate Code 128 from your existing SKU. It is the least friction and it means your barcode and your SKU are the same string, which makes stocktakes simpler.

**Is the Shopify barcode field the same as SKU?**

No, and keeping them distinct is worth the discipline. SKU is your internal identifier. Barcode is what a scanner reads. They can hold the same value, but the fields feed different reports and different integrations.

**Can two variants share a barcode?**

Shopify allows it, but do not. Scanning becomes ambiguous, and marketplaces reject duplicate GTINs.

**Does the barcode field affect my storefront?**

No. It is admin and integration data only, not rendered to customers.

**How do I check whether an existing number is a valid GTIN?**

The last digit of EAN-13, EAN-8 and UPC-A is a check digit computed from the others. Run the number through the generator as that format; if the check digit does not match, it is not a valid GTIN for that symbology.

## If it did not work

**The generator rejects your number for the format you picked.** That is the tool telling you the number is not valid for that symbology, usually a length or check-digit mismatch. Try Code 128, which accepts anything.

**Your scanner reads nothing.** Print size and quiet zone. A barcode needs blank margin either side, and printing too small breaks the minimum bar width. Print larger and leave white space.

**The POS scans the barcode but finds no product.** The value in the label does not exactly match the value in the Barcode field. Check for a leading zero or trailing space, which is the usual cause.

**Marketplace rejects your GTIN.** It is self-generated. Marketplaces validate against the GS1 registry, and there is no way around registering.

## Tested on

The symbology list and check-digit behaviour were verified against the generator itself. The Shopify side, that the Barcode field is plain text with no validation and no rendering, was confirmed on a dev store by entering an invalid GTIN and saving it without complaint.


---

---
title: "Shopify BOGO: Buy One Get One, Free and Tested"
description: "BOGO is not its own discount type. It is Buy X Get Y pointed at the same product, and the percentage decides whether the second one is free or half price. Tested at checkout."
---

## The problem

BOGO is the oldest promotion in retail. Buy one, get one free. Buy one, get one half price.

Shopify's Discounts page does not have a BOGO option, so merchants assume they need an app. Search the App Store for BOGO and you will find plenty of them, several charging monthly.

You do not need one for a straightforward BOGO. It is built in, it is free, and it takes about two minutes. I set one up on a test store and pushed a real cart through checkout to confirm the numbers.

## BOGO is Buy X Get Y

The discount type you want is **Buy X get Y**. What makes it a BOGO rather than a bundle is a small thing: you put the **same product** in both the "buys" and the "gets" side.

- Same product in X and Y = **BOGO**
- Different products in X and Y = **a bundle**

That is the whole trick. Everything else is the percentage.

## Setting it up

Go to **Discounts → Create discount → Buy X get Y**. Choose **Automatic discount** so shoppers do not need a code.

The Discounts page is the list of every offer on your store. Create discount is top right.

![The Discounts page in the Shopify admin, with the Create discount button top right and a list showing each discount's method and type](/images/blog/shopify-bogo/02-discounts-list-create-discount.png)

**Customer buys**

- Choose **Minimum quantity of items** and set it to **1**
- Add the product (or collection) the promotion covers

**Customer gets**

- Quantity **1**
- Add the **same** product or collection
- **At a discounted value**, choose **Percentage** and set it

The percentage is the whole promotion:

| You want | Set the percentage to |
|---|---|
| Buy one, get one **free** | 100% |
| Buy one, get one **half price** | 50% |
| Buy one, get one 25% off | 25% |

**Maximum number of uses per order**

Set this to **1**.

Skip it and a shopper who adds six tees gets three of them discounted, because Shopify applies the rule as many times as the cart allows. That is occasionally what you want. It is usually a surprise.

## What it looks like at checkout

I built "buy one tee, get one at 50% off" and put two tees in a cart. Both cost Rs. 40.00.

![Shopify checkout showing the cotton tee twice, once at 40.00 labelled BOGO 50% OFF TEES and once reduced from 40.00 to 20.00, with a subtotal of 60.00 and total savings of 20.00](/images/blog/shopify-bogo/01-bogo-50-at-checkout.png)

- First tee: **Rs. 40.00**, labelled "BOGO 50% OFF TEES"
- Second tee: **Rs. 40.00 struck through, Rs. 20.00**, labelled "BOGO 50% OFF TEES (-Rs. 20.00)"
- Subtotal **Rs. 60.00**, total savings **Rs. 20.00**

Notice what Shopify did to the display. The cart had **one line with a quantity of two**. Checkout **split it into two rows** so the shopper can see which unit paid full price and which was discounted.

That is a good default and worth knowing about, because it means BOGO reads clearly to the customer without you doing anything. It also means your order will show two lines where you might have expected one.

## Buy one get one free

Same setup, percentage set to **100%** instead of 50%. The second unit shows as **FREE** rather than a reduced figure.

One thing to decide before you launch: with 100% off, a shopper who adds only **one** item gets no discount and no explanation. The promotion needs two in the cart to do anything. A line on the product page saying "buy one get one free" earns its place here, and that is [showing a discount on the product page](/blog/shopify-show-discount-on-product-page).

## Buy 2 get 1 free, and other shapes

The same discount type covers the whole family. Change the numbers:

| Promotion | Customer buys | Customer gets |
|---|---|---|
| Buy one get one free | 1 | 1 at 100% |
| Buy one get one half price | 1 | 1 at 50% |
| Buy 2 get 1 free | 2 | 1 at 100% |
| Buy 3 get 2 half price | 3 | 2 at 50% |

For "buy 2 get 1 free" the shopper needs three in the cart, not two. The "buys" quantity is items they pay for; the "gets" quantity is on top.

## Across a collection instead of one product

Put a **collection** in both sides rather than a product and you get "buy any tee, get any tee half price".

Shopify discounts the **cheapest** eligible item, which is the sane default and also the one to think about. A shopper mixing a Rs. 90 item and a Rs. 40 item gets the Rs. 40 one discounted. If your collection spans a wide price range, that is either fine or expensive, depending on your margins.

To keep the promotion sane, either scope the collection tightly or use a collection built from a tag so you control exactly what qualifies.

## Mixing BOGO with other discounts

By default a BOGO refuses to run alongside anything else, so a shopper with a code will find one of the two dropped, with no message saying which.

If you want the BOGO to stack with, say, a free shipping code, you have to tick the boxes on **both** discounts, not just one. That mechanism is [discount combinations](/blog/shopify-discount-combinations), and the "both sides" rule is the part most people miss.

For a BOGO specifically, think hard before allowing it. A 50%-off-second-item promotion stacked with a 20% code is a bigger giveaway than most margins survive.

## BOGO after Shopify Scripts

If you have been running BOGO through Shopify Scripts, that path has been retired, and merchants have been rebuilding these offers on the native discount engine.

The good news is that the plain shapes above all migrate directly, with no code and no app. Buy X Get Y covers buy-one-get-one, buy-2-get-1, tiered variants and collection-wide versions.

What does not migrate as cleanly is anything conditional: a BOGO that depends on the customer, the cart total, or a rule Shopify does not model. That is what **Shopify Functions** are for now, and a Function needs an app to deploy it. If you were running a custom Script, budget for a Function rather than hoping a checkbox covers it.

## When you do need an app

Native Buy X Get Y covers the promotion. What it does not do is the **shop window**:

- Telling the shopper on the product page that a BOGO exists
- Adding the second item to the cart for them
- A picker when the free item can be one of several
- A progress message like "add one more to get 50% off"

Those are presentation, and that is what BOGO apps are really selling. The discount underneath is the same free native one.

Before you pay for an app, be clear which of those you actually need. The product page notice is a Custom Liquid block. A Custom Liquid block is an empty box in the theme editor where you paste your own code. The rest is fiddly and an app may be worth it.

## Common problems

**Too many items are being discounted.** Set **Maximum number of uses per order** to 1.

**Nothing is discounted.** Check the cart actually has enough items. Buy 1 get 1 needs two in the cart, and buy 2 get 1 needs three.

**The wrong item is discounted.** With a collection on both sides, Shopify picks the cheapest eligible item. Narrow the collection.

**It stopped working when a customer used a code.** Two discounts do not combine by default. One is dropped, without a message.

**The customer expected the free item to appear on its own.** It does not. Buy X Get Y makes an item cheap once it is in the cart; it never adds anything. Gifts behave the same way, covered in [free gift with purchase](/blog/shopify-free-gift-with-purchase).

**One line became two at checkout.** That is deliberate, so the shopper can see which unit was discounted.

## Does BOGO work in store?

A Buy X Get Y automatic discount can apply at a till, but only if you turn it on and only on the paid POS tier.

Open the discount, find **Eligibility**, and tick **Apply on POS Pro locations**. The Details panel on the right then changes from "POS excluded" to "POS Pro included". Left alone, an automatic discount you built for the website will not fire in the shop, which is often exactly what you want for an online-only promotion.

The full map of which POS control does what is in [Shopify POS discount code](/blog/shopify-pos-discount-code).

## Seeing what it cost you

Once the promotion has run, the number you want is not "how many BOGOs" but "how much did I give away".

On the discount page, the **Performance** panel shows uses. For the money, follow **View the sales by discount report**, which breaks orders down by discount and gives you the total discounted amount.

Two things to watch when you read it. A BOGO discounts the cheapest eligible item, so on a wide collection your average giveaway will be lower than the headline percentage suggests. And if you allowed the BOGO to combine with anything else, the report attributes each discount separately, so you have to add them up to see what an order really cost you.

Set an **end date** on the discount when you create it. A BOGO left running past the campaign is the most expensive kind of forgotten setting, and the Active dates section takes ten seconds.

## The main points
- BOGO is not a discount type. It is **Buy X get Y** with the **same product on both sides**.
- The **percentage** decides the flavour: 100% for free, 50% for half price.
- **Set maximum uses per order to 1** or a big cart earns several.
- Verified at checkout: two Rs. 40.00 tees came out as Rs. 40.00 + Rs. 20.00, subtotal Rs. 60.00, savings Rs. 20.00.
- Checkout **splits one line into two** so the discounted unit is visible.
- On a collection, Shopify discounts the **cheapest** eligible item.
- It will not combine with other discounts unless both sides allow it, and it will never add the second item to the cart for the shopper.


---

---
title: "Bold the Variant Option Name in a Shopify Theme (CSS)"
---

## The problem

A merchant asked this on the Shopify Community. They are new to Shopify, they like the Horizon theme, and they want the variant option name above their dropdown to be bold.

In their case the option was called "Font Selection", sitting above a dropdown that read "no personalization". They wanted that label to stand out.

This is a small, purely visual change. There is no theme setting for it, so it takes one line of CSS. Here is exactly where it goes, why the usual answer only half works, and a version that keeps working no matter how your variant picker is set up. I reproduced all of it on a Horizon store.

## What "variant option name" means

Every product with options shows those options on the product page. The **option name** is the label, like "Size", "Color", or "Font Selection". The **option value** is what the customer picks, like "Large" or "no personalization".

The merchant wanted the **name** bold, not the value. So "Font Selection" in bold, with the dropdown underneath left as it is.

"Font Selection" is not a special Shopify feature, by the way. It is just the name this merchant gave their own option. The fix below bolds whatever your option is called.

## Why there is no setting for it

Horizon is Shopify's newer free theme family, and it is built from theme blocks. The variant picker is one of those blocks. Open its settings in the theme editor and you can change the option label **color**, the picker style, alignment, and padding.

What you cannot change there is the font weight of the option name. There is simply no "bold" toggle in the block. That is why a text answer on the forum reaches for CSS instead of a setting. It is not that anyone is overcomplicating it, the control does not exist in the UI.

So the clean fix is a single CSS rule, added to the theme's stylesheet.

## The one-line fix for a dropdown

If your option shows as a dropdown, its name is rendered inside a `label` element. This bolds it:

```css
.variant-option--dropdowns > label {
  font-weight: 700;
}
```

`700` is bold. If that feels too heavy, use `600` for a lighter, semibold look.

Here is the option name before, at normal weight:

![Before: the dropdown option name is at normal weight](/images/blog/shopify-bold-variant-option-name/01-variant-name-normal.png)

And after adding the rule, the same option name in bold, with the dropdown and any other fields untouched:

![After: the dropdown option name is bold](/images/blog/shopify-bold-variant-option-name/02-variant-name-bold.png)

## Where to paste it

You add the CSS to the theme's main stylesheet, `base.css`. Do not edit any Liquid.

- From your Shopify admin, go to **Online Store > Themes**.
- Find your theme, click the `...` menu, and choose **Edit code**.
- In the file list on the left, open **assets/base.css**.
- Scroll to the very bottom of the file and paste the rule there.
- Click **Save**.

![Open Edit code, then assets/base.css, and paste the rule at the bottom](/images/blog/shopify-bold-variant-option-name/03-edit-base-css.jpeg)

Putting it at the bottom means it loads last, so your rule wins over the theme's default without any special tricks. Refresh a product page and the option name will be bold.

You do not need to understand the rest of `base.css` to do this safely. You are only adding a new rule at the end, not changing anything above it, so there is no risk of breaking existing styles. If you ever want to undo the change, just delete the lines you pasted and save again.

## The catch: buttons vs dropdowns

Here is where the common forum answer only half works.

The rule above targets `label`, and that only matches when the option is shown as a **dropdown**. Horizon can also show options as **buttons, pills, or swatches**. In those styles the option name is not a `label`, it is a `legend`. So if you have buttons and you paste the dropdown-only rule, nothing changes and it looks like the fix failed.

To bold the option name no matter which style you use, target all three cases at once:

```css
.variant-option--dropdowns > label,
.variant-option--buttons legend,
.variant-option[data-testid='variant-option-single'] {
  font-weight: 700;
}
```

This covers the dropdown label, the button and swatch legend, and the single-value case. It is the version I would paste, because it keeps working if you switch the picker style later in the theme editor.

## How to tell which style you have

If you are not sure whether your options are dropdowns or buttons, look at the product page.

- A small box with a downward arrow that opens a list is a **dropdown**.
- Tappable boxes or colored circles shown all at once are **buttons or swatches**.

Or open the variant picker block in the theme editor and check its "Style" setting. Either way, the combined rule above handles both, so you do not have to get this exactly right.

## Should you use 600 or 700?

`font-weight: 700` is the standard "bold". `600` is "semibold", a little lighter.

Which looks better depends on the font your theme uses. Some fonts render 700 quite heavy. If bold looks too strong next to the rest of your product page, drop to 600. It is a one-character change, so try both and keep the one you like.

You can also go the other way. If you want the option name larger as well as bold, add a font size:

```css
.variant-option--dropdowns > label {
  font-weight: 700;
  font-size: 1.05rem;
}
```

Keep the size change small. A big jump here can push your dropdowns around and unbalance the page.

## Will a theme update remove it?

Editing `base.css` is a direct change to a theme file. If you later update Horizon to a new version, that update can replace `base.css` and your rule would go with it. Nothing breaks, the bold just disappears, and you paste the rule back in.

If you want the change to survive updates more cleanly, some merchants keep all their custom CSS in one place and re-apply it after an update. For a single rule like this, it is usually simplest to just remember it is there. Keep a copy of the snippet somewhere so re-adding it takes ten seconds.

## What if it did not work?

If you pasted the rule and the name is still not bold, run through these.

- **You have buttons, not dropdowns.** This is the most common reason. Use the combined rule above that also targets `legend`.
- **You bolded the wrong text.** The rule bolds the option **name**, not the selected value inside the dropdown. The value lives in the native `select`, and browsers limit how much you can style that. If you meant the value, that is a separate and much more limited job.
- **A caching layer is serving the old file.** Right after saving, do a hard refresh, or view the product page in a private window.
- **Another app is injecting its own variant picker.** Some product-option apps replace Shopify's picker entirely with their own markup. If that is the case, the classes above will not match, and you would style the app's elements instead. Inspect the option name in your browser to see the real class it uses.

## Doing the same on Dawn or an older theme

The idea carries over to other themes, only the class names change. Horizon uses `variant-option--dropdowns`. Dawn and its relatives use different names, often something like `variant-input-wrap` or a `legend` and `label` inside a fieldset.

The reliable way to find the right selector on any theme is to inspect the element:

- On the product page, right-click the option name and choose **Inspect**.
- In the panel that opens, the highlighted line is the element you want.
- Read the `class` on that element, and on its `label` or `legend`.
- Write your rule against that class, then paste it at the bottom of the theme's main CSS file.

The theme changes, the method does not: find the element that holds the option name, then set `font-weight` on it.

## Bolding the name on one product only

Sometimes you want the bold treatment on a single product, not the whole store. CSS alone cannot target one product by name, because the option markup looks the same everywhere.

The common approach is to scope the rule to the product template or a body class the theme adds, or to add the product's own section wrapper to the selector. If you only have a handful of products that need it, it is often simpler to accept the change site-wide, since a bold option name reads fine on every product. Decide based on how consistent you want the look to be.

## The short version

There is no bold toggle for the variant option name in Horizon, so it takes one line of CSS in `assets/base.css`.

For a dropdown, use `.variant-option--dropdowns > label { font-weight: 700 }`. To cover buttons and swatches too, add `.variant-option--buttons legend` and the single-option selector to the same rule. Use `700` for bold or `600` for semibold, and keep a copy of the snippet in case a theme update clears it.


---

---
title: Show a Brand Logo on Shopify Product Pages by Vendor
description: Show the right brand logo next to the vendor name on every Shopify product page. One logo per brand, no code edits when you add a brand. Tested on the Enterprise theme.
---

## The problem

A store owner selling car parts from many brands wanted a small brand logo above the part number on each product page. The logo had to change with the brand. A product from one brand shows that brand's logo, and a product from another brand shows its own.

The store runs the Enterprise theme. The owner had already looked for an app and found nothing that did this, so they assumed it needed code. That is mostly right. Shopify has no setting that says "show a logo for this vendor". It takes a short piece of code and a one-time setup.

I reproduced it on a test store with the Enterprise theme installed. Here is a product page before the change. The vendor name is plain text above the product title.

![Enterprise product page showing only the vendor name in text above the title](/images/blog/shopify-brand-logo-product-page/01-before-vendor-name-only.png)

And here it is after. The brand logo sits above the vendor name, and it changes for every brand.

![Enterprise product page showing the brand logo above the vendor name](/images/blog/shopify-brand-logo-product-page/02-after-logo-above-vendor.png)

The setup below takes about ten minutes. Adding a new brand later takes one minute and no code.

## Why the vendor field cannot hold a logo

Every Shopify product has a **Vendor** field. It is a single line of text, usually the brand or supplier name. Themes print that text on the product page, in collection filters and in search results.

Because it is only text, you cannot attach a picture to it. There is no logo upload next to the field.

So the job has two parts:

1. Store each logo somewhere, once, next to the brand name it belongs to.
2. Tell the theme: "look at this product's vendor, find that brand's logo and show it".

Shopify has a tool for part one called a **metaobject**. A metaobject is a reusable record you fill in once. Here the record is a brand, and it has two fields: a name and a logo. Part two is a small box of code in the theme editor.

## Two ways to do it

There are two common answers to this question.

**The case and when list.** You write one line of code per brand in the theme. Each line says "if the vendor is this, show this image file". It works, and it is quick for three or four brands. Every new brand means opening the theme code, adding a line and uploading the image. A store with 40 brands ends up with a long block of code that is easy to break.

**One record per brand.** You create a Brand record for each brand in your admin, with the logo attached. The code in your theme stays the same forever. It finds the right record by matching the brand name to the vendor name. A new brand is a new record and nothing else.

I recommend the second one, and the rest of this article uses it. It is also the better choice for a parts store, where the brand list keeps growing.

## Before you start

Check three things.

- **Your vendor names are spelled the same on every product.** "BMW" on one product and "B.M.W." on another count as two different brands. Open **Products**, add the **Vendor** column and scan it. The setup below matches names exactly, apart from capital letters and spaces.
- **You have the logos ready.** Square or wide images both work. A PNG with a clear background looks best on any color. About 300 pixels wide is plenty, because the logo shows at 120 pixels.
- **Your theme has a Custom Liquid block on the product page.** A Custom Liquid block is a box in the theme editor where you paste code. Enterprise has it. Most current Shopify themes do too.

## Step 1: Create the Brand record type

Go to **Content** > **Metaobjects**. This is where Shopify keeps your custom record types. Click **Add definition**.

![Shopify Metaobjects page with the Add definition button highlighted](/images/blog/shopify-brand-logo-product-page/03-metaobjects-add-definition.png)

On the next screen, name the definition **Brand**. Then add two fields.

- **Name**, with the type set to a single line of text.
- **Logo**, with the type set to a file. Limit it to images.

Leave the other options as they are. In particular, leave **Storefronts API access** switched on. The theme needs that to read the record. Click **Save**.

![The Add metaobject definition screen with the name and fields to fill in](/images/blog/shopify-brand-logo-product-page/04-add-metaobject-definition.png)

## Step 2: Add one entry per brand

Back on the Metaobjects page, open **Brand** and click **Add entry**. Do this once for each brand you sell.

Type the brand name exactly as it appears in the product's **Vendor** field. Then click **Add** under **Logo** and pick the logo file. Click **Save**.

![A Brand entry with the name field and the logo attached](/images/blog/shopify-brand-logo-product-page/05-brand-entry.png)

Shopify creates a short web-address name for the entry from the brand name. It is lowercase, with dashes instead of spaces. "Snowboard Vendor" becomes `snowboard-vendor`. The code matches on this name, and that is why the spelling has to line up with the vendor.

You do not need to link any products to the entry. The theme finds the entry from the vendor name on its own. That means you can set up all your brands without opening a single product.

## Step 3: Add the code to the product page

Go to **Online Store** > **Themes** and click **Customize** on your theme. Open a product page from the page picker at the top.

In the left menu, click **Product**. This is the main product section. Click **Add block**, then choose **Custom Liquid**.

![The Add block list in the Enterprise theme editor with Custom Liquid highlighted](/images/blog/shopify-brand-logo-product-page/06-add-block-custom-liquid.jpeg)

On the Enterprise theme the new block lands at the top of the list, which puts the logo above the vendor name. If your theme adds it at the bottom, drag the block up the list to where you want it.

Paste this code into the box.

```liquid
{% assign brand_handle = product.vendor | handleize %}
{% assign brand = shop.metaobjects.brand[brand_handle] %}
{% if brand.logo != blank %}
  <img src="{{ brand.logo.value | image_url: width: 300 }}" alt="{{ product.vendor }}" style="display:block;width:120px;height:auto;margin-bottom:8px">
{% endif %}
```

![The Custom Liquid box in the theme editor with the code pasted in](/images/blog/shopify-brand-logo-product-page/07-paste-the-code.jpeg)

Here is what each line does, in plain words.

- The first line takes the product's vendor name and turns it into the short web-address form, with lowercase letters and dashes.
- The second line looks up the Brand entry with that name.
- The third line checks that the entry has a logo. If it does not, nothing shows and the page looks the same as before.
- The fourth line shows the logo at 120 pixels wide. Change `120px` to make it bigger or smaller.

Click **Save** in the top right.

![The Save button in the top right of the theme editor](/images/blog/shopify-brand-logo-product-page/08-save.png)

## What I saw on the live page

The theme editor preview is not the same as the real page, so I also loaded a product on the storefront itself. The page contained the image tag with the right brand logo, and the image address pointed at the logo I had uploaded. A product whose vendor had no Brand entry showed no logo and no empty space.

## Make the logo link to the brand's products

A logo shoppers can click is more useful. Shopify has a built-in page that lists every product from one vendor. Its address looks like this:

`/collections/vendors?q=Snowboard%20Vendor`

You can wrap the logo in a link to that page. Replace the code in the Custom Liquid box with this version.

```liquid
{% assign brand_handle = product.vendor | handleize %}
{% assign brand = shop.metaobjects.brand[brand_handle] %}
{% if brand.logo != blank %}
  <a href="{{ product.vendor | url_for_vendor }}">
    <img src="{{ brand.logo.value | image_url: width: 300 }}" alt="{{ product.vendor }}" style="display:block;width:120px;height:auto;margin-bottom:8px">
  </a>
{% endif %}
```

On my test store the link came out as `/collections/vendors?q=Snowboard%20Vendor`, and that page listed the products from that vendor.

This page is the vendor page that some stores call a brand page. It is generated by Shopify, so it takes no setup. If you want a designed page for each brand, with a banner and a description, create a collection for each brand instead and link the logo to that collection.

## Show a logo only for some brands

You do not have to add every brand. A brand with no entry shows no logo. That is useful if only your biggest brands have usable logo files. Add those first and the rest follow whenever you get the files.

## Add a new brand later

1. Open the Brand entries list from step 2 and add a new entry.
2. Type the brand name exactly as it appears in the vendor field.
3. Attach the logo and click **Save**.

The logo shows on every product with that vendor right away. You do not touch the theme.

## If the logo does not show

Work down this list.

- **Is the name spelled the same?** Compare the Brand entry name with the product's Vendor field, letter by letter. Capital letters and spaces do not matter. Punctuation does. "BMW" and "B.M.W." are different.
- **Is Storefronts API access switched on for the Brand definition?** Open the Brand definition, click **Manage definition** and check the toggle.
- **Does the entry have a logo attached?** An entry with only a name shows nothing.
- **Is the block on the right template?** Product pages can use more than one template. If some products use an alternate template, add the block there too. In the theme editor, the template name shows at the top of the page.
- **Did you save in the theme editor?** The preview shows the logo before you save, but the live page does not change until you do.
- **Is the page cached?** Reload the product page with a hard refresh.

## What if your theme has no Custom Liquid block

If your theme only offers Custom Liquid as a whole section, the code is the same. Add a Custom Liquid section on the product page and paste the code there. The section sits below the main product block, so the logo will not be next to the vendor name. If the position matters, a theme with block support is the easier route. For a related example of placing code on a product page, see [how to show metafields on a Shopify product page](/blog/shopify-metafields-product-page).

## The same record for other uses

Once the Brand records exist, you can reuse them. A brand logo strip on the homepage, a brand filter in your menu or a brand story section on a collection page can all read the same records. If you want to understand custom fields better first, see [how to add metafields in Shopify](/blog/shopify-add-metafields).

## The case and when version, if you prefer it

If you only sell three or four brands, a short list also works. It keeps everything in one box of code and needs no Brand records.

```liquid
{% case product.vendor %}
  {% when 'Brand One' %}
    <img src="LOGO-ONE-URL" alt="{{ product.vendor }}" style="width:120px;height:auto">
  {% when 'Brand Two' %}
    <img src="LOGO-TWO-URL" alt="{{ product.vendor }}" style="width:120px;height:auto">
{% endcase %}
```

Replace the two placeholders with the web address of each uploaded logo. You can copy that address from **Content** > **Files**. The catch is the one I mentioned earlier. Each new brand needs a new block of lines in the theme. With a long brand list the Brand records are the cleaner choice.

## Apps for this

I could not find an app that does only this one job. Brand-page and brand-directory apps cover related ground, such as an A-Z list of brands. For a logo next to the vendor name, the setup above is shorter than configuring one of them.

## Summary

- The Vendor field is text, so the logo lives in a Brand record.
- Create the Brand record type once, then one entry per brand with the logo attached.
- Add one Custom Liquid block to the product page with the code above.
- A brand without a logo shows nothing. A new brand is one new entry and no code.


---

---
title: How to Bulk Add Multiple Variants to Cart in Shopify
description: Shopify's variant picker adds one variant per click. Here is a Dawn section that gives every variant its own quantity box, caps specific options, and adds them all in one request.
---

## The problem: one add to cart, one variant

You sell rope by length. Six lengths, one product, six variants.

A customer wants six of the 1m, six of the 2m, and three of the 4m. On a stock Dawn product page that is three separate trips: pick a length, set a quantity, add to cart, go back, repeat.

Most of them will not bother.

This comes up constantly for anything sold in multiples: lengths, sizes in a size run, flavours in a mixed case, components in a kit. A merchant asked about exactly this, wanting customers to select several options at once with a cap of three on one specific option.

The honest starting point: **Shopify's native variant picker cannot do this.** It is built around one variant, one quantity, one add to cart. No theme setting changes that, because it is how the picker is designed rather than how it is configured.

There are two real routes. An app, or replacing the picker with a section that talks to the Cart AJAX API directly. I built the second one on a Dawn test store, and this is it.

![Quantity boxes for every variant, with a cap on one option](/images/blog/shopify-bulk-add-to-cart/01-quantity-per-variant-with-cap.png)

## Why the native picker works this way

Worth a paragraph, because it rules out a lot of dead ends.

Shopify's product form posts a **single** `id` (a variant id) and a single `quantity` to `/cart/add`. One form, one line item. The variant picker's whole job is to decide which variant id goes in that field.

So "select several options" is not a picker setting that is turned off. There is nowhere in that form to put a second variant.

What people try, and why none of it works:

- **Turning on more quantity selectors.** The quantity box applies to the currently selected variant. There is only ever one.
- **A different theme.** Every Theme Store theme uses the same product form contract.
- **Line item properties.** Checkboxes attached to a line item are metadata, not quantities. You get one line item with a note attached, not several priced items with their own stock.

The Cart AJAX API does not have this limitation. `POST /cart/add.js` accepts an `items` array with as many variants and quantities as you like, in one request. That is the door this uses.

## The two routes, briefly

**A bundle or product-options app.** The easiest answer and the right one for most stores. Apps like BOGOS or Easify Custom Product Options render a bundle page with a quantity per variant. No code, and stock and pricing stay correct because the app builds real line items.

Use this if you do not want to maintain Liquid, or if you need per-option pricing rules, conditional logic, or minimums and maximums that vary by customer.

**A custom section.** Free, no recurring cost, no extra scripts, and you own it. The rest of this article is that.

Use it if your requirement is simple, roughly "let people pick quantities across variants and cap one of them", and you are comfortable pasting a section file.

**Duplicate your theme before you start.** Online Store > Themes > ... > Duplicate.

## Step 1: create the section

**Online Store > Themes > ... > Edit code.** Under **Sections**, click **Add a new section**, name it `multi-variant-buy`, and create it.

Delete the placeholder content and paste this in full:

```liquid
{%- style -%}
  .multi-variant-buy { max-width: 480px; margin: 0 auto; }
  .multi-variant-buy__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
  }
  .multi-variant-buy__label { display: flex; flex-direction: column; }
  .multi-variant-buy__qty { width: 4.5rem; text-align: center; }
  .multi-variant-buy__submit { margin-top: 1.5rem; }
  .multi-variant-buy__error {
    color: rgb(var(--color-error, 200, 30, 30));
    margin-top: 0.5rem;
  }
{%- endstyle -%}

<div class="page-width">
  <div class="multi-variant-buy" data-multi-variant-buy data-section-id="{{ section.id }}">
    {%- for variant in product.variants -%}
      {%- liquid
        assign variant_max = section.settings.capped_max
        assign is_capped = false
        for option_value in variant.options
          if option_value == section.settings.capped_option_value
            assign is_capped = true
          endif
        endfor
      -%}
      <div class="multi-variant-buy__row">
        <div class="multi-variant-buy__label">
          <span>{{ variant.title }}</span>
          <small>
            {{ variant.price | money_with_currency }}
            {%- if is_capped %} &middot; max {{ variant_max }}{% endif -%}
          </small>
        </div>
        <input
          type="number"
          class="multi-variant-buy__qty"
          data-variant-id="{{ variant.id }}"
          {% if is_capped %}data-max="{{ variant_max }}" max="{{ variant_max }}"{% endif %}
          min="0"
          value="0"
          {% unless variant.available %}disabled{% endunless %}
        >
      </div>
    {%- endfor -%}

    <button
      type="button"
      class="button button--full-width button--primary multi-variant-buy__submit"
      data-multi-variant-submit
    >
      Add selected to cart
    </button>
    <p class="multi-variant-buy__error" data-multi-variant-error hidden></p>
  </div>
</div>

<script>
  (function () {
    var root = document.querySelector(
      '[data-multi-variant-buy][data-section-id="{{ section.id }}"]'
    );
    if (!root) return;

    var button = root.querySelector('[data-multi-variant-submit]');
    var errorEl = root.querySelector('[data-multi-variant-error]');

    root.querySelectorAll('.multi-variant-buy__qty').forEach(function (input) {
      input.addEventListener('change', function () {
        var max = input.dataset.max ? parseInt(input.dataset.max, 10) : null;
        var value = parseInt(input.value, 10) || 0;
        if (value < 0) value = 0;
        if (max !== null && value > max) value = max;
        input.value = value;
      });
    });

    button.addEventListener('click', function () {
      errorEl.hidden = true;
      var items = [];
      root.querySelectorAll('.multi-variant-buy__qty').forEach(function (input) {
        var qty = parseInt(input.value, 10) || 0;
        if (qty > 0) {
          items.push({ id: parseInt(input.dataset.variantId, 10), quantity: qty });
        }
      });

      if (items.length === 0) {
        errorEl.textContent = 'Select a quantity for at least one option.';
        errorEl.hidden = false;
        return;
      }

      button.disabled = true;
      fetch(window.Shopify.routes.root + 'cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ items: items }),
      })
        .then(function (res) {
          if (!res.ok) {
            return res.json().then(function (data) {
              throw new Error(data.description || 'Could not add items to cart.');
            });
          }
          return res.json();
        })
        .then(function () {
          window.location.href = window.Shopify.routes.root + 'cart';
        })
        .catch(function (err) {
          errorEl.textContent = err.message;
          errorEl.hidden = false;
          button.disabled = false;
        });
    });
  })();
</script>

{% schema %}
{
  "name": "Multi-qty variant buy",
  "settings": [
    {
      "type": "text",
      "id": "capped_option_value",
      "label": "Option value to cap",
      "default": "4m",
      "info": "Must match a variant option value exactly, e.g. 4m"
    },
    {
      "type": "number",
      "id": "capped_max",
      "label": "Max quantity for that option value",
      "default": 3
    }
  ],
  "presets": [{ "name": "Multi-qty variant buy" }]
}
{% endschema %}
```

Save.

### What the code is doing

Four pieces worth understanding, because they are what you will adjust.

**One row per variant.** The Liquid loops `product.variants` and renders a label, a price and a number input. The variant id rides along in `data-variant-id`, which is what the cart request needs.

**The cap is data-driven.** For each variant it checks whether any of its option values matches `capped_option_value` from the section settings. If so it writes `max` and `data-max` onto that input. No hardcoded variant ids, so it survives you adding or reordering variants.

**Sold-out variants are disabled.** The `{% unless variant.available %}disabled{% endunless %}` keeps people from ordering what you do not have. Remove it if you sell on backorder.

**The cap is enforced twice.** `max` on the input handles the browser's stepper. The `change` listener clamps a value that was typed or pasted, which `max` alone does not catch. Both matter.

The submit handler collects every input with a quantity above zero, builds an `items` array, and posts once to `/cart/add.js`. One request, one round trip, every variant added together.

![All the selected variants added to the cart in a single click](/images/blog/shopify-bulk-add-to-cart/02-all-variants-added-in-one-click.png)

## Step 2: put it on the right product

You probably do not want this on every product. Give it its own template.

1. In **Edit code**, under **Templates**, find `product.json`, click **...** and **Duplicate**.
2. Name the copy `product.multi-variant`.
3. On the product's admin page, find **Theme template** in the right sidebar and select it.

![The product's variants in the admin](/images/blog/shopify-bulk-add-to-cart/03-product-variants-in-admin.jpeg)

Only products assigned that template use the new layout. Everything else keeps the normal picker.

Skip this step entirely if you do want it on every product, and edit the default `product.json` instead.

## Step 3: add the section and remove the old picker

**Online Store > Themes > Customize**, with the new template selected.

Then, and this is the step people miss: **remove or hide the existing Variant picker, Quantity selector and Buy buttons blocks.**

Leave them in and the page shows two ways to buy the same product. Shoppers use the old one, get one variant, and you conclude the section is broken.

Then **Add section**, search **Multi-qty variant buy**, and add it.

![The section added in the theme editor](/images/blog/shopify-bulk-add-to-cart/04-section-added-in-theme-editor.png)

## Step 4: set the cap

Click the section in the left sidebar. Two settings:

- **Option value to cap**: the exact option value, for example `4m`. Case sensitive, and it must match your product's option value character for character.
- **Max quantity for that option value**: `3`.

Save.

On the test store the 4m input would not go above 3, by stepper or by typing, while every other length was uncapped. Hitting **Add selected to cart** added them all at once and landed on the cart.

## Adjusting it

**Cap several options.** The setting takes one value. For more, change it to a comma-separated list and split it in the Liquid:

```liquid
assign capped_values = section.settings.capped_option_value | split: ','
```

then check membership with `contains` instead of the equality test.

**Do not redirect to the cart.** Replace the `window.location.href` line with a call to your theme's cart drawer, or refresh the cart bubble.

**Enforce a minimum order.** Sum the quantities in the click handler and reject the submit below your threshold, using the same error element.

**Cap by inventory instead of a fixed number.** Use `variant.inventory_quantity` in place of `variant_max`, but only when inventory tracking is on and the policy is `deny`. Otherwise it is unset and the cap disappears with no error.

## The limitations, honestly

**No live subtotal.** Shoppers see prices per row, not a running total until they reach the cart. Adding one is not hard but it is more JavaScript.

**Server-side stock is still the authority.** The `disabled` attribute and the cap are client-side. Someone determined can bypass both. Shopify will reject an oversell at checkout when tracking is on, but the cap of three is a UI convention, not a business rule Shopify enforces.

**It replaces the picker rather than extending it.** Products with several options, say Length and Colour, render every combination as a flat row list. That is fine for six variants and unusable for sixty. Beyond a dozen or so, group them or use an app.

**Theme updates.** It is a standalone section file, so a Dawn update will not overwrite it. But it does use Dawn's `button` and `page-width` classes, which could be restyled.

**Not tested on every theme.** Built and tested on Dawn. Anything Dawn-derived should work. Horizon and Fabric use web components for the product form, so the section will render but the classes will look off until you restyle them. The cart API call is theme independent.

## If it is not working

**The button does nothing.** Open the browser console. If you see an error naming `window.Shopify.routes`, the section is rendering somewhere Shopify's storefront JavaScript is not available, usually a preview context. Test on the real storefront.

**"Cannot find variant" or a 422 response.** The variant ids are wrong. This happens if you edited product options after adding the section, because changing an option value deletes and recreates variants with new ids. The Liquid reads ids fresh on every render, so a hard reload normally clears it. If it persists, the page is cached.

**Everything adds with quantity 1.** The inputs are not being read. Almost always a class name mismatch: the querySelector looks for `.multi-variant-buy__qty` and something has renamed it. Check the class on the input matches the selector in the script.

**Two sets of buy buttons.** Step 3 was skipped. Remove the Variant picker, Quantity selector and Buy buttons blocks from that template.

**The cap is ignored.** `capped_option_value` must match the option value exactly, including case and any spaces. `4M` does not match `4m`, and `4m ` with a trailing space does not match either. The value shown in the admin's variant list is the authority.

**Nothing appears for a product.** A product with no variants beyond the default has a single variant titled `Default Title`. The section will render one row for it, which is correct but pointless. This layout only earns its place on products with several real variants.

## Which route to pick

Use the **section** when the requirement is roughly "quantities across a handful of variants, one of them capped", you want no recurring cost, and someone can paste a file.

Use an **app** when you need pricing rules, conditional options, customer-specific minimums, a live subtotal, or you have many variants per product. Also use an app if your team does not want to own Liquid when Dawn changes.

What does not work at any price is expecting the native variant picker to do it. It posts one variant id. Once you accept that, the choice is just who writes the code that talks to the cart API: you, or an app.


---

---
title: "Shopify Bulk Edit Metafields: Hide the Category Columns"
description: Shopify's bulk editor adds a column for every category metafield each time it opens. Here is how to hide them, keep them hidden while you work, and bulk edit the metafields you actually want.
---

## The problem: the bulk editor fills up with columns you did not ask for

You select a few products, click **Bulk edit**, and the grid opens with a long row of columns you never picked. Color, Sleeve length type, Age group, Neckline, Target gender, Fabric, Size, and more.

A merchant raised this on the Shopify Community. Every time they opened the bulk editor, they had to untick a long list of these columns before they could see the fields they wanted. After saving and opening the editor again, the columns came back.

I reproduced it on a test store with three T-shirt products. The bulk editor opened with 19 columns. Five of them were the normal ones: title, status, category, vendor and price. The other 14 were category metafields, and a message at the bottom of the screen said "14 columns added".

![Shopify bulk editor with category metafield columns added automatically](/images/blog/shopify-bulk-edit-metafields/01-before.png)

Shopify has no setting that turns this off for good. You can still get a clean grid and keep it clean while you work, as long as you stay in the same browser tab.

## Why the columns appear

Every product in Shopify can have a **product category**, picked from Shopify's standard list. "Apparel & Accessories > Clothing > Clothing Tops > T-Shirts" is one of them.

Each category comes with its own set of **category metafields**. A metafield is an extra field on a product that holds information Shopify does not have a built-in box for. Category metafields are the ones Shopify suggests for that category, like Fabric and Neckline for a T-shirt, or Orientation and Printing method for an art print.

On the product page in the admin, these show up in a **Category metafields** card as small "+" buttons. My T-shirt had 14 of them.

Each time the bulk editor loads, Shopify reads the categories of the selected products and adds one column for each category metafield it finds. It does this on every fresh open. If your products span several categories, the list grows. When I opened the editor on a mixed set of 20 products (prints, cakes, collectibles, a jersey), the message said "26 columns added".

## Hide the category metafield columns

This is the fix I posted in the thread. It takes about a minute, and the trick is to do all your editing in one sitting.

1. Go to **Products** and tick every product you want to edit today. Use the select-all checkbox at the top of the list if you want all of them.
2. Click **Bulk edit**.

![Products list with three products selected and the Bulk edit button](/images/blog/shopify-bulk-edit-metafields/02-select-bulk-edit.png)

3. Click **Columns** at the top right of the bulk editor.
4. Scroll down to **Category Metafields** and click **Show more**. The list only shows the first 10 until you do.

![Columns menu open with the Category Metafields heading and Show more link](/images/blog/shopify-bulk-edit-metafields/03-columns-show-more.png)

5. Untick every category metafield. There is no "untick all" option, so it is one click per field.

![Category metafields all unticked in the Columns menu](/images/blog/shopify-bulk-edit-metafields/04-untick-all.png)

6. Make your edits and click **Save**.

![Bulk editor with an edited cell and the Save button active](/images/blog/shopify-bulk-edit-metafields/05-save.png)

7. Stay on this tab for your next edits. The columns stay hidden after you save.
8. Do not click **Back** or refresh the page. Either one brings the columns back.

On my test store the grid went from 19 columns down to 4. I changed a vendor, saved, and the grid stayed at 4 columns. I opened the Columns menu again after saving and all 14 category metafields were still unticked.

![Bulk editor after saving, showing only the chosen columns](/images/blog/shopify-bulk-edit-metafields/06-after.png)

The catch is step 1. Going back to the product list to add more products resets the columns. So pick every product you plan to touch before you click Bulk edit, not just the first batch.

## What does not work

I tried the obvious shortcuts before settling on the steps above. None of them keep the columns off.

**Unticking Product category.** It only hides the category column itself. All 14 category metafield columns stayed in the grid.

**Clicking Back and opening Bulk edit again.** The columns came back straight away, with a message that said "15 columns added". That is the 14 metafields plus the Product category column.

**Refreshing the page.** Same result. The data I had saved was still there, but every column I had unticked was back.

**Bookmarking the bulk editor link.** The web address of the bulk editor does include a list of columns. But when I opened a saved copy of that link in a new tab, Shopify rewrote it. It dropped my product selection and opened a default set of 20 products with its own category columns added.

**Removing the product category.** It would stop the columns, but the category is what gives you those fields in the first place. You also lose the suggested fields on the product page, so clearing it to tidy a spreadsheet view is a poor trade.

## How to bulk edit metafields in Shopify

Once you know how the Columns menu works, the same menu is how you bulk edit the metafields you do want.

Open **Columns** and scroll past General, Publishing, Pricing, Inventory, Shipping and SEO. There are two metafield sections:

- **Metafields** lists your own product metafields, the ones you or an app created. On my store it showed three, plus a **Show all metafields** link for the rest.
- **Category Metafields** lists the fields that come with the product categories in your selection.

Tick a metafield and it appears as a column in the grid, one row per product. Edit the cells the same way you edit a price or a vendor. Click a cell, press **Enter** to start typing, then click **Save** at the top.

The same rule applies here. Your choice of columns lasts until you leave or refresh the tab. If you edit the same three metafields every week, you will be ticking them again every week.

### Product metafields vs category metafields

These two get mixed up a lot, and the bulk editor lists them separately.

- **Product metafields** are fields you define yourself in **Settings > Custom data > Products**. You pick the name and the type. They apply to every product.
- **Category metafields** are defined by Shopify for a specific product category. You do not create them. They only appear on products in that category.

In the bulk editor, only the category ones are added for you. Your own metafields stay hidden until you tick them.

## Search the Columns menu instead of scrolling

The Columns menu has a **Search fields** box at the top. Type a field name and the list narrows to that field.

This is handy for adding one metafield column. It is less handy for removing a dozen, because the search only shows one field at a time and has no select-all.

## Should you use an app instead?

If you bulk edit metafields every day, an app may save you more time than the native editor. The larger bulk-edit apps work differently. You pick the field to change and the products to change, then run the edit as a job, so there is no grid of preselected columns to clear.

Well-known options on the Shopify App Store:

- **Hextom: Bulk Product Edit**
- **Ablestar Bulk Product Editor**
- **EditEngine Bulk Import Export**

Two things to check before you install one. First, whether it can edit the metafield types you use. Second, whether it can undo an edit. Some of the complaints in these apps' low-star reviews are about edits that removed variants or only updated some of the products. Test on a few products before you run an edit on your whole catalog.

## If the steps did not work

**The columns came back after Save.** Check you did not click Back or refresh. On my test store, saving alone never brought them back. Only leaving the tab or reloading did.

**You cannot find Show more.** Scroll further down the Columns menu. The Category Metafields section sits near the bottom, below Metafields.

**You see more category columns than your product page shows.** Your selection includes products from more than one category. The bulk editor adds the fields from every category in the selection.

**The bulk editor opened with the wrong products.** You probably opened a saved link to the bulk editor. Go back to Products, select the products again and click Bulk edit from there.

**You cannot see a category metafield you expected.** That field belongs to a different category. Check the category on one of the products you selected.

## Where to ask Shopify for a fix

The merchant's request in the thread was simple: open the editor with no optional columns ticked, or remember the last choice. Neither exists today. If it matters to you, add your voice on the Shopify Community thread linked below. Until then, untick once and stay in the tab.

I tested everything above on a development store with three T-shirt products in the T-Shirts category, using Shopify's current bulk editor.


---

---
title: Shopify Bulk Edit Product Descriptions (No App)
description: Give 200 products the same description template with each product's own name inserted, using a Shopify CSV export and one spreadsheet formula. No app needed, plus the safety rule that stops the import wiping your data.
---

## The problem

A merchant asked about this on the Shopify Community, and it is a very common one.

They had about 200 products of one type. Every product needed the same description. Not identical word for word, though. Each description had to include that product's own name.

So it is a template with one moving part. The same wording everywhere, and the product title dropped into each one.

Doing that by hand across 200 products would take hours. They wanted the easiest automated way.

They also asked a second question. They wanted to swap the photos in bulk too. Around 200 listings with 4 photos each. Did that have to be manual as well?

I worked through both on a Shopify store. The descriptions need no app at all. The photos are a bit more involved, and I will cover both below.

## Why the bulk editor alone cannot insert the title

Shopify has a built-in bulk editor. You select products, click **Bulk edit**, and get a spreadsheet-style grid.

It looks like the right tool. It is not, for this job.

The grid lets you paste the same text into many description cells at once. That covers a description that is truly identical everywhere.

But it cannot read each product's title and drop it into that product's description. There is no formula in the bulk editor. It only holds fixed text.

The moment you need "insert this product's own name here", the grid is out. You need something that can build each line of text from the product's title.

A spreadsheet can do exactly that. So the trick is to move the data out to a spreadsheet, build the descriptions there with a formula, and bring them back.

That round trip is the whole method. Export to a CSV, edit in Google Sheets, import the CSV back. No app, and it scales to 200 products or 2,000 the same way.

## The fix, step by step

Here is the exact flow I used. It takes a few minutes once the file is open.

### Step 1. Export your products to a CSV

Go to **Products**, click **Export**, choose **All products**, and pick **CSV for Excel, Numbers, or other spreadsheet programs**.

Shopify does not download the file straight away for a large catalog. It emails it to you instead. The email arrives in a minute or two with a download link.

![Shopify Export products dialog set to all products and CSV for spreadsheet programs](/images/blog/shopify-bulk-edit-product-descriptions/01-export-products-csv.png)

This CSV holds one row per product, plus extra rows for extra images and variants. The two columns that matter most for us are **Handle** and **Title**.

### Step 2. Build the description with a formula

Open the file in Google Sheets. Excel or Numbers work the same way.

Find an empty column off to the side. A spare column, not one of the real Shopify columns. In the first product row, paste a formula like this and then fill it down the whole column:

```
="<p><strong>"&B2&"</strong> is handcrafted and ships free in 2 days. 30-day returns on every "&B2&".</p>"
```

![The merge formula in Google Sheets pulling the product title from column B](/images/blog/shopify-bulk-edit-product-descriptions/02-google-sheets-title-formula.png)

A few things to know about that formula.

- **Title is usually column B** in a Shopify export. So `B2` is the first product's title. Check your own file, because if Title sits in a different column you swap the letter.
- The `&B2&` part is the spot where the product name drops in. It appears twice here, so each description names the product twice. Use it as many times as you like.
- Everything in quotes is your own wording. Rewrite it to match your brand. Keep the `<p>` and `<strong>` tags if you want paragraphs and bold, or drop them for plain text.
- Filling down changes `B2` to `B3`, `B4` and so on automatically, so every row builds from its own product's title.

The result is a full description for every product, each one carrying its own name, built in seconds.

### Step 3. Turn the formulas into text, then trim the file

The formula column is live. It is not real text yet, it is a calculation. You need to freeze it into plain text before it goes into the description column.

Select the whole formula column and copy it. Then use **Paste special > Values only** into the **Body (HTML)** column. Body (HTML) is Shopify's name for the product description.

Now the description column holds finished text, not formulas.

Next comes the important part. Delete every other column except **Handle** and **Title**. You want the file trimmed down to just **Handle**, **Title** and **Body (HTML)**. Nothing else.

I will explain why that matters in the next section, because it is the step that keeps your store safe.

### Step 4. Import with overwrite turned on

Go back to **Products**, click **Import**, and add your trimmed file.

Tick the box that says **Overwrite products that have the same handle**. This is what tells Shopify to update your existing products instead of creating new ones.

![Shopify import dialog with the overwrite same handle checkbox ticked](/images/blog/shopify-bulk-edit-product-descriptions/03-import-overwrite-handle.png)

Start the import. Shopify matches each row to a product by its Handle, then updates the description from your Body (HTML) column.

When it finishes, open a few products and check. Each description should now read from your template, with that product's name inside it.

![Before and after showing the same template applied with each product name inserted](/images/blog/shopify-bulk-edit-product-descriptions/04-before-after-descriptions.png)

That is the whole descriptions job. One export, one formula, one import.

## The safety rule that stops you wiping data

This is the part that protects your store, so read it before you import anything on a live catalog.

A Shopify import to update products only needs two columns to work: **Handle** and **Title**. Handle is how Shopify finds the right product. Title has to be present for the row to be valid.

Now here is the rule that trips people up.

A column you **delete** from the file is left untouched. Shopify only changes the columns it can see. So if there is no Price column in your file, every price stays exactly as it is. Same for variants, tags, inventory and images.

A column you **keep but leave blank** gets wiped. An empty cell in a column that is present reads as "set this to nothing". So a blank Price column would zero out your prices. A blank Tags column would strip your tags.

That is the whole safety idea in one line. Delete the columns you are not changing. Never keep a column and leave it empty.

For this job that means trimming the file to **Handle + Title + Body (HTML)** and nothing else. With only those three columns, the import can only touch the description. Your prices, variants, photos and everything else are not in the file, so Shopify cannot change them.

If you are nervous, do a test run first. Export a fresh CSV as a backup before you import. Or import just five products, check them, then do the rest.

## Changing the photos in bulk

The photos question has a catch that surprises people, so let me be clear about it.

A CSV carries image **links**, not the image files off your computer. The import cannot reach into your hard drive and upload pictures. It can only point Shopify at a web address where each image already lives.

That splits the answer into two cases.

**Your photos are already online.** Maybe they sit on your current store, a supplier site, or your own web space. In that case add three columns to the same kind of file:

- **Image Src** holds the full URL of each photo.
- **Image Position** sets the order. Use 1, 2, 3, 4 for the four photos.
- **Image Alt Text** is optional but good for accessibility and SEO.

You put one row per image, and you repeat the product's Handle on each of those rows. So a product with 4 photos becomes 4 rows, all sharing the same Handle, each with its own Image Src and Position.

**Your photos are only on your computer.** Then they have no URL yet, and the import has nothing to point at. Upload them first under **Content > Files** in your admin. Each uploaded file gets its own URL. Copy those URLs, drop them into the Image Src column, and import the same way.

**For a full swap of all 4 photos across 200 products**, that manual URL wrangling gets heavy. This is where a paid app earns its place. A tool like Matrixify can read images straight from a Google Drive or Dropbox folder and replace the whole photo set in one run. For a one-off change the CSV route is fine. For a big recurring image job an app saves real time.

## How do I bulk edit products in Shopify?

Shopify gives you two built-in ways, and they are good at different things.

The **bulk editor** is the spreadsheet grid you get from selecting products and clicking **Bulk edit**. It is best for quick changes to fields that are the same across products. Set a group of products to the same price, the same vendor, or the same fixed description. It is fast and it happens right in the admin. What it cannot do is build a value from each product's own data, which is why it fails the "insert the title" test.

The **CSV export and import** is the heavier tool. You pull your catalog out to a file, change it in a spreadsheet, and push it back. It handles formulas, find and replace, and thousands of rows. It is the right choice whenever the change depends on each product's own values, or when there are too many products to click through.

Rule of thumb: if the new value is the same everywhere, use the bulk editor. If the new value is built from each product's title or other data, use the CSV.

## Can I import product descriptions with a CSV?

Yes. The description lives in the **Body (HTML)** column of the Shopify product CSV.

To update descriptions without touching anything else, export your products, put your new text in Body (HTML), delete every column except Handle and Title, and import with **Overwrite products that have the same handle** ticked.

Handle is required so Shopify knows which product to update. Title has to stay so each row is valid. Body (HTML) carries the new description. Because no other column is in the file, no other field can change.

You can write plain text or basic HTML in Body (HTML). Tags like `<p>`, `<strong>`, `<ul>` and `<li>` all work and control how the description looks on the product page.

## How do I add the product title to the description automatically?

You cannot do it inside Shopify's admin. There is no field that says "put the title here". You do it in the spreadsheet on the way through.

The move is text joining. In Google Sheets the `&` symbol glues pieces of text together. So `"Buy the "&B2&" today"` becomes `Buy the Blue Mug today` when B2 holds "Blue Mug".

Wrap your fixed wording in quotes, and drop `&B2&` wherever the product name should appear. Fill the formula down the column, paste the results as values into Body (HTML), and import. Every product ends up with the same template and its own name inside it.

This is also how you insert other fields. Point the formula at the Type column, the Vendor column, or a price column the same way, and you can weave any of them into the description.

## Handle, Body (HTML), and the bulk editor versus CSV import

A few Shopify terms are worth pinning down, because the whole method rests on them.

**Handle** is the product's unique tag in its web address. The product at `yourstore.com/products/blue-mug` has the handle `blue-mug`. In a CSV import, Handle is the key Shopify matches on. Change it or leave it blank and Shopify thinks the row is a brand new product, which is how people end up with duplicates.

**Body (HTML)** is simply the product description. Shopify stores it as HTML, so the column is named after that. Whatever goes in this column becomes the text shoppers read on the product page.

**The bulk editor versus CSV import** is the core split. The bulk editor is a live grid inside the admin, great for setting the same fixed value across many products. The CSV route takes the data out, lets a spreadsheet do work the admin cannot, and brings it back. Descriptions built from each product's title need the CSV, because only a spreadsheet can build them.

**Overwrite same handle** is the import checkbox that turns "create products" into "update products". Without it, Shopify skips every row that matches an existing product and nothing changes. With it, matching products get updated from your file.

## If it did not work

**The import created duplicate products.** Your Handle column was changed or blank. Handle has to stay exactly as it came out of the export. Re-export, keep Handle as is, and import again.

**Nothing changed after the import.** The overwrite box was not ticked, so every matching row was skipped. Run it again with **Overwrite products that have the same handle** on.

**Some field went blank that you did not touch.** You kept that column in the file and left it empty. An empty cell in a present column wipes the value. Trim the file back to Handle, Title and Body (HTML) only, then re-import.

**The descriptions show raw code like `<p>`.** You pasted the formula text into the wrong place, or the tags are being shown instead of rendered. Make sure the HTML tags sit inside the Body (HTML) column, and that you used Paste special values only so the cell holds text, not a live formula.

**The title did not appear in the description.** Your formula pointed at the wrong column. Check that the letter in `&B2&` matches the column that actually holds Title in your file.

The descriptions job is genuinely no-app work. Export, one formula, import, and keep the file trimmed to Handle, Title and Body (HTML) so nothing else can move. For a full image swap on hundreds of products, that is the one place a bulk app like Matrixify is worth it.


---

---
title: How to Bulk Edit Product Variants in Shopify
description: Shopify's bulk editor greys out variant fields, so most merchants edit variants one product at a time. There is a screen that does not, plus the CSV caveat that can break with nothing to flag it your variant IDs.
---

## The problem: variant fields are greyed out in the bulk editor

You select every product in Shopify, click **Bulk edit**, and get a spreadsheet.

The variant rows are there. Small, Medium, Large sit under the product name. But the option value itself is plain grey text. There is no cell to click.

![Variant option values are grey text in the bulk editor, with no editable cell](/images/blog/shopify-bulk-edit-variants/01-variant-field-greyed-out-in-bulk-editor.png)

A merchant raised this on the Shopify Community. Their words: it is "quite literally the ONLY thing on the bulk edit feature for all products that's gray and won't let us edit."

For an apparel store with hundreds of variants, that means opening each product one at a time. It is exactly the work a bulk editor is supposed to remove.

They are right that this should be on the main Products bulk editor. It is not. But there is a different screen that does the job, and few merchants use it for this.

I worked through it on a test store. Here is what actually works, what it cannot do, and the one caveat that can cost you real money if you get it wrong.

## Why the Products bulk editor cannot do it

The Products list is built around one row per **product**.

The bulk editor inherits that. It can edit anything belonging to the product, and it shows variants underneath as read-only context. Price is editable because price lives on the variant and Shopify surfaces it. The option value is what *defines* the variant, so it is structural, not a field.

That is the actual reason it is grey. It is not an oversight in the UI. Changing an option value is a different operation from editing a field, which is why it needs a different tool.

So you need a screen built around one row per variant.

## The fix: Products > Inventory lists every variant

This is the part most merchants never find, because the screen is named after inventory and this is not an inventory job.

**Step 1.** Go to **Products > Inventory** in the admin.

Look at the list. Every variant gets its own row, across every product in the store. A three-size top is three rows, not one.

**Step 2.** Tick the variants you want. You can mix freely, across different products.

**Step 3.** Click **Bulk edit**.

![Products > Inventory lists one row per variant, with Bulk edit above the list](/images/blog/shopify-bulk-edit-variants/02-inventory-one-row-per-variant.jpeg)

The header now reads **Editing 3 variants**, not "Editing 1 product". That is the whole difference.

## Add the columns you need

By default the view shows inventory columns. The fields you probably want are hidden.

Click **Columns** on the right and tick what you need:

![The Columns picker, showing Price, Unit price, Compare-at price, Cost per item and more](/images/blog/shopify-bulk-edit-variants/03-add-columns-to-inventory-view.jpeg)

What you can edit here:

- Price, Unit price, Compare-at price, Cost per item
- Charge taxes
- SKU and Barcode
- Weight
- HS code and Country of origin
- Available and On hand stock, per location

What you cannot edit here: **Title**. It is locked in the picker. Title is the variant's option value, the Small or Medium, and it is still not editable in any admin grid. Changing that needs the CSV method further down.

So the honest summary is that this screen solves most of the problem but not all of it. It covers every field a merchant usually wants to bulk change. It does not rename options.

## Edit many variants at once with one keystroke

The grid supports range fill, which is the part that turns this from useful into fast.

Click the first cell you want to change. Hold **Shift** and click the last cell in that column. Type the value once and it applies to the whole selection.

![One price typed once, applied to three variants spanning two different products](/images/blog/shopify-bulk-edit-variants/04-edit-variants-inline.png)

In that screenshot one price is applied to three variants that belong to **two different products**. The Products bulk editor cannot do that at variant level at all.

Click **Save**. Changes apply immediately.

Two things worth knowing:

- There is no undo. Note the old values before a large change, or export a CSV first as a snapshot.
- Nothing here creates or deletes variants. You are editing fields on variants that already exist, which is why this method is safe.

## To change the option values themselves, use CSV

If you actually need to rename Small to X-Small, or restructure your options, the grid will not do it. Export, edit, re-import.

**Step 1.** Go to **Products**, click **Export**, and choose the products you want. You get a CSV with one row per variant.

**Step 2.** Open it in a spreadsheet. The columns you want are **Option1 Name**, **Option1 Value**, and the matching Option2 and Option3 columns.

**Step 3.** Edit the values. Leave **Handle** and **SKU** alone.

**Step 4.** Go back to **Products**, click **Import**, upload the file, and tick **Overwrite any current products that have the same handle**.

If you skip that checkbox, Shopify ignores every row that matches an existing product and nothing happens.

![After the re-import the sizes read X-Small, Small, Medium, still three variants with SKUs intact](/images/blog/shopify-bulk-edit-variants/05-csv-export-to-edit-option-values.jpeg)

On my test store XS, S and M came back as X-Small, Small and Medium. Still three variants. SKUs intact. It looks exactly like a rename.

## The CSV caveat that matters more than it looks

That last sentence is where people get hurt, so read this part before you run an import on a live store.

It looks like a rename. It is not one.

Shopify's own documentation is explicit: changing data in the Option1, Option2 or Option3 value columns **deletes the existing variant IDs and creates new ones**. The variant you see afterwards is a new record that happens to carry the same SKU and the same visible name.

Shopify's warning is blunt about the consequence. Any change to variant ID values can break third-party dependencies on variant IDs.

In practice that means:

- **Subscription apps** holding contracts against a variant ID can lose the link
- **Reviews** attached at variant level can detach
- **Bundle and wholesale apps** referencing variant IDs can break
- **External systems** such as an ERP, a 3PL or a marketplace feed can stop matching
- **Existing draft orders** pointing at the old variant can fail

None of that shows up in the admin. The product page looks perfect. The breakage appears later, in the app that stopped matching, with nothing to announce it.

So before a CSV option rename on a live store:

1. Export a CSV first and keep it. That is your rollback.
2. Check which apps you run that reference variants, especially subscriptions.
3. Test on a handful of products before doing the whole catalog.
4. If anything critical depends on variant IDs, do the rename through the API instead, where you can update options without recreating variants.

If you are only changing prices, SKUs, stock, weight or cost, none of this applies. Use the Inventory grid and the IDs stay put.

## Which method for which job

| What you want to change | Use | Safe for variant IDs |
| --- | --- | --- |
| Price, compare-at, cost | Products > Inventory grid | Yes |
| SKU, barcode | Products > Inventory grid | Yes |
| Stock levels per location | Products > Inventory grid | Yes |
| Weight, HS code, country | Products > Inventory grid | Yes |
| Option values such as sizes | CSV export, edit, import | No, IDs are recreated |
| Adding a whole new option | CSV export, edit, import | No, IDs are recreated |
| Product-level fields | Products > Bulk edit | Yes |

The rule of thumb is simple. If you are editing a **field on a variant**, the Inventory grid is the right tool and it is safe. If you are changing **what defines the variant**, you are restructuring, and restructuring recreates records.

## If it did not work, check these

**Bulk edit is greyed out on the Inventory page.** You have not ticked anything yet. The button only activates with a selection.

**You only see one row per product.** You are on Products, not Products > Inventory. They look similar and it is an easy mistake.

**The field you want is missing.** It is hidden. Click **Columns** and tick it. If it is not in that list at all, it is a product-level field, so use the Products bulk editor instead.

**Title will not become editable.** It cannot. That is the CSV path.

**The CSV import ran but nothing changed.** The overwrite checkbox was not ticked, so every matching row was skipped.

**The import created duplicate products.** Your Handle column changed or was blank. Handle is what Shopify matches on, so it has to stay exactly as exported.

**Stock did not update.** Inventory quantities are per location. Check the location selector at the top of the Inventory page.

## When you have outgrown all of this

The Inventory grid is comfortable up to a few hundred variants. Beyond that, ticking rows becomes the bottleneck.

At that scale, filter first. Narrow the Inventory list by collection, vendor, product type or tag, then select all and bulk edit only what matched. Ten filtered passes beat one pass over three thousand rows.

Past that, it is a CSV or API job. A CSV handles a few thousand rows comfortably. Above that, or when you need this on a schedule rather than once, the Admin API updates variants without recreating them, which also sidesteps the variant ID problem entirely.

The merchant in that thread was right about one thing: this should be in the main bulk editor. Until it is, Products > Inventory is the closest thing to it, and it is considerably better than opening products one at a time.


---

---
title: "Shopify Bundle Apps: How to Pick the Right One"
description: "Shopify Bundles makes a separate product with its own inventory. Here is how bundle apps really differ, the free native option that keeps your real stock, and the one question to ask any vendor. Tested, with screenshots."
---

## The problem

A store owner asked this on the Shopify Community. They already use the free Shopify Bundles app, and they had three complaints about it:

- The bundle seems to track its own inventory, separate from their main stock.
- It does not apply on its own in the cart. Customers have to open a specific bundle page to buy the set.
- They cannot edit an order afterwards to fix a bundle.

Then the real question: which other bundle app fixes all of that, and what options are they missing?

If you have shopped for bundle apps, you know the list is huge and every app claims to do everything. The useful thing is not another list. It is understanding the one difference that decides whether an app solves those three problems or repeats them.

## Why Shopify Bundles behaves that way

The three complaints all come from a single design choice.

Shopify Bundles, and every app built on the same model, creates a **new product**. That bundle product has its own line item, its own SKU, its own barcode, its own weight, and its own stock number. It is a real product that happens to be made of other products.

That explains everything the merchant saw:

- The stock reads as separate because the bundle is its own product with its own number. It is calculated from the parts, but it shows up as one figure that is not your main inventory.
- It does not auto-apply in the cart because there is nothing to combine. The customer is buying one product, the bundle. If they add the parts one by one instead, Shopify has no reason to turn them into the bundle.
- You cannot edit it in an order because it is one fixed line. There are no separate items inside to add, swap, or remove.

None of that is a bug. It is what a fixed bundle is. So the fix is not a better fixed-bundle app. It is a different kind of bundle.

## The two kinds of bundle apps

Once you see it, every bundle app falls into one of two camps.

**Fixed bundles.** These build a new bundle product, the way Shopify Bundles does. Good for a boxed set you want to merchandise as its own thing, with its own photo and price. Bad if you want the parts to stay as normal products, because the inventory and order behaviour are exactly what the merchant was fighting.

**Discount bundles.** These leave the real products in the cart as normal line items and apply a discount when the right combination is present. The products pull from your main inventory, the discount applies by itself in the cart, and the order stays a normal, editable order. This is what the merchant was describing without having the name for it.

So the search is not "best bundle app" in the abstract. It is "a bundle app that works the discount way, not the fixed-product way."

## The free option most stores overlook

Before paying for anything, know that Shopify already does discount bundles for free. No app, no code.

It is an automatic discount, and it fixes all three complaints at once. Here is the exact setup, tested on a Dawn store with a coffee and a mug.

Go to **Discounts**, create a discount, and choose **Buy X get Y**. Under Customer buys, add the first product and a quantity.

![The Shopify Buy X get Y automatic discount, set up so buying the first product discounts the second, shown as a native product discount](/images/blog/shopify-bundle-apps/01-buy-x-get-y-setup.jpeg)

Under Customer gets, add the second product and the discount, for example the mug at twenty percent off.

![The Customer gets section of the discount, with the second product added and set to twenty percent off](/images/blog/shopify-bundle-apps/02-customer-gets-second-product.png)

Save it. Now when a shopper has both products in the cart, the discount applies on its own. Both items stay as separate line items, each pulling from your real stock.

![A Shopify cart with two separate line items, the coffee and the mug, with the bundle discount applied automatically to the mug](/images/blog/shopify-bundle-apps/03-cart-two-line-items.png)

That is the whole thing. Look at what it gives you against the original three complaints:

- **Main inventory.** The coffee and the mug are your normal products. There is no second stock pool, because there is no bundle product.
- **Applies in the cart.** The customer never opens a bundle page. They add the products the normal way and the price adjusts itself.
- **Editable orders.** The order is two normal line items. You can edit it in the admin like any other order.

The one thing it does not do is put a styled bundle box on the product page. It is a cart-level discount, so the saving shows up in the cart, not as a "Buy this set" widget on the product. For a plain "buy these together and save" offer, that is usually fine, and it costs nothing. If you want the deeper mechanics of stacking several tiers or a strict one-of-each set, see our walkthrough on building an [automatic bundle discount in Shopify](/blog/shopify-bundle-discount-automatic).

## When you actually want a bundle app

The free route covers a lot of stores. You want an app when you need something it cannot do on the page:

- A real bundle widget on the product page, with the parts, a combined price, and an add-all button.
- Mix-and-match, where the customer picks any three from a set and gets a price.
- Tiered "build your own box" flows, or volume breaks shown as a grid.
- Bundles that also need their own barcode and shipping weight, which is the fixed-product model on purpose.

All of that is legitimate. The mistake is buying an app for those features and getting the fixed-product inventory behaviour back without realising it.

## The one question that sorts every bundle app

You do not need to test ten apps. Ask each vendor one question:

> Do the products stay as my normal line items and pull my main inventory, or does the app create a new bundle product?

That single answer tells you which camp the app is in, and therefore whether it repeats the three problems or fixes them. If the parts stay as line items, you keep your real stock and editable orders. If it makes a new product, you are back to the Shopify Bundles behaviour, just with a nicer widget.

Ask it before you install, not after. It is faster than any trial.

## Bundle apps worth a look

For discount-style bundles that keep the products as separate line items, these are the well-known options, and they all have free tiers to start:

- **Fast Bundle.** Discount bundles, mix-and-match, and volume, with a product-page widget. One of the most complete.
- **Bundler.** Simple, popular, and free to start. Good for classic "buy together and save" bundles.
- **Wide Bundle.** Strong for the "pick a pack" layout on the product page, popular with single-product stores.
- **Kaching Bundles.** Volume and BOGO focused, clean product-page blocks.

Most of them also add volume breaks and buy-one-get-one deals, which were the "other options" the merchant hoped existed. Whichever you try, run it through the one question above first.

## What about inventory and editing orders

These were the merchant's real worries, so it is worth being blunt.

With any discount-style setup, free or paid, inventory is never a separate pool, because the bundle is not a product. Every item sold draws down its own stock, the same as a normal sale. That is the behaviour they wanted.

Editing orders also just works, because the order is made of normal products. You can add, remove, or swap items in the admin. A fixed bundle product cannot be edited that way, since it is one sealed line, which is exactly the wall they hit.

If a vendor cannot give you a straight answer on those two points, treat that as the answer.

## The short version

- Shopify Bundles makes a **separate product**, which is why the stock looks separate, the cart does not combine, and the order cannot be edited.
- Bundle apps come in two kinds: **fixed product** (same problems) and **discount** (products stay as normal line items).
- You want the discount kind. Shopify does it **free** with an automatic Buy X get Y discount, with no bundle product and no code.
- If you want a bundle widget on the product page, pick an app, and ask one question first: do the products stay as my normal line items, or does it create a new product?

Tested on a Dawn store: a Buy X get Y automatic discount applied in the cart with both products as separate line items, pulling normal inventory.


---

---
title: Create an Automatic Bundle Discount in Shopify
description: Give a discount when two specific products are in the cart together in Shopify - a native "1 of each" bundle with no app and no exploit.
---

## The problem

You want to sell two products as a set. Add both to the cart, and the price drops on its own. No coupon to type. No app to install.

A merchant asked exactly this on the Shopify Community. They were selling a denim set: a jacket that is ready to ship, and jeans sold as a pre-order.

The goal sounds simple. One jacket plus one pair of jeans should get a bundle price at checkout.

The catch is the usual fix breaks. They tried a "Buy X Get Y" discount. But a shopper could add two jackets and still get the same bundle price. That is not a bundle. That is a loophole.

The other idea was a separate "bundle" product listing. But then stock gets messy. You end up building a manual tracker so the jacket count stays right whether someone buys it alone or inside the bundle.

I reproduced this on a test store in the Shopify admin, under Discounts. I found a clean native setup that fixes both issues. This post walks through the exact steps, why the loophole happens, and when to switch to a real combined-stock bundle instead.

This is the core of any **shopify bundle discount** done natively: get the discount rule to key off the right thing.

## Why it happens

Here is the mechanism most forum answers skip.

A "Buy X Get Y" discount has two sides. The "buy" side is the trigger. The "gets" side is where the price cut lands.

When you set the trigger to a quantity, like "buy 2 of anything in a collection," Shopify only counts items. It does not care which items. Two jackets is a quantity of two. So the deal fires. That is the loophole.

The fix is to stop counting quantity and start naming products. You make the trigger "buy 1 of this specific product" and the reward "get 1 of that specific product." Now both named items must be in the cart. Two jackets is not one jacket plus one pair of jeans. So the deal stays off.

In short: quantity triggers can be gamed. Specific-product triggers cannot. That single change turns a leaky discount into a real **shopify automatic bundle**.

The word "automatic" matters here. Shopify has two discount kinds. A discount code needs the shopper to type something. An automatic discount applies by itself when the cart matches the rule. For a set that should just work when both items are present, you always want automatic.

## Before you start

Check three things first. They save you a support ticket later.

- You have both products created as separate listings in your store. Each has its own price.
- You know your target set price. From that, work out the discount. If the jeans are \$90 and you want \$45 off the pair, that is 50% off the jeans, or a flat \$45 off. Either works.
- If one item is a pre-order or runs low, decide how it sells when stock hits zero. More on that below.

You do not need any app for the steps that follow. You do not need a coupon. You do not need a third "bundle" product.

## The fix

Here is the native setup, step by step. It builds a **shopify buy x get y** discount that only fires for one of each named product.

**1. Open the discount editor**

In your admin go to Discounts. Click Create discount. Choose Buy X Get Y. Set the method to Automatic, not a code. Automatic means it applies on its own at checkout.

**2. Set the "buys" side to one specific product**

Under Customer buys, choose Specific products, not a collection. This is the key step. Pick your first item, the jacket. Set the quantity to 1.

Picking a specific product, not a collection, is what blocks the two-jackets trick. A collection or a quantity rule would let any two matching items qualify.

**3. Set the "gets" side to the other product**

Under Customer gets, choose Specific products again. Pick your second item, the jeans. Set the quantity to 1.

Then set the discount value on the jeans. Use a percentage or a fixed amount that lands your set price. In my test I used 50% off, which took \$90 jeans down to \$45. Save.

![Shopify Buy X Get Y discount setup: buy 1 jacket, get 1 jeans at the bundle price, using Specific products not a collection](/images/blog/shopify-bundle-discount-automatic/01-buy-x-get-y-setup.png)

That is the whole build. Two named products, one of each, an automatic method, and the price cut sitting on the second item.

**4. Test the loophole is closed**

Now prove it works. Add two jackets to the cart and nothing else. The discount should not appear. The total stays at full price, because there are no jeans to trigger the reward.

I tested this. Two jackets alone stayed at full price with no discount applied.

![Cart with two jackets and no jeans: the Buy X Get Y discount does not trigger, total stays at full price](/images/blog/shopify-bundle-discount-automatic/02-two-jackets-no-discount.png)

**5. Test the bundle fires**

Empty the cart. Add one jacket and one pair of jeans. The jeans should drop to the discounted price on its own. The total should equal your set price.

In my test the jeans dropped to half and the total became the bundle price automatically, with nothing typed in.

![Cart with one jacket and one pair of jeans: the jeans drops to the bundle price automatically and the total is the set price](/images/blog/shopify-bundle-discount-automatic/03-jacket-jeans-bundle-price.png)

**Keeping your inventory simple**

This is the part that saves the manual tracker. Both items stay as two separate products. Each is tracked on its own count. There is no third bundle listing to sync.

If one item is a pre-order, like the jeans in this case, this setup handles it fine. Open the jeans product, find the inventory section, and turn on "Continue selling when out of stock." The pre-order sells, the jacket count stays honest, and the discount keeps firing when both are in the cart.

## An alternative: Shopify Bundles for combined stock

The setup above keeps two listings. Sometimes you want the opposite. You want one product page that sells the set as a single item, with the two stocks combined and tracked for you.

For that, use Shopify's own free app, Shopify Bundles. It is made by Shopify, not a third party.

Shopify Bundles builds a real bundle product. The shopper sees one item to add to the cart. Behind the scenes it draws down the stock of each component for you. No manual tracker, no spreadsheet.

When to pick which:

- Want the two items to stay separate on the storefront, each with its own page, and just get a price break when bought together? Use the Buy X Get Y discount above.
- Want one product page for the set, with combined inventory handled automatically? Use Shopify Bundles.

Both are native. Both are free. They just solve slightly different shapes of the same idea.

## How to create a bundle discount on Shopify

Short version, since this is the most searched phrasing.

To create a bundle discount on Shopify without an app, go to Discounts, create a Buy X Get Y automatic discount, and set both sides to Specific products with a quantity of one each. Put the price cut on the second product so the pair lands at your target price.

The mistake people make is using a collection or a quantity-only rule. That lets any matching items qualify, which is how the two-jackets loophole appears. Name the exact products instead.

If you need more than two items in the set, you can add more products to the "buys" or "gets" side. But the more items and quantities you mix, the more you should test the edge cases in a real cart before you go live.

## Shopify Buy X Get Y: how it actually works

A Buy X Get Y discount is a conditional reward. The shopper "buys" the trigger items. They then "get" a discount on the reward items.

The discount value never sits on the trigger. It always sits on the reward. So in a set, the item you discount is the second one you name under Customer gets.

Buy X Get Y can be a code or automatic. For a bundle that should apply by itself, choose automatic. That is what makes it feel like real **shopify bundle pricing** instead of a coupon.

One more detail. Buy X Get Y does not combine two separate products into one line. Each stays its own line in the cart. You will see the jacket at full price and the jeans discounted. The total is your set price. That is expected, and it is fine.

## Shopify automatic bundle vs a discount code

An automatic bundle applies on its own when the cart matches. A discount code needs the shopper to type it in.

For a set meant to feel seamless, automatic wins. The shopper adds both items and the price is already right. Nothing to remember, nothing to copy.

Use a code instead only when you want the deal gated. For example, a code you email to a list, or one you share with a single influencer. For a permanent product set on your own store, automatic is the natural choice.

You can run one automatic Buy X Get Y bundle at a time on the same products without conflict. If you stack several automatic discounts, test how they combine, because Shopify has rules about which discounts can run together.

## Shopify bundle pricing options compared

There are three common ways to price a set on Shopify. Here is how they line up.

- **Buy X Get Y automatic discount.** Two separate listings, price drops when both are in the cart. Best for a simple two-item set where you want independent inventory. This is the fix in this post.
- **Shopify Bundles app.** One combined product page, stock of each component tracked for you. Best when you want the set to look and sell as a single item.
- **Third-party bundle apps.** More layouts and rules, like tiered pricing or "build your own box." Best when native tools do not cover a complex offer. These add cost and another app to maintain.

Start native. Only reach for a paid app when the free tools genuinely cannot do what you need.

## If it did not work

A few things to check when the bundle price does not apply.

- **You picked a collection, not specific products.** This reopens the loophole and can misfire. Edit the discount and switch both sides to Specific products.
- **The discount is a code, not automatic.** A code sits idle until typed. Recreate it as Automatic, or make sure the shopper enters the code.
- **The discount is scheduled or expired.** Check the active dates on the discount. An end date in the past means it will never fire.
- **You put the value on the wrong side.** The price cut belongs on the "gets" product. If nothing discounts, confirm the value is on the reward item, not the trigger.
- **Both named products are not in the cart.** The deal only fires with one of each. One item alone, or two of the same, will not trigger it. That is the design working, not a bug.
- **Another discount is blocking it.** If you run several automatic discounts, one may be taking priority. Test with the others paused.

## Definitions people confuse

**Bundle vs Buy X Get Y.** A true "bundle" in Shopify's own wording is a single product built from components, like the Shopify Bundles app makes. A Buy X Get Y is a discount rule across separate products. Both can feel like a bundle to the shopper. They differ in inventory and on the product page.

**Automatic discount vs discount code.** Automatic applies by itself when the cart matches. A code must be typed. Same discount types underneath, different trigger.

**Specific products vs collection.** Specific products means the exact items you pick. A collection means any item inside that group. For a fixed set, always use specific products, or you invite the quantity loophole.

**Continue selling when out of stock.** A per-product inventory setting. Turn it on and the item still sells at zero stock, which is how pre-orders work. It does not affect the discount, but it keeps a pre-order item buyable inside the bundle.

Get these four distinctions right and the native tools cover most two-item sets cleanly, with no app and no exploit.


---

---
title: Add a Hover Animation to Shopify Buttons
description: Give your Shopify buttons a subtle hover effect - lift, fill or slide - with a small CSS block that works across themes.
---

## The problem

A merchant asked about this on the Shopify Community. They wanted a hover animation on their Add to cart button. The idea was a black background that slides in when you move the mouse over the button. The text would turn white at the same time.

They already had CSS ready. They pasted it into their theme. Nothing happened. The button stayed plain.

Here is the CSS they tried:

```css
.button-secondary.button-secondary-background-slide::before {
  content: '';
  position: absolute;
  background-color: var(--accent-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease-in-out;
}
```

It looks correct. The animation logic is fine. But it targets classes and a colour variable that their theme does not use. So the browser matched nothing and drew nothing.

This is the most common reason a Shopify button hover animation fails. The code is right. The selector is wrong. A selector is the part of a CSS rule that says which element to style. If it names a class the button does not have, the rule is skipped.

I reproduced this on a test store running Horizon, one of Shopify's newer free themes. I confirmed the button uses a different class than the merchant's CSS expected. Then I wrote a version that targets the real one. Below is the whole fix, plus a few other hover styles you can swap in.

## Why it happens

Every theme names its buttons its own way. There is no single button class shared across all Shopify themes.

The merchant's snippet used `.button-secondary.button-secondary-background-slide`. That class pair comes from a different theme. On Horizon the Add to cart button carries the class `.add-to-cart-button` instead. So the rule never applied.

Two other things stopped their code from working:

- **The colour variable did not exist.** Their code used `var(--accent-color)`. A CSS variable is a named value the theme defines once and reuses. Horizon has no variable called `--accent-color`, so that line produced no colour at all.
- **Curly quotes.** Their `content` value used smart quotes (the slanted kind a word processor makes) instead of straight quotes. CSS only accepts straight quotes. Smart quotes make the whole rule invalid.

So the fix is not about the animation. The slide effect they wrote is good. The fix is about pointing it at the right button and using values the theme understands.

## Find your button's real class first

Before you paste any code, check what your Add to cart button is actually called. This one step saves the most time.

- On your live store, open a product page.
- Right-click the Add to cart button and choose **Inspect**.
- A panel opens with the page code. The highlighted line is your button.
- Look for its `class="..."`. Note the class names.

On Horizon you will see `add-to-cart-button`. On Dawn you often see `product-form__submit` and `button`. On other themes it will be something else again. Whatever you see is the selector you target.

If you skip this and copy a snippet built for another theme, you will hit the exact wall the merchant hit. The animation is invisible because the selector matches nothing.

## The fix

Here is the version that works on Horizon. Black slides in from the left on hover. The text turns white. When you move the mouse away, the black slides back out.

I add it through a **Custom Liquid** block. That is a small box in the theme editor where you can drop your own HTML and CSS. It keeps your change separate from the theme's own files, so a theme update will not wipe it.

**Step 1. See the button at rest.**

This is the plain Add to cart button before any change. Note the outline style with no fill.

![Plain Add to cart button before the hover animation is added](/images/blog/shopify-button-hover-animation/01-before-plain-button.png)

**Step 2. Add a Custom Liquid section.**

- Open your theme editor.
- Go to a product page inside the editor.
- Scroll the left sidebar and click **Add section** at the bottom.
- Type **Custom Liquid** in the search box.
- Click the **Custom Liquid** result.

![Add section, search Custom Liquid, and click the result](/images/blog/shopify-button-hover-animation/02-add-custom-liquid-section.png)

**Step 3. Paste the code and save.**

Paste this into the **Liquid code** box, then click **Save**.

```liquid
<style>
  .add-to-cart-button { position: relative; overflow: hidden; isolation: isolate; }
  .add-to-cart-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease-in-out;
  }
  .add-to-cart-button:hover::before,
  .add-to-cart-button:focus-visible::before { transform: scaleX(1); }
  .add-to-cart-button:hover,
  .add-to-cart-button:focus-visible { color: #fff; --button-color: #fff; }
</style>
```

![Paste the code into the Liquid code box and click Save](/images/blog/shopify-button-hover-animation/03-paste-code-and-save.png)

**Step 4. Check the result.**

Move your mouse over the button. The black fills in from the left. The text turns white. Move away and it slides back out.

![Add to cart button on hover with black sliding in and white text](/images/blog/shopify-button-hover-animation/04-after-hover-slide.png)

I tested this on a Horizon store. The black fills in from the left on hover, the text turns white, then slides back out when you move away.

How each line does its job, in plain words:

- `position: relative` and `overflow: hidden` let the coloured layer sit inside the button and stay clipped to its shape.
- `::before` is a hidden layer added behind the text. It holds the black colour.
- `transform: scaleX(0)` squashes that layer to zero width at rest, so you see nothing.
- On hover, `scaleX(1)` stretches it back to full width. `transform-origin: left` makes it grow from the left edge.
- `transition: transform 300ms` makes that growth take 300 milliseconds instead of snapping instantly.
- The last rule flips the text to white while hovering, so it stays readable on the black.

## Adjust it

The code has three knobs you can change with no CSS knowledge.

- **Fill colour.** `background-color: #000` is black. Change `#000` to any hex colour. For example `#c0392b` for red or `#1a5c38` for green.
- **Speed.** `300ms` is the animation time. Lower is faster. Try `200ms` for snappy or `500ms` for slow and smooth.
- **Which button.** This targets the Add to cart button only. To style every button on the page, change `.add-to-cart-button` to your theme's general button class.

## An alternative: a simple lift and shadow

The slide fill is bold. Some stores want something subtler. A gentle lift on hover reads as premium and works on any button.

Paste this instead of the slide code. It nudges the button up a few pixels and adds a soft shadow.

```liquid
<style>
  .add-to-cart-button {
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .add-to-cart-button:hover,
  .add-to-cart-button:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  }
</style>
```

`translateY(-3px)` moves the button up 3 pixels. `box-shadow` draws the soft shadow under it. Both animate over 200 milliseconds. There is no colour change, so it suits any theme palette.

If you want a scale effect instead, swap `translateY(-3px)` for `scale(1.04)`. That grows the button by 4 percent on hover. Keep the number small. A big jump looks jarring.

## Where do I put custom CSS in Shopify?

You have two good homes for this code.

- **A Custom Liquid block or section.** This is what I used above. It lives on the page and holds the `<style>` tag. Good when you want the effect on one template only.
- **The theme's Custom CSS box.** Many themes have a field under **Theme settings > Custom CSS** in the editor. Paste the CSS there without the `<style>` tags. It then applies across the whole store. Not every theme has this field, so check yours first.

Both are safe. Both survive theme updates. Editing the theme's raw code files works too, but a Custom Liquid block is easier to find and remove later.

## How do I add a hover effect to my Add to cart button only?

Target the Add to cart button's own class, not a general button class.

On Horizon that class is `.add-to-cart-button`. Every rule above already uses it, so the effect stays on the Add to cart button and leaves other buttons plain.

If you used a broad class like `.button` by mistake, the effect would spread to search buttons, filter buttons, and more. Inspect the button, copy its exact class, and use only that.

## Does a button hover animation work on mobile?

Phones have no mouse, so there is no true hover on mobile. A tap acts like a quick hover, then the state clears.

This is fine. A hover animation is a desktop nicety. It should never hide information a mobile shopper needs. Since our effect only changes colour and motion, mobile shoppers still see a normal, working button. Nothing breaks.

Do not put anything important behind hover only. Keep the button label and colour readable at rest.

## Why is my Shopify button CSS hover not working?

Nine times out of ten it is one of these.

- **Wrong selector.** The class in your CSS does not match your button. Inspect the button and use its real class.
- **Missing variable.** You used a colour variable your theme does not define, like `var(--accent-color)`. Use a plain hex value such as `#000`.
- **Curly quotes.** Smart quotes in `content: ''` break the rule. Retype the quotes as straight quotes.
- **No positioning.** A `::before` fill needs `position: relative` and `overflow: hidden` on the button. Without them the layer floats free or spills out.
- **Another rule wins.** The theme's own style may override yours. Add `:focus-visible` alongside `:hover` and, as a last resort, `!important` on the losing line.

## If it did not work

Walk through this short list.

- **Nothing changes on hover.** Your selector is wrong. Re-inspect the button and confirm the class name matches your code exactly, including capital letters.
- **The button turns fully black with no slide.** The `::before` layer has no `transform: scaleX(0)` at rest, or the button lacks `overflow: hidden`. Re-check both lines.
- **The text vanishes on hover.** The text colour and the fill colour are the same. Change the `color` on hover so it contrasts with the fill.
- **The fill spills past the button edges.** Add `overflow: hidden` to the button rule.
- **It works in the editor but not live.** Make sure you clicked **Save**, then hard-refresh the live page to clear the old cached styles.

## Definitions people confuse

A few terms get mixed up when people search for this.

- **Hover animation vs hover effect.** People use both for the same thing. An effect is any change on hover, like a colour swap. An animation is an effect that moves over time, like the slide. Our fix is both.
- **Selector vs class.** A class is a label on an element, like `add-to-cart-button`. A selector is how you point CSS at it, written with a dot, like `.add-to-cart-button`.
- **Pseudo-element vs pseudo-class.** `::before` is a pseudo-element. It creates an extra layer to hold the colour. `:hover` is a pseudo-class. It describes a state, the moment the mouse is over the button.
- **Custom Liquid vs Custom CSS.** Custom Liquid is a block that can hold HTML, Liquid, and a `<style>` tag on one page. Custom CSS is a plain box for site-wide styles with no tags. Either works for this hover effect.

A Shopify button hover animation is a small touch. But it makes a store feel finished. Point the CSS at the right button, use real colour values, and the effect that would not budge suddenly works.


---

---
title: Change the Cart Background Color in Shopify
description: Color the middle of your Shopify cart page without fragile section IDs, using one resilient CSS rule that survives theme updates.
---

## The problem

A merchant asked about this on the Shopify Community. Their cart page had a colored header and a colored footer. But the big middle area, the part that lists the products, stayed plain white.

They wanted the whole cart page to share one color. Not just the top and bottom strips. The white block in the middle looked out of place.

This is a common Shopify cart background color question. The header and footer pick up your theme colors. The cart body does not. So you get a white band sitting between two colored bands.

I reproduced it on a test store on the Dawn (Pastel Blues) theme. The cart looked exactly like the merchant's screenshot. The middle was white while everything around it had color.

Here is the goal. Make the middle of the cart page match the color you want. Do it in a way that does not break when the theme updates.

## Why it happens

Your cart page is built from separate blocks. Shopify calls them sections.

Each section is its own box on the page. The header is one section. The cart items list is another. The cart total and checkout button are another. The footer is another.

When you set colors in the theme editor, some sections follow that setting and some do not. The header and footer usually pick up a background color. The cart items section often stays white by default.

So the color you see is not really one background. It is several section backgrounds stacked on top of each other. Most are colored. The middle one is white.

To fix it you have to color that one middle section. The trick is targeting it in a way that keeps working later.

## The wrong way: fragile section IDs

The most common answer people post uses the exact ID of your cart section. It looks like this.

```
#shopify-section-template--17689824788669__cart-items {
  background: #f3c299;
}
```

That long number is unique to one theme on one store at one moment. Copy that answer and it may not match your store at all.

Worse, that ID can change. Duplicate your theme, reinstall it, or let Shopify push an update, and the number can shift. When it shifts, your color disappears with no error. The white middle comes back and you have no idea why.

I avoid section IDs for this reason. There is a cleaner target that does not depend on any number.

## Before you start: confirm your theme

This fix is written for Dawn and Dawn-based themes. Pastel Blues is one of them. It is a paid theme built on Shopify's free Dawn theme, so it shares Dawn's cart markup.

Many free and paid themes are Dawn variants. Craft, Taste, Sense, Refresh, and Ride are all Dawn family. Studio, Colorblock, and Publisher too. If you run any of these, the rule below should fit.

To check your theme, go to Online Store, then Themes. The name is at the top of your live theme card. If it is Dawn or a Dawn variant, continue.

## The fix

This is one small CSS rule. Nothing to install. It only touches the cart page.

CSS is the styling language your theme already uses. You are adding a few lines to a file it already loads.

**Step 1. Open the code editor**

- Go to Online Store, then Themes.
- On your theme, click the ... button, then Edit code.

![Shopify theme actions menu open with Edit code highlighted](/images/blog/shopify-cart-background-color/01-edit-code.png)

**Step 2. Open base.css**

- In the left list, open the Assets folder.
- Click base.css. This is your theme's main stylesheet.

![Assets folder open in the code editor with base.css selected](/images/blog/shopify-cart-background-color/02-open-base-css.png)

**Step 3. Paste this at the very bottom, then Save**

Scroll to the end of the file. Paste this in. Click Save at the top right.

```
.shopify-section:has(.cart-items),
.shopify-section:has(.cart__footer) {
  background-color: #f3c299;
}
```

![base.css with the new cart color rule pasted at the bottom, ready to save](/images/blog/shopify-cart-background-color/03-paste-css-save.png)

Here is what that rule does in plain words. It finds the section that contains the cart items list. It finds the section that contains the cart footer. It paints both with your color.

The `:has()` part is the key. It means "the section that has this thing inside it." So you target the section by what it holds, not by a fragile ID number.

**Step 4. Pick your own color**

- Change `#f3c299` to any color code you like.
- `#f3c299` is a soft peach. Swap it for your brand color.

You can find a color code with any online color picker. Paste it in place of the peach one.

Here is the before, tested on the store. The middle is white.

![Shopify cart page before the fix, white middle section with a product listed](/images/blog/shopify-cart-background-color/04-cart-before-white-middle.png)

And the after. The middle now matches the color.

![Shopify cart page after the fix, the middle section colored to match the header and footer](/images/blog/shopify-cart-background-color/05-cart-after-coloured-middle.png)

I tested this on the cart. The white middle turned to the color. The header and footer stayed exactly as they were. No other page changed.

## Make it cover the empty cart too

The merchant came back with a good catch. The color worked when the cart had products. But when the cart was empty, the middle went white again.

Here is why. The `.cart-items` part of the rule points at the products table. That table only exists when there are products in the cart. Empty it, and the table is gone, so the rule has nothing to match.

The fix is one character. Remove the dot before `cart-items`.

```
.shopify-section:has(cart-items),
.shopify-section:has(.cart__footer) {
  background-color: #f3c299;
}
```

With the dot, you target a CSS class that only appears with products. Without the dot, you target the `cart-items` element itself. That element is on the page whether the cart is full or empty.

Replace your earlier rule with this one. Keep your own color code.

I tested both states. With the dot, the empty middle stayed white. Without the dot, the empty cart takes your color and the full cart still works.

![Empty Shopify cart, before with a white middle and after with the colored middle, tested on the store](/images/blog/shopify-cart-background-color/06-empty-cart-before-after.png)

So use the dotless version. It handles the full cart and the empty cart with one rule.

## An alternative: use the theme's Custom CSS box

Editing base.css works and is what I tested. But there is a slightly safer home for the rule if your theme offers one.

Some Dawn-based themes have a Custom CSS field in the theme editor. You reach it under Theme settings, then Custom CSS.

Paste the same rule there instead of base.css. The benefit is update safety. When Shopify updates the theme, it can overwrite base.css. A theme settings field is kept separate, so your rule survives.

If your theme has that box, prefer it. If it does not, base.css is fine. Just remember to re-add the rule if you ever reinstall the theme from scratch.

Either way the rule is identical. Only the place you paste it changes.

## How do I change the Shopify cart page background color?

Add the one CSS rule above to your theme. It targets the cart items section and the cart footer section by what they contain.

That covers the full width of the cart page body. It leaves the header and footer of the site alone. Only the cart middle changes.

If you want the color to reach the very edges of the screen, the rule already does that. The section spans the full page width, so the color runs edge to edge behind the content.

## Does this change the Shopify cart drawer too?

No. The rule above only touches the cart page. That is the full page you land on at /cart.

The cart drawer is the small panel that slides in from the side when you add a product. It uses different markup. So this rule does not affect it.

To color the drawer as well, target its own container. In Dawn that is usually `.cart-drawer` or `.cart-drawer__inner`. Add a separate rule for it if you want both to match.

Keep the two rules apart. One for the cart page, one for the drawer. That way you can give each its own color if you ever want to.

## Will this Shopify cart color survive a theme update?

The `:has()` approach is built to survive. It does not rely on a section ID that can change. It matches by structure, which stays stable across updates.

The one risk is the file. If you paste into base.css and Shopify overwrites that file during an update, the rule goes with it.

That is why the Custom CSS box is the safer home when your theme has one. It is not overwritten by updates.

So for the longest life, put the rule in Theme settings, then Custom CSS. If you keep it in base.css, just check it is still there after any major theme update.

## How do I change the Shopify Dawn cart color specifically?

Dawn is the theme this fix was built and tested on. Pastel Blues is a Dawn variant, so the steps are the same.

Open base.css in the code editor. Paste the dotless rule at the bottom. Save. Then swap the peach color for yours.

Dawn also lets you set color schemes in the theme editor. Those change groups of colors at once. But they do not isolate the cart middle on their own, which is why the CSS rule is the direct route.

If you run a different Dawn variant like Craft or Sense, the same rule applies. They share Dawn's cart structure, so `cart-items` and `.cart__footer` are present in all of them.

## If it did not work

**The color did not appear at all.** Make sure you saved base.css. Then refresh the cart page. Browsers cache stylesheets, so do a hard refresh to pull the new file.

**Only the full cart changed, not the empty cart.** You likely used the version with the dot. Switch `.cart-items` to `cart-items` with the dot removed.

**The color went everywhere, not just the cart.** Check you pasted the rule exactly. A missing brace or a stray line can leak the color onto other pages. Compare it character by character with the rule above.

**Your theme is not Dawn based.** The selectors may differ. Open your cart page, right click the white area, and choose Inspect. Find the section wrapper around the cart items, then adapt the `:has()` rule to whatever element sits inside it.

**The color vanished after an update.** Your rule was probably in base.css and got overwritten. Re-add it, and move it to the Custom CSS box if your theme has one.

## Definitions people confuse

**Cart page vs cart drawer.** The cart page is the full page at /cart. The cart drawer is the slide-in panel. They use different code, so a rule for one does not touch the other.

**Section vs element.** A section is a whole block on the page, like the cart items area. An element is a single tag inside it. This fix colors the section based on an element it contains.

**Class vs element selector.** In CSS, `.cart-items` with a dot means a class name. `cart-items` without a dot means an element or tag. That single dot is the whole reason the empty cart behaved differently.

**Theme color scheme vs custom CSS.** A color scheme is a preset group of colors in the theme editor. Custom CSS is a rule you write yourself for one exact spot. The cart middle needed the second, targeted approach.

Once you understand those four pairs, the fix reads clearly. You are coloring one section, matching it by an element inside, using an element selector so it holds for both the full and empty cart.


---

---
title: "Shopify Cart Drawer Pushes the Page? Fix It on Horizon"
description: "Horizon's cart drawer pushes the page sideways or opens without dimming it. Free fixes, code checked against Horizon 4.3.0, plus what to check if they fail."
---

## The problem

You add something to the cart on your Shopify store, the cart drawer opens, and the whole page jumps sideways to make room for it. It does not float over the page like it used to. It shoves everything left.

A merchant hit exactly this on the Shopify Community. They were on the Horizon theme and asked for the "normal flyover cart" back, the kind that slides in over the page instead of pushing it.

I reproduced it on a test store running Horizon, found why it happens, and built a small fix. The page stops moving, and the cart floats over a dimmed page again. It is free, it is one block of code, and it does not need an app.

If you already tried a fix and it did not work, go straight to [If the code did not work](#if-the-code-did-not-work). Each cause there comes with the check that rules it out.

![The Horizon cart drawer pushes the whole page sideways when it opens](/images/blog/shopify-cart-drawer-horizon/01-horizon-cart-drawer-pushes-page.png)

## What a cart drawer is

A cart drawer is the little cart panel that slides out from the side when you add a product, so shoppers can see their cart without leaving the page they are on. Shopify themes also call it a slide cart, side cart, or mini cart.

The alternative is a cart page, where clicking the cart takes the shopper to a full `/cart` page and away from what they were browsing. A drawer keeps them on the page, which is why most stores prefer it.

## Why Horizon pushes the page instead of floating over it

Horizon has two different behaviors for the cart drawer, and it switches between them based on screen width.

- On phones and narrow screens (under 990 pixels wide), the cart opens as an overlay. It floats over the page, and the page behind it is locked so it cannot scroll.
- On desktop (990 pixels and wider), Horizon slides the cart in and pushes the whole page sideways to sit next to it. There is no overlay and no dim. The page just shifts.

So nothing is broken. The desktop cart is a "squeeze" drawer by design, and there is no setting in the theme editor to turn it back into an overlay.

That is the whole reason merchants feel like the flyover cart "disappeared." On a wide monitor they only ever see the squeeze version.

The push arrived with Horizon 4.0. In Horizon 3 the cart floated over the page on every screen size. I checked the code against Horizon 4.3.0, the latest release on 15 October 2026, and the desktop push is still there.

## First, a quick check before you touch code

Before the fix, rule out the simplest cause. Your cart might be set to open as a full page instead of a drawer. Horizon ships set to Drawer, but someone may have switched it to Page.

- In your admin, go to Online Store, then click Edit theme on your Horizon theme.

![The Edit theme button on the Horizon theme in Online Store](/images/blog/shopify-cart-drawer-horizon/10-online-store-edit-theme.png)

- Open Theme settings, then Cart.
- Look at the Type setting. If it is set to Page, switch it to Drawer and click Save.

![Theme settings, Cart, with the Type setting switched to Drawer](/images/blog/shopify-cart-drawer-horizon/11-cart-type-drawer.png)

If Type was already set to Drawer and the page still slides sideways on desktop, you are seeing the squeeze behavior. The code below fixes that.

## The fix: bring back the flyover cart on Horizon

The fix stops the page from shifting and adds a dim layer behind the cart, so the cart reads as a floating panel again. It only changes desktop, because your phone cart already floats.

Here is where the code goes.

- In your admin, go to Online Store.
- Next to your live Horizon theme, click the three dots, then Edit code.

![The three-dot menu on the live Horizon theme, with Edit code](/images/blog/shopify-cart-drawer-horizon/12-edit-code-menu.png)

- Open the file `layout/theme.liquid`. Liquid is the code Shopify themes are written in, and this file wraps every page of your store.
- Scroll to the very bottom and paste the block below just before the closing `</body>` tag.
- Click Save.

![Open layout/theme.liquid in the code editor and paste before the closing body tag](/images/blog/shopify-cart-drawer-horizon/02-paste-code-theme-liquid.png)

This is the code to paste:

```liquid
{%- comment -%} Flyover cart drawer on desktop {%- endcomment -%}
<style>
  @media screen and (min-width: 990px) {
    .page-wrapper--drawer-open { margin-inline-end: 0 !important; }
    .page-wrapper--drawer-open #header-group > .shopify-section { z-index: calc(var(--layer-sticky, 8) - 2) !important; }
    .flyover-scrim {
      position: fixed;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.5);
      z-index: calc(var(--layer-sticky, 8) - 1);
      transition: opacity 0.25s ease;
    }
    .flyover-scrim.is-visible { opacity: 1; pointer-events: auto; }
  }
</style>
<script>
  (function () {
    var wide = window.matchMedia('(min-width: 990px)');
    var scrim = document.createElement('div');
    scrim.className = 'flyover-scrim';
    scrim.addEventListener('click', function () {
      var d = document.querySelector('theme-drawer[open]');
      if (d && typeof d.close === 'function') d.close();
    });
    document.body.appendChild(scrim);
    document.addEventListener('theme-drawer:open', function () {
      if (wide.matches) scrim.classList.add('is-visible');
    });
    document.addEventListener('theme-drawer:close', function () {
      if (!document.querySelector('theme-drawer[open]')) scrim.classList.remove('is-visible');
    });
    if (wide.matches && document.querySelector('theme-drawer[open]')) scrim.classList.add('is-visible');
  })();
</script>
```

The first line inside the style block stops the page from being pushed to the side. The second line moves your store's header, and the announcement bar above it, under the dim layer while the cart is open. Without it, Horizon draws the header on top of the cart, and the header's icons cover the first item in the cart. With a transparent header, Horizon also lifts the announcement bar above the cart, where it hides the cart's title and close button. The rest adds a dark, see-through layer behind the cart and lets a shopper click that dim area to close the cart.

Save it, then open your store on a desktop screen and add something to the cart. The page should stay put, and the cart should slide in over a dimmed page.

![Fixed: the cart floats over the page and dims it, and the page no longer shifts](/images/blog/shopify-cart-drawer-horizon/03-horizon-cart-flyover-fixed.png)

On my test store the first version of this block stopped the page moving, floated the cart over it, and closed the cart when I clicked the dim. That version left the header drawn over the top of the cart, which is what the header line now fixes. I tested the current block on Horizon 4.3.0 at 1280 pixels wide, with the header set to transparent and with it off. If you pasted the block before 15 October 2026, replace it with the one above.

## How to adjust it

Two things are easy to tweak.

- Darkness of the dim. Change the `0.5` in `rgba(0, 0, 0, 0.5)`. Use `0` for no dim at all, or a higher number up to `1` for a darker overlay. Something like `0.4` is a gentle dim.
- If you do not want the dim or the click-to-close, keep only the first two lines inside the `@media` rule (the `margin-inline-end` line and the `#header-group` line) and delete the rest. The page stops shifting, and the cart floats over it without dimming anything.

## Horizon 4: the cart opens over the page, but nothing dims

Horizon 4 has a second version of this problem. A merchant on Horizon 4.2.0 reported it on the Shopify Community: the cart drawer opened, the page behind it did not dim, and the page could still be scrolled.

Another reply had suggested editing two theme files so the cart opens as an overlay on desktop too. When we looked at the store, that part was in place: the page behind the cart was locked, so it no longer scrolled. But the dark layer that should sit behind the cart never appeared. The page looked exactly as it did before, just frozen, so it seemed like the edits had failed.

![Horizon 4.2 cart drawer open on desktop, with the page behind it not dimmed](/images/blog/shopify-cart-drawer-horizon/04-horizon-42-cart-no-dim.png)

The dark layer is there, but it has no colour. Horizon takes that colour from a shadow colour that used to come from the theme's colour schemes. Horizon 4.0 replaced colour schemes with colour palettes, and in the theme code from 4.0.0 to 4.3.0 nothing sets that colour any more. The layer is drawn fully transparent. The same layer sits behind the cart on phones, so a phone cart does not dim either.

The fix is one line of CSS that gives the layer a real colour. CSS is the styling code that controls how a theme looks. You do not need to open the code editor for this one, because Shopify has a Custom CSS box in the theme editor that applies to the whole store.

### Add the overlay colour in Custom CSS

- Go to Online Store in your Shopify admin.
- Click Edit theme on your Horizon theme.
- Click the Theme settings icon, the gear in the row of icons at the top left of the editor.

![Theme settings icon in the Horizon theme editor](/images/blog/shopify-cart-drawer-horizon/05-theme-settings-icon.png)

- Scroll down the list and click Custom CSS, just above Theme style.

![Custom CSS at the bottom of the Theme settings list](/images/blog/shopify-cart-drawer-horizon/06-custom-css.png)

- Paste this line into the box:

```css
.theme-drawer__dialog::backdrop { background: rgb(0 0 0 / 0.5); }
```

![The overlay line pasted into the Custom CSS box](/images/blog/shopify-cart-drawer-horizon/07-paste-overlay-css.png)

- Click Save in the top right corner.

![Save button in the theme editor](/images/blog/shopify-cart-drawer-horizon/08-save.png)

Open your store on a desktop screen and click the cart. The page behind it now dims.

![After: the page is dimmed behind the Horizon 4.2 cart drawer](/images/blog/shopify-cart-drawer-horizon/09-horizon-42-cart-dimmed.png)

We tested the line on the merchant's own live store, which runs Horizon 4.2.0. The overlay went from fully transparent to 50 percent black, and the page behind the cart stayed locked.

A few notes on this version of the fix:

- The `0.5` sets how dark the overlay is. `0.3` gives a light dim and `0.7` a heavy one.
- The line also dims the page behind the cart on phones, where Horizon already opens the cart as an overlay.
- The line also darkens the page behind Shopify's chat drawer, if you use Shopify Inbox. Horizon builds both drawers the same way.
- On older Horizon versions (3.x) the cart uses a different name for this layer. If the line does nothing on your store, add `.cart-drawer__dialog::backdrop` to it, like this: `.theme-drawer__dialog::backdrop, .cart-drawer__dialog::backdrop { background: rgb(0 0 0 / 0.5); }`.
- Custom CSS is a theme setting, not a code file, so you never have to open the code editor to change or remove it.

### Which fix do you need?

Open your cart on a desktop screen and look at the page behind it.

- If the page slides sideways to make room for the cart, use the `layout/theme.liquid` block earlier in this article. It stops the push and adds its own dim layer.
- If the page stays still and locks in place but does not darken, use the Custom CSS line in this section.

On an unedited Horizon 4 theme, the Custom CSS line changes nothing on desktop. There the cart opens as a side panel, not as an overlay, so the layer the line colours does not exist.

The Horizon 4.2 case came from <a href="https://community.shopify.com/t/problem-with-my-cart-drawer/688769" rel="nofollow">this Shopify Community thread</a>.

## If the code did not work

Each cause below comes from how the Horizon code is built, and each has a check you can do in a minute.

- **The cart is set to Page.** Horizon only adds the cart drawer to the page when Theme settings, Cart, Type is set to Drawer. It ships set to Drawer, but someone may have switched it to Page. Check that setting first, as shown at the top of this article.
- **You tested on the cart page.** Horizon does not load the drawer on the `/cart` page, so the cart icon there opens the full cart page. Test from your home page or a product page.
- **The window is narrower than 990 pixels.** The `theme.liquid` block only acts at 990 pixels and wider. Browser zoom counts too: at 125 percent zoom, a window 1,200 pixels wide reads as 960 pixels to the theme. Set the zoom to 100 percent and widen the window.
- **You edited a different theme than your live one.** Your store shows only the published theme. Copies and theme updates sit under Draft themes, and an edit to a draft does not reach shoppers. Open Edit code from the theme at the top of the Online Store page, which is your live theme.
- **The code is in the wrong place, or part of it is missing.** The whole block, from `{%- comment -%}` to `</script>`, belongs in `layout/theme.liquid` just before `</body>`. If you can see the code as text at the bottom of your store, a `<style>` or `<script>` tag was left out. Search the file for `flyover-scrim`: it should appear three times.
- **The two fixes were swapped.** The `theme.liquid` block contains a script, and a script cannot run from the Custom CSS box. The one-line Custom CSS fix pasted into `theme.liquid` without `<style>` tags shows up as plain text on your store.
- **The header covers the top of the cart.** That is the first version of this block, without the `#header-group` line. Replace your block with the current one. The same line fixes an announcement bar that sits over the cart's title, which happens when the header is set to transparent.
- **Your theme is not Horizon 4.** The push started in Horizon 4.0, and the code above targets parts that only exist in Horizon 4. To see your version, go to Online Store and click the three dots next to your published theme. The menu lists it as Version, for example Version 4.3.0. If you are on Horizon 3, your cart already floats over the page, and only the Custom CSS line with `.cart-drawer__dialog::backdrop` applies.
- **An app replaces the cart.** A slide cart app opens its own panel instead of Horizon's drawer, so code aimed at Horizon's drawer has no effect on it. In the theme editor, open App embeds, the list of pieces each installed app adds to your theme, and turn the cart app off for a moment. If the cart now changes, the app owns it, and its settings are where the change belongs. [This guide covers cart drawers that come from an app](/blog/shopify-cart-drawer).
- **It stopped working after a theme update.** Shopify copies code edits into an updated theme when they do not conflict with the update. When they do, you have to copy them across yourself. Open `layout/theme.liquid` in the updated theme and search for `flyover-scrim`.

![The three-dot menu on a Horizon theme in Online Store, showing Version 4.3.0](/images/blog/shopify-cart-drawer-horizon/13-theme-version-number.png)

## The no-code alternative: a slide cart app

If you would rather not edit theme code, a slide cart app replaces the built-in drawer with its own overlay cart. One example is iCart Cart Drawer Cart Upsell.

These usually add more than just the overlay. Most of them bundle a free-shipping progress bar, upsell and cross-sell offers inside the cart, and a sticky cart button. If you want those extras anyway, an app can be a good trade. If all you want is the flyover behavior, the code above does it for free.

## Will this slow my store down?

No. The code is tiny. It is a small block of CSS and a few lines of JavaScript that set up once when the page loads and then only act when the cart opens or closes. There is no external file to load and no app to install, so there is nothing measurable to slow a page down.

## Does the fix affect mobile?

The `theme.liquid` block does not. It is wrapped in a rule that only applies at 990 pixels and wider, so your phone cart is left as it is.

The Custom CSS line does reach phones. It dims the page behind the phone cart, which Horizon 4 leaves undimmed.

## Why is there no setting for this in the theme editor?

Horizon exposes a Cart Type setting for Page versus Drawer, but it does not expose a separate control for overlay versus push-style drawer. The push behavior on desktop is built into the theme, not offered as an option.

Because Horizon has no setting for it, the change has to be a small code edit or an app. That is why both the merchant and the people replying on the forum landed on "it needs a code edit."

## Will a theme update undo this?

It can. When you update Horizon, Shopify adds the new version as a draft theme. It copies your code edits across when they do not conflict with the update, and when they do conflict you have to copy them yourself. Shopify's own advice is to save a copy of any customized code before you update.

So keep a copy of the code block somewhere safe. After an update, open `layout/theme.liquid` in the new version and check the block is still there before you publish it. If you use a slide cart app instead, an update will not remove it, since the behavior lives in the app rather than the theme file.

## Cart drawer terms people mix up

- Cart drawer. The cart panel that slides out from the side and keeps the shopper on the page.
- Slide cart, side cart, mini cart. Different names for the same cart drawer.
- Flyover or overlay cart. A cart drawer that floats over the page and dims it, rather than pushing the page aside.
- Push or squeeze drawer. A cart drawer that shifts the page sideways to sit next to it. This is how Horizon's desktop cart drawer has worked since version 4.0.
- Cart page. A full separate `/cart` page, the opposite of a drawer, which takes the shopper off the page they were on.

## Summary

On Horizon 4, the desktop cart drawer pushes your whole page sideways by design, and there is no theme setting to change it. Below 990 pixels it already floats over the page.

To bring the flyover back on desktop, paste one block into `layout/theme.liquid` before `</body>`. It stops the page shifting, keeps the header under the cart, and dims the page behind it. If your cart already floats but the page behind it does not darken, add the one Custom CSS line instead.

If either fix did nothing, work through [If the code did not work](#if-the-code-did-not-work): the cart Type setting, the screen width, the live theme and the theme version cover most cases.


---

---
title: Shopify Cart Drawer Showing on the Page? The Mobile Fix
description: On mobile, your Shopify cart drawer flashes at the top of the homepage with an empty-cart message and category buttons. Here is why it happens and the one CSS rule that keeps it hidden until it is opened.
---

## The problem

A merchant asked about this on the Shopify Community, and the screenshot made it instantly clear.

On their phone, when they returned to the homepage after browsing, a strange block appeared at the very top of the page. It sat above the announcement bar and above the logo. It showed "Your cart is currently empty" and three big buttons for their main categories.

They called it a "module" and wanted to switch it off, because it pushed the whole store down and ruined the first impression on mobile.

Their store runs Vinova, a theme sold on ThemeForest. But this exact behaviour shows up on many themes that use a slide-out cart, so the explanation and the fix below apply well beyond Vinova.

![The mobile cart drawer showing at the top of the homepage](/images/blog/shopify-cart-drawer-showing-on-page/01-cart-drawer-showing-top.png)

I opened their live site on a mobile view to see what that block really was. It was not a separate module at all.

## Why it happens

That block is your theme's **mobile slide-out cart**. It is the same panel that normally slides in from the side or bottom when a shopper taps the cart icon. The empty-cart message and the category shortcuts are just what it shows when the cart has nothing in it yet.

So why is it stuck at the top of the page instead of hidden?

Here is the mechanism. A slide-out cart lives in your page code near the top of the body. Normally your theme uses CSS to push it off-screen and hide it until it is opened. That CSS is what keeps it out of the way.

On mobile, when you tap the browser back button or return to a page you already visited, the browser often restores that page from memory very fast. For a split second, the page can render before the "hide off-screen" styling is applied. In that gap, the cart panel is just a normal block sitting near the top of the page, so it shows up above everything else.

On this theme the cart panel is positioned with `position: fixed` and set to `visibility: hidden` until it gets an `active` class. When that positioning has not kicked in yet, the panel falls back into the normal page flow and lands at the top.

In short, nothing is broken and no app is doing this. It is your own cart drawer flashing into view before its hide styling loads.

## The fix: keep it off-screen until it is actually open

The clean fix is to force the cart panel out of the page flow at all times, unless it is open. The key is to apply that rule as early as possible, so it is in place before the panel can ever flash.

The safest place for that is the head of your theme, because styles in the head apply before the body is drawn.

![Open layout theme.liquid and paste the code before the closing head tag](/images/blog/shopify-cart-drawer-showing-on-page/02-edit-theme-liquid.png)

### Step 1. Open your theme code

Go to Online Store, then Themes. Click the three dots next to your theme, then Edit code.

### Step 2. Open layout, then theme.liquid

In the file list on the left, open the layout folder, then click theme.liquid. This is the master file that wraps every page.

### Step 3. Paste the rule just before the closing head tag

Scroll down until you find the `</head>` tag. Paste this block on the line just above it, then click Save.

```html
<style>
  #mobile-blockcart:not(.active){
    position: fixed !important;
    top: 100% !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
</style>
```

That is the whole fix. On the Vinova theme the cart panel has the id `mobile-blockcart` and gets an `active` class when it opens, so this rule hides it whenever it is not open.

## Why placing it in the head matters

You could paste this rule into a Custom CSS box in theme settings instead, and it would help. But the flash happens before your main stylesheet loads, so a rule that arrives late can still let the panel blink once.

Putting the rule in the head, inside a `<style>` tag, means the browser reads it while it is still building the page. The cart panel is pinned off-screen from the very first frame, so it can never appear at the top, even during a fast back-button return.

## The cart still opens normally

This is the part people worry about, so let me be clear.

The rule only hides the cart panel while it is **not** open. The moment a shopper taps the cart, your theme adds the `active` class, and the rule stops applying to it. The panel slides open exactly as before.

I tested this on the live store. With the rule in place, the empty-cart block never appeared at the top. Then I tapped the cart button and the drawer opened full screen as normal. Nothing about the shopping experience changes. Only the unwanted flash is gone.

![The clean top of the page after the fix, with the cart panel hidden](/images/blog/shopify-cart-drawer-showing-on-page/03-cart-drawer-hidden.png)

## If you are on a different theme

The idea is the same on any theme, but the id in the rule may differ. You need the id or class of your own cart drawer element.

On a computer, open your storefront, right click the cart drawer area, and choose Inspect. Look for the wrapper element of the slide cart. It usually has a name like `cart-drawer`, `mini-cart`, `slide-cart`, `CartDrawer`, or `off-canvas-cart`.

Then swap that name into the rule. For example, if your drawer element is `<cart-drawer>` and it opens with an `open` class, your rule becomes:

```html
<style>
  cart-drawer:not(.open){
    position: fixed !important;
    top: 100% !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
</style>
```

Match the element name and the "open" class to whatever your theme uses. If you are not sure, your theme developer or the theme's support can tell you both in one message.

## What to check if it still flashes

If the block still appears after the fix, run through these.

- Confirm you pasted the rule before `</head>`, not before `</body>`. Placement is the whole point.
- Confirm you saved the file and are testing on the live site, not the editor preview.
- Clear your mobile browser cache, or test in a private window. The old cached page can keep showing the flash for a while.
- Check the id in the rule matches your theme. If your drawer is not `#mobile-blockcart`, the rule targets nothing. Use Inspect to find the real name.
- Make sure you did not accidentally paste it inside another tag. It must be its own `<style>` block.

## Why it only happens on mobile and only sometimes

Two questions come up a lot with this bug, so here are the short answers.

**Why only on mobile?** Many themes only load the slide-out cart on small screens and use a different cart on desktop. Desktop often opens the cart on its own page or in a dropdown, so the off-screen panel is not there to flash.

**Why only when I come back to a page?** A first, fresh page load usually applies the styling fast enough that you never see the panel. The flash shows up on a back-button return, because the browser restores the page from memory and can paint it a beat before the styling settles. That is why it feels random.

## This is not an app, and not a broken theme

It is worth saying plainly, because it changes where you look.

You do not need to uninstall an app. No app added this block. It is a core part of your theme, the cart drawer, appearing at the wrong moment.

You also do not need to rebuild your theme or contact the theme author for a rewrite. A single CSS rule in the head pins the panel off-screen until it is opened, which removes the flash without touching how the cart works.

## Want a different cart entirely

If you would rather replace your theme's cart with a purpose-built slide cart, there are dedicated apps for that. They give you an upsell block, a free-shipping bar, and a cleaner mobile drawer, and they manage their own show and hide logic.

Popular ones are iCart Cart Drawer Cart Upsell, Slide Cart Drawer, and Corner Cart. This is optional. For the flashing-at-the-top problem specifically, the one CSS rule above is all you need, and it is free.

## The short version

The block at the top of your mobile homepage is your theme's slide-out cart, showing its empty state. It flashes there because its hide styling loads a moment too late on a back-button return. Paste a small CSS rule into the head of layout/theme.liquid that pins the cart panel off-screen unless it is open. The flash disappears and the cart still opens normally when tapped.


---

---
title: "Shopify Cart Drawer: How to Edit One You Did Not Install"
description: "Your Shopify cart drawer shows a button or a banner you cannot find anywhere in your theme. Here is how to work out what is actually drawing it, in about sixty seconds, and what to do in each case."
---

## The problem

A merchant posted this on the Shopify Community with a screenshot and a very reasonable question.

Her cart drawer had two things in it she did not want:

- A green **COMPLETE ORDER** button, where she wanted a plain black **Checkout** button.
- A red promotional banner reading **1+1 GRATIS**, in Dutch, on an English store.

She had not written either of them. In her words, "some code was added by another editor on my site". She wanted both gone.

The obvious move is to open the theme code and search for the text. That is what most people try, and on this store it would have found nothing at all.

The reason is the interesting part, and it applies to a lot more stores than this one.

## Your cart drawer might not be in your theme

A cart drawer is the panel that slides in from the side when you add something to the basket, instead of sending the shopper to a full cart page. Every modern Shopify theme has one, and most stores use it.

But the drawer on any given store can come from three completely different places, and they are edited in three completely different ways.

**1. Your theme.** Dawn, Horizon and most paid themes ship a cart drawer of their own. It is a theme setting (usually **Theme settings > Cart > Cart type: Drawer**), and its wording and colours come from the theme editor and the theme's language file.

**2. An installed app.** Cart drawer apps are a big category. UpCart, Slide Cart, Rebuy and others replace the theme's drawer entirely with their own. Nothing about them is editable from the theme editor, because the drawer is not in your theme.

**3. A script somebody injected.** This is the one people rarely check. A `<script>` tag pasted into your theme by a freelancer, an agency, or a "free" service can draw its own cart drawer over the top of everything. It is not an app, so it does not appear in your Apps list. It is not the theme, so searching the theme for the button text finds nothing.

That third case is what this merchant had. And it explains her follow-up perfectly: "My website does not currently have an upcart app installed so I'm not sure why the cart drawer is having these errors."

She was right. The app was not installed. Something was drawing an UpCart-style drawer anyway.

## How to find out which one you have

Sixty seconds, no code, no apps.

- Open your store and add anything to the cart so the drawer appears.
- Right-click the page, then **View Page Source**.
- Press Ctrl+F and search for `cart-drawer`, then `upcart`, then `slidecart`.

What you find tells you which branch you are on.

If the only matches look like `cart-drawer.js` from your own domain under `/cdn/shop/t/`, it is your theme. Edit it in the theme editor.

If you see an app's name in a script loaded from that app's domain, it is an app. Edit it in the app.

If you see an app-flavoured class name like `upcart-discount-code-badge` but **no matching app in your Apps list**, and a script loading from a domain you do not recognise, you are on branch three.

That is exactly what her store showed. One line, near the top of the cart page:

```html
<script src="https://shopoe.net/jquery.js" defer></script>
```

![The live cart page source showing an external script injected from an unknown domain](/images/blog/shopify-cart-drawer/01-injected-script-in-cart-source.png)

That file is not jQuery, whatever it is named. It was drawing the drawer, the green COMPLETE ORDER button, and the Dutch discount banner.

## Branch three: remove the injected script

If the drawer is coming from a script you did not add, the fix is to find and remove that script.

- **Online Store > Themes > ... > Edit code**.
- Use the code editor's search to look for the domain name across the whole theme.
- Check **layout/theme.liquid** first. It is where injected scripts nearly always land, right before `</head>` or `</body>`.
- Also check custom snippets and any section a previous developer added.
- Delete the `<script src="...">` line, then Save.
- Reload the cart and check the drawer.

Duplicate your theme before you start, so you have a copy to fall back to.

If the search turns up nothing in the theme, check **Settings > Customer events** for a custom pixel, and check your app embeds under **Theme settings > App embeds**. Both can inject scripts without touching theme files.

### Treat an unknown script as unauthorised

This part matters more than the button colour.

A third-party script running on your storefront can do anything the page can do. Rewrite prices, change the checkout button destination, read what shoppers type, or add and remove content on any page. If you did not add it and you cannot identify who did, the safe assumption is that it should not be there.

Once you have removed it:

- Check **Settings > Users** and remove collaborators and staff you no longer work with.
- Check **Settings > Apps** for anything you do not recognise, and uninstall it.
- Look at your theme's edit history for who changed what.

And a related warning, because the same thread demonstrated it. When you post a problem like this on a public forum, people will offer to fix it for you and ask for store access or a WhatsApp chat. You do not need to give anyone staff access, a collaborator invite, or your login to change a button colour. Everything in this article is done from your own admin.

## Branch two: it really is an app

If the source does show a cart drawer app, and the app really is installed, then everything is editable. You just do it in the app rather than in the theme.

Using UpCart as the example, because it is the most common one and it is the drawer the injected script above was imitating.

**To change the button colour**, open the app, go to the **Design** tab, then **Button settings**. Set **Button color** to `#000000` and **Button text color** to white.

![Cart drawer app button settings, setting a black button with white text](/images/blog/shopify-cart-drawer/02-cart-drawer-button-settings.png)

**To change the button wording**, go to **Settings**, then **Edit copy**, then **Footer**, then **Checkout button text**. Replace COMPLETE ORDER with `Checkout`. Most drawers support a token for the cart total, so `Checkout • {{total_price}}` gives you a button that shows the amount.

![Cart drawer app edit copy screen showing the checkout button text field](/images/blog/shopify-cart-drawer/03-cart-drawer-checkout-button-text.jpeg)

**To remove a promotional banner**, that is a discount message rather than a bug. Open the **Discounts** module, then **Manage all discounts**, and either edit the text or switch the discount off.

![Cart drawer app discounts module with manage all discounts](/images/blog/shopify-cart-drawer/04-cart-drawer-manage-discounts.jpeg)

The pattern generalises. In any cart drawer app, colours live under a Design or Style tab, wording lives under a copy or text editor, and promotional banners are configured as discounts or announcements rather than typed in as HTML.

## Branch one: it is your theme

The easiest case, and worth spelling out because a fair number of people go looking for an app that was never there.

**To switch the drawer on or off**: theme editor, **Theme settings > Cart**, then set **Cart type** to Drawer, Popup, or Page.

**To change the button colour**: theme editor, **Theme settings > Colors**. The drawer's checkout button uses your accent or primary button colour. It is not styled separately.

**To change the button wording**: this one surprises people. It is not in the theme editor at all. Go to **Online Store > Themes > ... > Edit default theme content**, and search for the cart strings. Button labels live in the language file, not in the settings.

That is also why searching a theme's Liquid files for "Checkout" often finds nothing useful. The Liquid says `{{ 'sections.cart.checkout' | t }}`, and the actual word lives in `locales/en.default.json`.

## What is a cart drawer, and should you use one?

A cart drawer keeps the shopper on the page they were browsing. They add an item, the panel slides in, they close it, and they carry on. No page load, no context switch.

The alternative is the cart page, a full page at `/cart` that the shopper is navigated to.

Drawers generally win for stores where people buy several items in a session, because they make it easy to keep shopping. Cart pages are better when the cart itself needs space, for example when you sell configurable products with lots of line item detail, or you need to show a long shipping calculator.

You do not need an app for a drawer. Every free Shopify theme has one built in. Apps are worth it when you want the extras: upsells inside the drawer, free shipping progress bars, tiered reward messages, sticky add-ons. If you just want a drawer instead of a page, the theme setting is enough.

## How to create a cart drawer in Shopify

For completeness, since it is the same settings screen.

- Theme editor, **Theme settings** in the left sidebar.
- Open **Cart**.
- Set **Cart type** to **Drawer**.
- Save.

That is the whole thing on Dawn, Horizon, and most themes built in the last few years. Some older or heavily customised paid themes name it differently (Ajax cart, Slide cart, Mini cart) but the setting is in the same place.

## What to check if the drawer still looks wrong

**You removed the script but the drawer is unchanged.** Hard refresh, and check in an incognito window. Storefront assets cache aggressively. Also confirm you edited the published theme rather than a draft.

**The old button text is back after a theme update.** Language file edits survive updates, but if you edited Liquid directly, an update can overwrite it. Prefer the theme content editor over hard-coding strings.

**Two drawers open at once.** Classic symptom of an app drawer and a theme drawer both being active. Turn the theme's cart type back to Page, and let the app own the drawer.

**The drawer looks right on desktop and broken on mobile.** Check for custom CSS in theme settings that targets the drawer. Fixed widths in pixels are the usual culprit.

**You cannot find the text anywhere.** Search in this order: the language file, then app settings, then the page source for an external script. In that order, most cases resolve on the first or second step.

## The takeaway

If your Shopify cart drawer shows something you cannot find in your theme, stop searching the theme. Look at the rendered page source instead and find out what is actually drawing it.

Three possible answers, three different places to make the change. The theme, an app, or a script somebody pasted in.

On the store in this thread it was the third one, and the merchant was right that the app was not installed. A single external script line was drawing a drawer that looked like an app's. No amount of theme editing would ever have fixed it, and the real fix was to remove the script and audit who has access to the store.


---

---
title: "Shopify Cart Progress Bar: Count Items, Not Just Money"
description: Add a progress bar to the Shopify cart that counts items toward a full box, or money toward a reward. One Custom Liquid section, no app. Tested on Dawn and Spotlight.
---

## The problem

A merchant asked about this on the Shopify Community. They sell wholesale, and they ship in boxes of a fixed size. They wanted the cart to say how many full boxes are in there, and how many more items would fill the next one.

Every tutorial they found did money. Spend another 20 and you get free shipping. None of them counted units.

That is the gap. A spend bar answers "how close am I to the discount". A quantity bar answers "how close am I to a full box", which is the question wholesale buyers actually ask.

I built both into one snippet and tested it on two themes. This walks through it.

## Why most cart progress bars go stale

Here is the part that catches people out, and it has nothing to do with your maths.

You will almost certainly add your bar as a **Custom Liquid section**. That is a box in the theme editor where you paste code, and it is the right tool, because it means you never touch a theme file.

The catch is what happens next. When a shopper changes a quantity in the cart, your theme does not reload the page. It quietly re-renders a few of its own parts and leaves everything else exactly as it was. Your Custom Liquid section is not one of its own parts. So the bar draws the correct number once, on page load, and then sits there showing the old figure while the cart moves underneath it.

Nothing looks broken. The code is right. The number is just old.

There are two ways out.

The first is to put your bar inside a file the theme already re-renders. That works, and I have written up [the free shipping version on Horizon](/blog/shopify-free-shipping-progress-bar), which needs no JavaScript at all for exactly this reason. The cost is that you are editing a theme file, and the file name is different on every theme.

The second is to keep the bar in a Custom Liquid section and have it re-read the cart itself. That is the approach below. It works on any theme, because it does not care what your theme's files are called.

## Items or money: pick before you paste

The snippet does both. One line decides which.

Count **items** when your products ship in a fixed case, box or pack, and a buyer is filling that container. Wholesale, bulk food, print runs, anything sold by the tray.

Count **money** when you are pushing shoppers toward free shipping, a gift, or a discount tier. This is the familiar one.

You can also run both on one store, and switch between them on the customer. More on that further down.

## Add the section

Go to **Online Store > Themes** and click **Edit theme** on your live theme. Some admins still label this button Customize.

In the theme editor, switch the preview at the top to your **Cart** page. This matters. Sections you add while the preview is on the home page land on the home page.

Then click **Add section** in the Template group and search for **Custom Liquid**.

![The Add section panel on the Shopify cart template with Custom Liquid found by search](/images/blog/shopify-cart-progress-bar/01-add-custom-liquid-section-cart.png)

The section appears with an empty **Liquid code** box. Paste the whole block below into it, then click **Save** at the top right.

![The Custom Liquid section settings with the progress bar code pasted into the Liquid code box](/images/blog/shopify-cart-progress-bar/02-paste-into-liquid-code-box.png)

```liquid
{%- assign box_size = 12 -%}
{%- assign spend_goal = 100000 -%}
{%- assign reward_name = 'free shipping' -%}

{%- assign mode = 'spend' -%}
{%- if customer and customer.tags contains 'wholesale' -%}
  {%- assign mode = 'boxes' -%}
{%- endif -%}

<div class="page-width">
  <div id="cart-progress" data-mode="{{ mode }}" data-box-size="{{ box_size }}"
       data-goal="{{ spend_goal }}" data-reward="{{ reward_name | escape }}"
       data-count="{{ cart.item_count }}" data-total="{{ cart.total_price }}"
       data-money-format="{{ shop.money_format | strip_html | escape }}">
    <p class="cp-line"><strong class="cp-head"></strong><span class="cp-msg"></span></p>
    <div class="cp-track"><div class="cp-fill"></div></div>
  </div>
</div>

<style>
  #cart-progress { margin: 2rem auto; max-width: 120rem; padding: 0 1.5rem; }
  #cart-progress .cp-line { margin: 0 0 .8rem; font-size: 1.5rem; }
  #cart-progress .cp-msg { opacity: .7; }
  #cart-progress .cp-track { display: block; height: 10px; border-radius: 999px;
    background: rgba(var(--color-foreground, 18 18 18), .1); overflow: hidden; }
  #cart-progress .cp-fill { display: block; height: 100%; width: 0; border-radius: 999px;
    background: rgb(var(--color-foreground, 18 18 18)); transition: width .3s ease; }
</style>

<script>
(function () {
  var el = document.getElementById('cart-progress');
  if (!el) return;
  var mode = el.getAttribute('data-mode');
  var size = parseInt(el.getAttribute('data-box-size'), 10) || 12;
  var goal = parseInt(el.getAttribute('data-goal'), 10) || 0;
  var reward = el.getAttribute('data-reward') || 'your reward';
  var fmt = el.getAttribute('data-money-format') || '${{amount}}';
  var headEl = el.querySelector('.cp-head'), msgEl = el.querySelector('.cp-msg'), fillEl = el.querySelector('.cp-fill');

  function money(c) {
    var n = (c / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return fmt.replace(/\{\{\s*amount[^}]*\}\}/, n);
  }

  function render(cart) {
    var pct, head, msg;
    if (mode === 'boxes') {
      var count = cart.item_count, boxes = Math.floor(count / size), rem = count % size;
      pct = rem === 0 ? (count > 0 ? 100 : 0) : (rem / size) * 100;
      head = boxes + (boxes === 1 ? ' full box' : ' full boxes');
      msg = count === 0 ? ' - add ' + size + ' items to fill your first box'
          : rem === 0 ? ' - box complete'
          : ' - ' + (size - rem) + ' more to fill the next box';
    } else {
      var total = cart.total_price;
      pct = goal > 0 ? Math.min((total / goal) * 100, 100) : 0;
      head = total >= goal ? 'You have unlocked ' + reward : money(goal - total) + ' away';
      msg = total >= goal ? '' : ' - spend ' + money(goal) + ' to unlock ' + reward;
    }
    headEl.textContent = head; msgEl.textContent = msg; fillEl.style.width = pct + '%';
  }

  render({ item_count: +el.getAttribute('data-count') || 0, total_price: +el.getAttribute('data-total') || 0 });

  var pending = null;
  function refresh() {
    clearTimeout(pending);
    pending = setTimeout(function () {
      var root = (window.Shopify && Shopify.routes && Shopify.routes.root) || '/';
      fetch(root + 'cart.js', { headers: { Accept: 'application/json' } })
        .then(function (r) { return r.json(); }).then(render).catch(function () {});
    }, 120);
  }

  var W = /\/cart\/(add|change|update|clear)/;
  var _f = window.fetch;
  window.fetch = function () {
    var p = _f.apply(this, arguments);
    try { var a = arguments[0]; if (W.test(String((a && a.url) || a || ''))) p.then(refresh, function () {}); } catch (e) {}
    return p;
  };
  var _o = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function (m, u) {
    try { if (W.test(String(u))) this.addEventListener('load', refresh); } catch (e) {}
    return _o.apply(this, arguments);
  };
  document.addEventListener('submit', function (e) {
    var f = e.target;
    if (f && f.getAttribute && /\/cart/.test(f.getAttribute('action') || '')) setTimeout(refresh, 400);
  }, true);
})();
</script>
```

That is the whole thing. No theme file opened, no app installed.

## What it looks like counting boxes

With the box size set to 12, a cart of 20 items reads "1 full box, 4 more to fill the next box" and the bar sits at 67 percent.

![Shopify cart page showing a progress bar that reads 1 full box, 4 more to fill the next box](/images/blog/shopify-cart-progress-bar/03-cart-progress-bar-counting-boxes.png)

The numbers I saw while testing, all at a box size of 12:

- 8 items: 0 full boxes, 4 more to go, bar at 67 percent
- 20 items: 1 full box, 4 more to go, bar at 67 percent
- 24 items: 2 full boxes, box complete, bar at 100 percent
- 25 items: 2 full boxes, 11 more to go, bar back to 8 percent

That last one is the behaviour that makes a box bar useful. Crossing a box boundary resets the bar and starts counting the next one, which is exactly the nudge that gets someone from 25 up to 36.

## What it looks like counting money

Same snippet, same section, one line different.

![Shopify cart page showing a progress bar that reads 400 away, spend 1,000 to unlock free shipping](/images/blog/shopify-cart-progress-bar/04-cart-progress-bar-spend-goal.png)

Against a goal of 1,000 the bar read 520.00 away at 48 percent, then 160.00 away at 84 percent, then flipped to the unlocked message at 100 percent and stopped there rather than overflowing.

The currency formatting is not hardcoded. The snippet reads your store's own money format, so the thousands separator and the symbol come out the way the rest of your storefront writes them.

## Why the bar was invisible the first time

This one cost me a while, so it is worth knowing before it happens to you.

I pasted the section, loaded the cart, and got the text but no bar. The track was there. The coloured part that fills it was not. The code looked correct, and the browser even reported the width as 66 percent.

Dawn, and every theme built from Dawn, ships this rule in its stylesheet:

```css
div:empty { display: none; }
```

It hides any box on the page that has nothing inside it. That is a tidy-up rule, and normally it is helpful.

The filled part of a progress bar is an empty box. That is the entire design. It has no text in it, it is just a coloured rectangle whose width you change. So the theme hides it, and your bar renders as an empty grey track forever.

The fix is one line, and it is already in the snippet above:

```css
#cart-progress .cp-fill { display: block; }
```

If you have tried to build a progress bar on a Dawn-family theme before and given up because nothing appeared, this was probably why. It is also why copying a generic progress bar tutorial from a non-Shopify site tends not to work first time.

## How do I change the box size?

The first line:

```liquid
{%- assign box_size = 12 -%}
```

Change 12 to whatever fills one of your boxes. The wording updates with it, so a size of 6 will say "add 6 items to fill your first box" on an empty cart.

## How do I change the spend goal?

The second line:

```liquid
{%- assign spend_goal = 100000 -%}
```

That number is in cents, which trips people up. 100000 is 1,000.00 in your currency, not 100,000. A goal of 50.00 is `5000`.

Change `reward_name` on the next line to whatever you are giving away. It appears in both messages, so "a free tote" reads as "spend 1,000.00 to unlock a free tote".

## Can I show a different bar for wholesale customers?

Yes, and that is what this block is for:

```liquid
{%- assign mode = 'spend' -%}
{%- if customer and customer.tags contains 'wholesale' -%}
  {%- assign mode = 'boxes' -%}
{%- endif -%}
```

In plain terms: everybody gets the money bar, unless the shopper is signed in and carries a `wholesale` tag on their customer record, in which case they get the box bar instead.

A tag is just a label you put on a customer in the admin. Change `wholesale` to whatever label your trade accounts already carry.

If you are on Shopify Plus with the real B2B features, `customer.b2b?` is the equivalent check and you can use that instead of a tag. I could not exercise that branch on my test store, which is on a standard plan, so treat that one line as the swap to make rather than something I watched work.

## Why is my cart progress bar not updating?

Work down this list:

- **The number only changes on refresh.** The script is not running. Check the whole block went in, including the `<script>` at the bottom. Pasting only the visible markup is the usual cause.
- **Nothing shows at all.** The section is on the wrong template. Switch the preview to Cart, then look for Custom Liquid in the Template group, not the Header or Footer group.
- **The bar shows but never fills.** That is the empty-box rule above. Make sure the `display: block` line survived the paste.
- **It works on the cart page but not in the slide-out drawer.** The section lives on the cart page. See the next answer.

## Does this work in the cart drawer?

The section renders on the cart page, so that is where the bar appears.

Most themes open a slide-out drawer when you add something, and only reach the full cart page if the shopper clicks through. If your checkout flow runs mostly through the drawer, a bar on the cart page will be seen by fewer people than you expect.

Putting it inside the drawer means editing the theme file that draws the drawer, which is the first approach I described near the top. Worth knowing before you decide the bar is not working, when really it is just somewhere your shoppers rarely go.

## Do I need an app for a cart progress bar?

No, and the snippet above is the proof. But apps make sense in two cases.

The first is if you want the bar in the drawer, the header and the cart without touching any theme file. Cart apps draw their own drawer, so they control all of it.

The second is if you want the bar tied to things this snippet does not read. Progress toward a specific product being in the cart, tiered rewards with three levels, or a bar that also shows product recommendations underneath.

## Cart progress bar apps, if you prefer no code

- Hextom: Free Shipping Bar
- Kaching CartDrawer Cart Upsell
- Upcart - Cart Drawer Cart Upsell

Worth knowing before you install one: they are built around spend thresholds. A bar that counts units toward a repeating box is unusual, and most of these will get you close rather than exact.

## Cart progress bar versus free shipping bar

These get used interchangeably and they are not quite the same thing.

A **free shipping bar** is usually a strip across the top of every page, announcing the threshold whether or not anything is in the cart. It is a marketing banner.

A **cart progress bar** sits in the cart, appears once there is something to measure, and moves as the cart changes. It is feedback rather than an announcement.

They work well together, and they work on their own. If what you want is the classic money bar inside a Horizon cart with no JavaScript at all, [that version is written up separately](/blog/shopify-free-shipping-progress-bar). If you want the shipping rule itself set up first, start with [how to offer free shipping on Shopify](/blog/shopify-free-shipping).

## How to test it on your own store

Add something to the cart and change the quantity without reloading. The number should move on its own within a moment.

Then take the cart past a boundary. In box mode, go one item past a full box and check the bar drops back near zero and the box count goes up. In spend mode, go past the goal and check the message flips and the bar stops at full rather than running off the end.

I tested this on Dawn 15.5 and on Spotlight, and both behaved the same way, which is the point of keeping the bar out of theme files. Every state above updated from a quantity change with no page reload.

The one case this does not cover is a different box size per product. Twelve of one thing and six of another in the same cart needs a per-product field holding that product's box size, and the maths then has to walk the cart line by line rather than using a single total. That is a bigger build, and worth doing only if your catalogue really does ship that way.


---

---
title: "Shopify Category Metafields: Add Your Own Values"
description: Shopify's category metafields only offer the values in its own taxonomy, and sometimes none of them fit your product. You can add your own entry to the list. Here is how, tested on a live store.
---

## The problem, in the words a merchant would use

Pick a product category in Shopify and a block called **Category metafields** appears on the product page. Colour, Age group, Target gender, Material, and a set of fields specific to what you sell.

They are dropdowns. You do not type into them. You pick from a list Shopify wrote.

Most of the time that is fine. Then you hit a product where none of the options are right, and there is no obvious way to say what your product actually is.

A jewellery merchant asked about this on the Shopify Community. They sell 925 sterling silver, all of it hallmarked. Every time they edited a product, the **Jewelry type** field offered them "Imitation jewelry". For a brand whose whole pitch is that the silver is real, seeing that word on their own product page was uncomfortable, and picking it by accident would put wrong data on the listing.

Their question was reasonable: can I stop Shopify suggesting that value?

## First, why the list is so short

I went and looked at what that field actually contains, using Shopify's own taxonomy data rather than guessing.

**Jewelry type** has exactly three values. That is the whole list:

- Fine jewelry
- Imitation jewelry
- Other

![The Jewelry type field only offers three Shopify values](/images/blog/shopify-category-metafields/01-jewelry-type-three-default-entries.png)

There is no "sterling silver" option, no "925", no "solid silver". A merchant looking at three options where one says "imitation" and one says "other" is being asked to choose between a word they dislike and a word that says nothing.

This is not a bug. Shopify's taxonomy is a shared vocabulary. It has to mean the same thing for every store in every country, so it stays deliberately coarse. The tradeoff is that it will sometimes be too coarse for your catalogue.

## You cannot delete a value, and here is why

The first instinct is to remove "Imitation jewelry" from the list. It cannot be done, and the reason is worth understanding because it saves you hunting for a setting that does not exist.

Those three values are not stored in your shop. They live in Shopify's taxonomy. When I checked the store's own data for that field, it held exactly one entry: the one I had just created myself. The three defaults were nowhere in it.

So there is nothing on your side to delete. There is no "never suggest this" switch either. The field is shared infrastructure, and you do not get to edit other people's copy of it.

What you *can* do is add to it.

## The fix: add your own entry

Category metafields are backed by something called a metaobject, which is Shopify's word for a reusable piece of structured data. The important part for this job is that the list of choices is extendable. Your own entries sit above Shopify's.

Here is the whole process.

### 1. Open the field

Go to **Products**, open a product, and scroll to **Category metafields**. Click the field you want to extend. At the bottom of the list of choices there is **Add new entry**.

If you do not see the Category metafields block at all, you have not set a product category yet. Set it first, in the **Category** field just under the description.

### 2. Give it a label and a base value

Two fields, and the second one is the one that matters.

- **Label** is the display name. This is what you and your staff see in the dropdown from now on. I used "925 Sterling Silver".
- **Base jewelry type** is required. Shopify's own help text under it reads "Base values map to standards for better search and organization". Pick the closest real taxonomy value. For genuine precious metal jewellery that is **Fine jewelry**.

![Adding a new entry and mapping it to Fine jewelry](/images/blog/shopify-category-metafields/02-add-new-entry-base-value.png)

Save.

That base value is the trick. Your label is what humans see. Underneath, the entry stores a reference to Shopify's real value, so the standardised data stays correct. When I inspected the saved entry, it held two fields: the label "925 Sterling Silver", and a reference pointing at Shopify's Fine jewelry value.

You get your wording without breaking the standard.

### 3. Tick it

Reopen the field. Your entry is now at the top, above a heading that says **Default entries**. Tick it, then save the product.

![The custom entry sits above the default entries](/images/blog/shopify-category-metafields/03-custom-entry-above-defaults.png)

You do this once. From then on the entry exists for every product in the shop, so the next product is a single click.

## The part most people get wrong

While answering this, the more useful correction was not the custom entry at all. It was that 925 was being put in the wrong field.

**925 is a material, not a type.** Shopify already has a field for it. **Jewelry material** contains **Sterling silver**, right there in the default list, along with Silver, Silver-plated, Platinum, Rose gold and about seventy others.

![Jewelry material set to Sterling silver, Jewelry type set to the custom label](/images/blog/shopify-category-metafields/04-saved-material-and-type.png)

So the complete answer for a silver brand is two fields, not one:

- **Jewelry material**: Sterling silver. Already exists. Just pick it.
- **Jewelry type**: your own entry, mapped to Fine jewelry.

This generalises. Before you invent a new value, read the other fields on the category. Shopify often already has a field that says exactly what you were trying to force into the wrong dropdown.

## Where your custom entries live

Your entries are ordinary shop data, and you can manage them outside the product page.

Go to **Content** > **Metaobjects**. You will see a definition for each category field you have extended, labelled *by Shopify*, with your entries inside it. You can rename an entry there, and every product using it updates.

That also explains the behaviour people find confusing. The definition is owned by Shopify, so you cannot change its shape or delete Shopify's values. The entries inside it are yours.

## Removing a field instead of filling it

There is a second option people miss, and for some merchants it is the better one.

You do not have to fill in every category metafield. If a field is irrelevant to your product, the small **x** on a suggested field removes it from that product. The block shrinks and stops asking.

Use this when the field genuinely does not apply. Do not use it to avoid a field that a sales channel needs, which brings us to the next question.

## Does any of this reach Google Shopping or Meta?

Worth being precise, because it is the reason to bother getting it right.

Category metafields exist to feed structured data to places that need it: Shopify search and filters, and the sales channels that read your catalogue. That is what the "better search and organization" help text is pointing at.

What I verified is the mechanism, not what each channel does with it. The entry stores a reference to a real taxonomy value, so a channel reading the standardised value gets Fine jewelry, not your custom label. That is the point of the base value being required.

If a specific channel's output matters to you, check that channel's own feed after you save. Do not assume a custom label travels.

## A note on the product category itself

One more thing that trips people up, because it changes which metafields you get at all.

**Product type** and **Category** are different fields. Product type is your own free text, used for your own organisation and for automated collections. Category is the taxonomy value, and it is the one that decides which category metafields appear.

Pick the most specific category that is true. On the test product I used Apparel & Accessories > Jewelry > Rings, and that produced Ring size, Ring design, Stone shape, Gemstone type and Gemstone cut style on top of the generic fields. Choosing plain "Jewelry" instead would have lost all of those.

More specific category, more fields, better data. It costs nothing.

## What to check if it did not work

A few things that come up:

- **No Category metafields block.** No category set. Set the Category field first.
- **Add new entry is missing.** That field is not the extendable kind. Some category attributes are plain choice lists and some are measurements. Only metaobject-backed fields, which are labelled *Metaobject (List)* under the field name, can take new entries.
- **The entry saved but the product did not.** They are two saves. The dialog saves the entry, then the product still needs its own save afterwards.
- **You cannot see your entry in the list.** It sits above the **Default entries** heading, not inside that group. Scroll up in the dropdown.

## Definitions people mix up

Since these words all get used interchangeably and they are not the same thing:

- **Metafield** is a custom field on a product, customer, order and so on. You define it, you fill it, you can render it in your theme.
- **Category metafield** is a metafield Shopify defines for you when you pick a product category. You do not create it and you cannot change its shape.
- **Metaobject** is a reusable record. Category metafields that offer a list of choices store those choices as metaobject entries, which is exactly why you are able to add your own.
- **Taxonomy value** is Shopify's shared vocabulary entry, the same across every store. Your custom entry points at one of these rather than replacing it.

## If you want the value itself changed

Adding your own entry solves your storefront. It does not change what the taxonomy offers other stores.

Shopify's product taxonomy is open source and accepts issues, so that is the right place to argue that a category needs a value it does not have. It is a slow road, but it is a real one, and the discussion happens in public:

[github.com/Shopify/product-taxonomy](https://github.com/Shopify/product-taxonomy)

In the meantime, the custom entry is not a workaround you have to apologise for. It is a supported feature of the field, with a required mapping back to the standard so nothing downstream breaks.

## What I tested

On a development store, on a product in Apparel & Accessories > Jewelry > Rings:

- Confirmed from Shopify's taxonomy data that Jewelry type carries exactly three values, and that Jewelry material already includes Sterling silver.
- Created a "925 Sterling Silver" entry mapped to Fine jewelry, and confirmed after saving that the entry stores both the label and a reference to Shopify's Fine jewelry value.
- Confirmed the entry then renders above the Default entries group, and that the product saves with it applied.
- Confirmed the shop's own data for that field contained only my entry, which is why the three defaults cannot be deleted.
- Set Jewelry material to Sterling silver on the same product and saved.

Nothing was ever set to Imitation jewelry.


---

---
title: Center-Align Text on Your Shopify Homepage
description: Center headings, paragraphs and blocks on a Shopify Horizon homepage using the section alignment control, with a CSS fallback.
---

## The problem

A merchant asked about this on the Shopify Community. Their homepage looked fine on desktop but fell apart everywhere else.

The title, the tagline and a paragraph under it all sat off to one side. They would not line up. The footer logo did the same thing.

The merchant had a good hunch about why. To place things on desktop, they had typed extra spaces to push words around. On a phone, those spaces broke the layout.

I reproduced it on a test store on the Horizon theme. Horizon is Shopify's newer free theme, and it is the base for several free themes like Ritual. The merchant was on Ritual, which behaves the same way.

Here is the short version of what I found. Some of the pieces that would not center were not text at all. They were images. And an image does not center the way text does.

![Shopify Horizon homepage where the wordmark and tagline are images, not text, so they will not center](/images/blog/shopify-center-text-homepage/01-frontpage-images-not-text.png)

You can see the two red boxes. The big wordmark is one image. The tagline and paragraph under it are another image. They look like text, but they are pictures of text.

## Why it happens

This is the part most forum answers skip. There are two separate reasons your homepage will not center. You need to know which one you have.

**Reason one: alignment lives on the section, not the block.** In Horizon, you do not center a single heading with a button on that heading. You center the whole section, and every block inside it follows. This trips people up. They click the text, hunt for a "center" button, and never find one. The control is one level up, on the section.

A "section" is a full-width band of your homepage, like a banner or a rich text area. A "block" is a single item inside it, like one heading or one image. The block inherits its position from the section.

**Reason two: images do not flex like text.** Text wraps and centers on its own. An image keeps its own fixed size and shape. If the picture itself has empty space baked into one side, no button can fix that. The words inside the picture will always look pushed over.

There is also a third thing the merchant hit. To fake a layout on desktop, they had typed long runs of spaces and invisible characters inside a text box. Those characters have real width. They still take up room on a phone. So the line can never truly sit in the middle, no matter what you press.

When I opened the live store, one text line had around 30 spaces and several invisible marks typed into it. You cannot see them. They still push the words sideways.

## Check this first

Before you touch alignment, work out what each piece actually is. Click it in the theme editor.

- If the side panel says **Text** or **Heading**, it is real text. Alignment will work on it.
- If the side panel says **Image**, it is a picture. Alignment moves the picture, but not the words drawn inside it.

This one check saves a lot of frustration. The merchant was fighting alignment buttons on things that were images the whole time.

## The fix

I tested this on a Horizon store and it lines everything up, on desktop and on mobile. Here are the steps.

**Step 1: Center the whole section.**

Click the section itself, not a block inside it. Click an empty part of the banner where there is no text or image. The right panel should show the section name at the top, not "Text" or "Image".

Open **Layout** and set **Alignment** to **Center**.

![Horizon section Layout panel with Alignment set to Center](/images/blog/shopify-center-text-homepage/02-section-layout-alignment-center.png)

Every block in that section now centers together. This is the single most important step. On Horizon, this is how you center text on a Shopify homepage.

**Step 2: Set each image block to Fit width.**

If some pieces are images, they need one more setting. Click each image block, one at a time. Under **Size**, set **Desktop width** to **Fit**.

![Horizon image block Size panel with Desktop width set to Fit](/images/blog/shopify-center-text-homepage/03-image-block-fit-width.png)

Here is the difference. **Fill** stretches the image edge to edge. That is what throws your alignment off. **Fit** keeps the image at its real size, so it sits in the middle with the rest.

Do this for the wordmark, the title image and the paragraph image. Any block set to Fill will refuse to line up with the others until you switch it to Fit.

**Step 3: Fix the footer.**

The footer is its own thing. Scroll down to it in the same editor.

Click the logo in the footer. It may select the logo, or it may select the column it sits in. In Horizon that column is called a **Group**.

Select the Group, open **Layout**, and set **Alignment** to **Center**.

![Shopify footer with the logo column set to Left, out of line with the other columns](/images/blog/shopify-center-text-homepage/04-footer-logo-left.png)

The logo column was set to the left while the other columns were centered. That is the whole reason it looked out of line.

![Horizon footer Group Layout panel with Alignment set to Center](/images/blog/shopify-center-text-homepage/05-footer-group-alignment-center.png)

Now the logo lines up with the navigation and contact columns beside it.

**Step 4: Clear any invisible spacing.**

If a real text line still will not center, it has junk typed into it. Click the line. Select everything in the box and delete it all. Then type the words fresh.

Do not just backspace the spaces you can see. The invisible marks stay behind. Clear the whole box and retype it clean.

## An alternative: use real text, not pictures of text

This is the better long-term fix, and I recommend it to anyone in this spot.

Text centers on its own. It edits in seconds. It reads sharp on every screen. A picture of text does none of that. It blurs when it scales, it cannot be edited without a design tool, and it will not reflow on a phone.

To swap a picture for text: delete the image block, then **Add block** and pick **Heading** for a title or **Text** for a paragraph. Type the words in.

![Horizon Add block menu with Heading and Text block options highlighted](/images/blog/shopify-center-text-homepage/06-add-heading-text-block.png)

For a big brand wordmark you can use a **Heading** block with a large font, or the **Logo** block if you want to keep the exact logo art.

Once the words are real text, Step 1 centers them perfectly, and the mobile problem disappears for good.

## What if the image itself is off-center

This is worth its own note, because it fooled the merchant. One of their images had a wide empty strip on the left and nothing on the right. The words inside sat off to one side.

Even with the block centered, the words looked pushed over. That is not an alignment bug. The picture is lopsided.

Two ways out:

- Re-crop or re-export the image so the words sit in the middle with equal space on both sides, then re-upload it.
- Or replace it with real text using the step above. Text is always balanced.

No alignment button can fix a lopsided picture. You have to fix the picture or drop it for text.

## How do I center only the desktop or only the mobile view

Horizon's alignment control sets both at once. Often that is what you want. Centered reads well on every screen.

But sometimes a merchant wants desktop left and mobile centered, or the reverse. Horizon has no separate mobile alignment toggle for this.

If you truly need one screen different from the other, the clean route is a small piece of CSS inside a **Custom Liquid** block. A media query targets one screen size only and leaves the other alone. Add a Custom Liquid section, then a style rule that centers the blocks under a `max-width: 749px` media query for mobile, or a `min-width: 750px` query for desktop.

Reach for this only when the built-in section alignment cannot do the job. For most homepages, the section alignment control is all you need, and it is safer than custom code.

## Can I drag each block anywhere I want

No. This comes up a lot. Horizon does not let you drag a block to any spot on the screen.

You choose left, center or right on the section. Blocks stack and follow that choice. There is no free-drag canvas.

That is by design. It keeps the layout responsive so it holds together on a phone. If you want an item nudged by a specific amount, that needs a line of custom CSS in a Custom Liquid block, moving that one item left or right.

## Why does my text center on desktop but not on mobile

Almost always, this is the invisible-character problem.

You typed spaces to position text on desktop. The spaces have width. On desktop the wide screen hides the effect. On mobile the narrow screen exposes it, and the text drifts.

The fix is the same as Step 4. Clear the whole text box and retype the words with no manual spacing. Then let the section alignment do the centering.

## If it did not work

A few things to check when centering still will not stick.

- **You centered a block, not the section.** Click empty space in the banner so the panel shows the section name, then set its Layout Alignment.
- **An image is still on Fill.** Any image set to Fill stretches full width and will not line up. Switch it to Fit.
- **The footer column was missed.** The footer aligns per column. Center the Group that holds the logo, not just the logo.
- **Invisible characters remain.** Select all text in the box, delete, and retype. Backspacing visible spaces is not enough.
- **The image is lopsided.** Re-crop it so the content is centered, or replace it with a Heading and Text block.

Work through these in order. One of them is the cause every time.

## Definitions people confuse

**Section vs block.** A section is a full-width band. A block is one item inside it. Alignment lives on the section. Blocks follow it.

**Fit vs Fill.** Fit keeps an image at its natural size. Fill stretches it to the full width of its column. Fill is what breaks alignment on a homepage.

**Text block vs Image block.** A Text or Heading block holds real, editable words that center and reflow. An Image block holds a picture, even a picture of text, which keeps its own fixed shape.

**Horizon vs Ritual.** Horizon is Shopify's newer free theme. Ritual is a free theme built on Horizon, so the same alignment steps apply. If your theme is based on Horizon, look for the section Layout and Alignment controls in the same place.

That is the full picture. To center text on a Shopify Horizon homepage, set the section alignment to center, put image blocks on Fit width, clear any manual spacing, and swap pictures of text for real text where you can. Everything then lines up on desktop and holds on mobile.


---

---
title: How to Change Add to Cart Button Text in Shopify Safely
description: The safe, no-code way to translate or rename your Add to Cart button - and how to find and fix the broken file if editing theme code has already crashed your store.
---

## The problem

You want to change the text on your Add to Cart button. Maybe to translate it into your language, maybe to say something friendlier like "Buy now" or "Add to bag".

There is a safe way to do this and a dangerous way.

The safe way takes two minutes and touches no code. The dangerous way is to open your theme files and start editing them, and it is how a real merchant on the Shopify Community ended up with a broken store.

They edited theme code to translate their call-to-action buttons. After that, their Add to Cart button in the theme editor showed "Please try Alain in a few minutes", then "Your cart is empty". Their bundle app stopped showing on the product page. Shopify support confirmed the code edits were the cause.

I want to show you the safe method first, because it is the one you should use. Then I will show you how to find and undo the damage if you have already edited code, because that merchant is not alone.

## The safe way to change or translate button text

Shopify keeps every piece of visible text in your theme in a separate place from the code. It is called the theme's language content. You can edit that text directly, and because you are editing text and not code, you cannot break anything.

Here is where it lives.

1. Go to **Online Store > Themes**.
2. Find your theme and click the **...** button next to it.
3. Choose **Edit default theme content**.

![The theme actions menu in Shopify, showing Edit default theme content and Duplicate](/images/blog/shopify-change-add-to-cart-button-text/01-edit-theme-content-menu.jpeg)

That opens the language editor. There is a search box at the top. Type "Add to cart". Shopify shows you every place that phrase is used, with an editable field next to each one. Type your new wording, then Save.

The change goes live on your storefront right away. The button now says whatever you typed, and not one line of code changed.

This is the answer for renaming the button too. "Add to cart", "Buy it now", "Sold out", the cart title, the empty-cart message, they are all in here. Search for the current wording, replace it, Save.

## If you sell in more than one language, use Translate & Adapt

The language editor above changes the default text for every shopper.

If you actually run your store in several languages and want the button to change based on the shopper's language, use Shopify's own free app, **Translate & Adapt**. Install it from the Shopify App Store, add your languages under **Settings > Languages**, and translate the button text per language inside the app.

Translate & Adapt writes into the same theme language content, so it is just as safe. It never touches the code either.

The rule is simple. To change what a button says, edit the theme content, not the theme code. Do that and none of the rest of this article can happen to you.

## Why editing theme code breaks the storefront

It helps to understand why the code route is so risky, because the failure is not obvious.

When you open the code editor and start replacing words, you are not just editing the labels you can see. The same words appear inside the code that makes the page work, and inside Shopify's own built-in messages.

Look again at that broken error: "Please try **Alain** in a few minutes". The real Shopify message is "Please try **again** in a few minutes". The merchant had run a find-and-replace that swapped the word "again" for a translation, and it changed "again" everywhere, including inside a system message it was never meant to touch.

It gets worse. The word "again" also hides inside other words. The word "against" contains it. Shopify themes use "against" in real code, for example when a snippet checks stock levels with something named `check_against_inventory`. A blind replace of "again" turns that into broken code. Broken code stops the Add to Cart button from working, and it stops app blocks like a bundle app from rendering, because the whole product section fails to load.

So one careless replace can take down the button, the cart, and any app that lives on the product page, all at once. That is exactly what happened here.

## Already edited the code? How to find the broken file

If you are reading this after the damage is done, here is how to find the exact file, even on the Basic plan with no version history.

You do not have to guess. The code editor can search every file in your theme at once.

1. Go to **Online Store > Themes > ... > Edit code**.
2. Press **Ctrl+Shift+F** (or **Cmd+Shift+F** on a Mac). This is "search all files".
3. Search for the wrong word you introduced. In the example, that word is `Alain`.

Every result is a file and a line where the bad word landed. Open each one and change it back to the correct word.

![Searching all Shopify theme files for the wrong word in the code editor](/images/blog/shopify-change-add-to-cart-button-text/02-find-in-files-search.jpeg)

I reproduced this on a test store to be sure it works. Searching for "again" returned five hits across three files. One was the cart error message in `locales/en.default.json`. Three more were inside the word "against" in `snippets/buy-buttons.liquid`, which is the snippet behind the Add to Cart button. That single search shows you the label you meant to change and the code you accidentally broke, side by side.

Fix each hit and the button, the cart, and the app block come back.

## Check your language files are still valid

There is one more thing to check while you are in there.

Your translation text lives in files ending in `.json`, inside the `locales` folder. JSON is strict. One extra comma or one unclosed quotation mark makes the whole file invalid, and when a language file is invalid the theme can fall back to strange text and the cart can fail to load in the editor.

Open each `locales` file you edited. Copy its contents into a free JSON checker like jsonlint.com. If there is a syntax error it will point you to the exact line. The usual culprits are a comma after the last item in a list, or a quotation mark inside your translated text that was not escaped.

## Fix the missing app block

If an app block, like a bundle app, disappeared from the product page, it is almost always a symptom of the same broken code, not a separate problem.

App blocks are rendered inside the product section. If that section has an error, everything inside it vanishes, including the app. Once you fix the broken word or the invalid JSON, the section loads again and the app block usually reappears on its own.

If it still does not show, re-add it by hand. Open the theme editor, go to your product template, and add the app's block back to the product section. Then open **Theme settings > App embeds** and make sure the app is toggled on there too.

## Back up before you edit, and how to restore on Basic

The Basic plan does not give you a saved history of theme edits, so there is no one-click undo. That makes a backup the thing to do before you touch anything.

From the same **...** menu next to your theme you have two safe backups:

- **Duplicate** makes a full copy of the theme. Do this before any edit. If something breaks, your copy still has the working version, and you can copy the correct file across from it.
- **Download theme file** saves the whole theme to your computer as a backup you keep.

If your live theme is already tangled and you cannot untangle it, there is a clean recovery. Add a fresh copy of the same theme from the Theme Store as a new unpublished theme. Open both code editors, find the file you broke, and copy the original version across from the fresh copy. Then redo your wording change the safe way, in the theme content.

## Change versus translate: what the button text really is

People use "change" and "translate" for this, and it is worth being clear, because they are the same job in Shopify.

The Add to Cart label is a piece of text stored in your theme's language content. When you "change" it to "Buy now", or "translate" it to another language, you are editing that same stored text. There is no separate translation system to learn for a single button. It is one field, and you can put any wording you like in it.

That is also why the code route is never necessary for this. The text is already pulled out of the code for you, sitting in the language editor, waiting to be edited safely.

## What to check if the button still will not change

**You edited the code and the text still shows the old word.** The theme content overrides most theme text. Change it in Edit default theme content, and if you had also hard-coded a word in the template, search the code for it and set it back so the two do not fight.

**The button text changes back when a shopper picks a variant.** That label is coming from a different string. Search the language editor for the wording that appears after the switch, and change that one too.

**Your change shows in the editor but not on the live store.** Make sure you are editing the language content of your published theme, not a draft copy.

**A translated store shows English on the button.** That language is missing a translation for it. Open Translate & Adapt, pick the language, and fill in the button field.

## Should you ever edit the theme code for this

For changing or translating button text, no. The theme content editor and Translate & Adapt cover it completely, and they cannot break your store.

Editing theme code is for real customisation that has no setting, like changing layout or adding a feature. Even then, duplicate the theme first, change one thing at a time, and never run a find-and-replace across the whole theme. A replace that looks harmless on a label will rewrite the code and the system messages that happen to contain the same letters.

Keep text edits in the theme content, keep the code for code, and the "Please try Alain in a few minutes" story stays someone else's story, not yours.


---

---
title: Stop a Chat Widget Covering Your Shopify Menu
description: A chat button sitting on top of your Shopify menu or filters is a z-index clash. Here is how to push it back behind them.
---

## The problem

A merchant asked about this on the Shopify Community, and I have seen it on many stores.

They run the Dawn theme. They have the Shopify Inbox chat button turned on. They also have a Google reviews badge showing.

On a phone, both of those float in a fixed spot near the bottom of the screen. That part is normal.

The trouble starts when a shopper opens the mobile menu or the collection filter drawer.

The chat button and the review badge stay on top. They sit over the open panel. On the filter drawer they even cover the "Apply" button.

So the shopper cannot finish choosing filters. The float wins, the menu loses. That is a classic case of a shopify chat widget over menu.

I reproduced it on a test store on the Dawn theme. Open the filter drawer on mobile, and the chat bubble hovers right over the controls. Tap where "Apply" should be, and you hit the chat button instead.

This is the shopify chat button covering menu problem in one sentence: two floating things want the same corner, and the wrong one is winning.

## Why it happens

This is a stacking problem. The web word for it is z-index.

Think of your page as a stack of transparent sheets. Every sheet has a number. A higher number sits closer to your eyes. A lower number sits further back.

The chat button gets a very high number so it always floats above your products. That is what you want most of the time. You want people to reach chat from any page.

But the mobile menu and the filter drawer are also floating panels. They also need a high number so they cover the page when they open.

The clash is simple. The chat widget and the review badge were given a higher number than the menu and the filter drawer.

So when the drawer opens, it opens *behind* the chat button. The panel is there. It just sits one sheet too far back. The chat button and Google badge float in front of it and block the taps.

Most forum answers stop at "add some CSS." They skip the reason. The reason matters, because it tells you the fix: you do not need to touch the app. You only need to raise the menu and the filters above the widget, or hide the widget while a panel is open.

CSS is the styling language of a web page. It controls color, size, spacing, and stacking order. Dawn gives you a box in the theme settings where you can paste your own CSS. You will use that box. You never edit the app itself.

A note on the term "shopify chat widget z-index": z-index is exactly the number on the sheet. Fixing this is really just changing which number is bigger. Nothing more.

## Before you start: which fix do you need

There are two clean fixes. Pick based on whether you use the Google reviews badge.

- If you only want the menu and filters to sit on top, use the short z-index fix. It is the smallest amount of code.
- If the Google reviews badge still shows through even after the z-index fix, use the hide fix. It removes the floating widgets while a panel is open, then brings them back when it closes.

The short z-index fix handles the Shopify Inbox chat button and the header cleanly. The Google badge is stubborn on some setups. That is the one case where you want the hide fix instead.

Both go in the same place: the Custom CSS box in Dawn's theme settings. Both are mobile only. On desktop the menu is a normal bar, not a drawer, so there is no clash to fix.

You do not need to know how to code. You copy, you paste, you save.

## The fix

Here is where to paste it, step by step.

**Step 1. Open your theme settings.**

From your Shopify admin, go to Online Store, then Themes. Find your live Dawn theme. Click Customize.

Inside the theme editor, look at the bottom left. Click the gear icon. That opens Theme settings. Scroll to the bottom and find Custom CSS.

**Step 2. Paste the short z-index fix.**

Paste this into the Custom CSS box.

```css
@media (max-width: 989px) {
  .mobile-facets,
  .menu-drawer,
  .section-header {
    z-index: 2147483647 !important;
  }
}
```

Then click Save.

That is the whole fix for most stores. Let me explain each line in plain words.

- `@media (max-width: 989px)` means "only do this on screens up to 989 pixels wide." That is phones and small tablets. Desktop is left alone.
- `.mobile-facets` is the filter drawer on a collection page.
- `.menu-drawer` is the slide-out mobile menu.
- `.section-header` is the top bar of your store.
- `z-index: 2147483647` is the highest number a browser allows. It puts these three panels above everything, including the chat button.
- `!important` tells the browser to obey this rule even if the app tries to set its own number.

Once saved, open your store on a phone. Open the mobile menu. Open a collection filter. The chat button now sits behind them. The "Apply" button is tappable again. The shopify widget overlapping menu is gone.

I tested this on the Dawn theme and it worked the same as the longer version. It is less code and easier to keep.

**Step 3. If the Google badge still shows through, use the hide fix instead.**

Some stores find the Google reviews badge still floats over the panel even after Step 2. That badge sometimes uses its own very high number that is hard to beat.

For that case, delete the short fix and paste this one instead.

```css
@media (max-width: 989px) {
  .mobile-facets,
  body:has(#Details-menu-drawer-container[open]) .section-header {
    z-index: 2147483647 !important;
  }

  body:has(:is(
    .mobile-facets__disclosure.menu-opening,
    #Details-menu-drawer-container[open]
  )) :is(
    #shopify-chat,
    #dummy-chat-button-iframe,
    iframe#ShopifyChat,
    merchant-widget,
    google-merchant-widget,
    #google_customer_reviews_badge,
    [id^="___ratingbadge"],
    iframe[src*="merchantwidget"],
    iframe[src*="shopping/merchant"],
    iframe[title*="Google" i][title*="store" i],
    [id*="merchant" i][id*="widget" i],
    [class*="merchant" i][class*="widget" i]
  ) {
    display: none !important;
  }
}
```

Then click Save.

This one is longer, but the idea is simple. When the menu or the filter drawer is open, hide the chat button and the review badge. When the panel closes, they come back on their own.

- `body:has(...)` is the trick that watches for an open panel. It reads "when the page contains an open drawer, do this."
- The first block still raises the filters and header, same as before.
- The second block lists every common name for a chat button and a Google review badge, then sets `display: none` on them. `display: none` means "hide this element completely."

The long list of names is there on purpose. Chat and review widgets ship under many different IDs and iframe titles. The list catches the common ones so the fix works whether the badge is named one thing or another.

Save, then test on a phone again. Open the menu. The chat button and badge vanish. Close the menu. They return. That fully clears the shopify chat icon blocking menu case, Google badge included.

## An alternative: turn the widget off on collection pages

If you would rather not touch CSS at all, you have a no-code path, though it is coarser.

Shopify Inbox lets you control where the chat button shows. In your admin, open the Inbox app, then its settings for the online store chat. Some setups let you limit which pages the button appears on. If your version offers that, you can keep chat off the collection pages where the filter clash happens.

The trade-off is real. You lose chat on those pages entirely, not just while the drawer is open. For most stores the CSS fix is better because it keeps chat everywhere and only steps aside when a panel opens.

The same goes for the Google reviews badge. Many review apps let you choose which pages the badge shows on. If yours does, you can hide it on collection pages. Again, that is a blunt tool next to the CSS, which hides it only for the moment the drawer is open.

If you run a paid theme with a built-in custom CSS field, the same z-index rule works there too. The selector names may differ if the theme renamed its menu and filter parts. The idea does not change: give the menu and filters a higher number than the widget.

## Why does my Shopify chat button cover the mobile menu?

Because the chat button was given a higher stacking number than the menu.

The chat app wants to float above your whole store, so it sets a very high z-index. The mobile menu also floats, but with a lower number. When both are on screen, the higher number wins, so the chat button sits in front.

The fix is to raise the menu's number above the chat button's, or to hide the chat button while the menu is open. Both are a few lines of CSS in Dawn's Custom CSS box.

## How do I change the z-index of a Shopify widget?

You do not change the widget's z-index directly. It lives inside the app, and you should not edit that.

Instead you change the z-index of the things around it. You raise the menu, the filter drawer, and the header above the widget. That has the same effect and it is safe.

Paste the short fix from Step 2 into Custom CSS and save. That sets the menu and filters to the top of the stack on mobile, which is where they belong when open.

## Will this z-index fix slow down my store?

No. This is a small block of CSS. It adds no scripts, no images, and no app.

CSS this size loads with the rest of your theme styles and costs nothing you would notice. It only changes stacking order on small screens. It does not run any code on every scroll or tap.

You can leave it in place for good. It only acts while the menu or a filter drawer is open, and only on phones.

## Does this work on themes other than Dawn?

The idea works everywhere. The exact selector names may not.

Dawn calls its parts `.menu-drawer`, `.mobile-facets`, and `.section-header`. Another theme may call them something else. If you paste the Dawn fix into a different theme and nothing changes, the names are the reason.

To adapt it, open your store on a phone browser, open the menu, and inspect the panel to find its class name. Then swap that name into the rule. The z-index and `!important` parts stay the same.

## If it did not work

A few things can keep the fix from taking effect.

- **You pasted into the wrong box.** It must go in Theme settings, Custom CSS, not into a section's settings. Check you are in the gear icon area, at the bottom.
- **You did not save.** The theme editor needs an explicit Save. Look for the Save button in the top right.
- **You are testing on desktop.** The fix is mobile only, capped at 989 pixels wide. Resize a desktop browser narrow, or use a real phone, to see it.
- **The Google badge still floats.** Switch from the short fix to the hide fix in Step 3. The badge often needs to be hidden, not just out-ranked.
- **Your theme is not Dawn.** The class names differ. See the section above on adapting the selectors.
- **Browser cache.** Old styles can linger. Refresh hard, or open the store in a private window, to load the new CSS.

If none of that helps, check whether a third-party app is injecting its own floating element with an even higher number. Some apps set the maximum z-index too. In that case the hide fix is the safer route, because hiding an element beats out-ranking it.

## Definitions people mix up

A few terms come up here and get confused. Here is the plain version.

**z-index.** The stacking number on an element. Higher sits in front. This is the whole game. Fixing a shopify chat widget z-index clash means changing which number is bigger.

**Fixed position.** The chat button and badge use fixed position, which pins them to a spot on the screen so they do not scroll away. That is why they float in the same corner. Fixed position and z-index work together; the position pins it, the z-index decides who is in front.

**The mobile menu drawer versus the filter drawer.** The menu drawer is the slide-out navigation. The filter drawer is the collection filter panel with checkboxes and the Apply button. They are different panels, but they clash with the widget for the same reason, so one fix covers both.

**Chat widget versus review badge.** The chat widget is the message button, often Shopify Inbox. The review badge is the small Google rating box. They are separate apps that happen to float in the same area. The short fix handles the chat cleanly; the badge sometimes needs the hide fix.

**Custom CSS versus editing theme code.** Custom CSS is a safe box in theme settings for your own style rules. It does not touch the theme's real files. Editing theme code means changing the actual Liquid and CSS files, which is riskier. For this problem you only need Custom CSS.

That is the full picture. A shopify chat button covering menu is not a broken app. It is two floating panels fighting over one corner. Give the menu and filters the top spot, or step the widget aside while they are open, and the clash is done.


---

---
title: "Shopify Chat Widget Scrolling With the Page? Here Is the Fix"
description: "If your Shopify Inbox chat bubble scrolls away instead of staying in the corner, your theme's CSS reset is stripping the widget's own positioning. Here is how to confirm it in ten seconds and the Custom CSS that pins it back. Measured on a live store."
---

## The problem

Your chat bubble is supposed to sit in the bottom corner of the screen and stay there while the page moves behind it. That is what "floating" means.

Instead it sits still on the page and slides upward as you scroll, until it disappears off the top. Scroll back up and it comes back.

A merchant asked about this on the Shopify Community. Their bubble did it on desktop and on mobile, in both orientations. Hiding sections of the page made no difference. Clicking the bubble seemed to do nothing at all.

I loaded their live store and measured it. Here is what the bubble's position on screen did as the page scrolled:

| | at the top | scrolled 600px | scrolled 1500px |
| --- | --- | --- | --- |
| Desktop 1440 x 900 | 834 | 250 | -601 |
| Mobile 390 x 844 | 778 | 92 | -781 |

A pinned element does not move. This one moved by exactly the amount the page scrolled, then went off the top of the screen.

![The chat bubble is gone after scrolling down, and pinned in the corner after the fix](/images/blog/shopify-chat-widget/02-scrolled-before-after.png)

## Why it happens

This is not a Shopify Inbox bug and it is not an app conflict. It is your theme.

The chat launcher is not a plain image on your page. It is a **web component**, an element called `shopify-chat` that Shopify drops in near the bottom of your page. The component carries its own styling, including the instruction that keeps it pinned:

```css
:host {
  position: fixed;
  inset: 0;
  display: grid;
  pointer-events: none;
}
```

Read plainly: pin me to the viewport, stretch me across it, and let clicks pass through me so I do not block the page.

Now here is the collision. Many modern themes start with a **CSS reset**, a rule that strips the browser's default styling off every element so the theme can start from a clean slate. The theme in this case, Taiga 8.1.0, uses one that looks like this:

```css
*:where(:not(iframe, canvas, img, svg, video, audio, dialog, use)) {
  all: unset;
  display: revert;
}
```

`all: unset` means "remove every style from this element". The exception list covers images, video, canvas and a few others. It does not cover web components, because there is no way to write "any custom element" in CSS.

So the reset hits `shopify-chat` too. And a rule in your theme's stylesheet outranks a component's own `:host` styling, no matter how weakly the theme rule is written.

I checked the live values on the merchant's page. The component had been flattened to:

- `position: static` instead of fixed
- `inset: auto` instead of 0
- `pointer-events: auto` instead of none
- `height: 0`

With no fixed position, the bubble falls back to being positioned against the page rather than the screen. So it scrolls with the page. That is the whole bug.

## The second problem: the chat window is broken too

The merchant said clicking the bubble seemed to misbehave, and the thread focused on the scrolling.

I tested the open state. The chat does open. The panel renders at the correct size. It just renders at **viewport y of -6115**, roughly six thousand pixels above the top of the screen.

So from the shopper's side, clicking the bubble does nothing at all. It is the same bug and the same fix, but if you only test scrolling you will think the widget is half fixed.

![Clicking the bubble before the fix shows nothing, and after the fix opens the chat window](/images/blog/shopify-chat-widget/01-clicked-before-after.png)

## Ten-second check: is this your problem?

Before you paste any CSS, confirm the cause. You do not need developer skills for this.

1. Open your storefront in Chrome.
2. Right-click the chat bubble and choose **Inspect**.
3. In the panel that opens, look for an element called `shopify-chat`.
4. Click it, then look at the Computed styles list on the right and find **position**.

If it says `fixed`, this article is not your problem. If it says `static`, it is.

If you cannot find `shopify-chat` at all, the widget on your site is from a different chat app and the fix below will not apply to it.

## The fix

This goes in **Online Store, Themes, Customize, Theme settings, Custom CSS**. Not in a theme file. If you have never used that box, see [How to Add Custom CSS in Shopify](/blog/how-to-add-custom-css-in-shopify).

```css
shopify-chat {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  height: auto !important;
  width: auto !important;
  pointer-events: none !important;
  contain: layout !important;
  z-index: 2147483000 !important;
}
```

Save, then reload your storefront and scroll. The bubble should stay put.

That is all it does: it puts back the four properties the reset removed, on the one element that needs them. Nothing else in the theme changes.

![Bubble position measured at three scroll positions, before and after](/images/blog/shopify-chat-widget/03-scroll-measurements.png)

## Do not put it in reset.css

Someone will suggest pasting the rule at the bottom of your theme's `reset.css` or `base.css` file. It does work.

It also disappears the next time you update your theme, because those are theme files and an update replaces them. The bug comes back weeks later with no obvious cause, and by then the fix has been forgotten.

Theme settings, Custom CSS survives updates. Use that.

## Do not drop pointer-events: none

If you trim the rule down, this is the line to keep.

I tested the short version, `position: fixed` and `inset: 0` with nothing else. It pins the bubble correctly. It also makes the chat component a full-screen invisible sheet over your storefront, and because the reset set `pointer-events` back to `auto`, that sheet catches every click.

I confirmed it: with those two lines only, the element under the middle of the page was `shopify-chat`, not the product the shopper was trying to click. Adding `pointer-events: none` back put the page underneath in charge again.

An invisible layer that swallows every click is a much worse bug than a scrolling bubble, and it is the kind that costs sales without anyone reporting it. Keep the full block.

## Why themes keep breaking web components

This is worth understanding because it will happen again with the next component Shopify ships.

A web component packages its own styling inside itself. That styling is deliberately weak, so a store can restyle the component without a fight. `:host` rules sit near the bottom of the pecking order on purpose.

A blanket reset in a theme sits above them. Not because it is written strongly, but because rules in your page always outrank a component's internal rules for the component's own element.

So any theme with a global `all: unset` will flatten any web component it does not explicitly exclude. It is a design collision, not a mistake by either side, and it is why the fix has to name the element.

The practical consequence: if you later add another Shopify feature that ships as a component, check it. If it is misplaced, the same shape of rule will fix it, with a slightly lower `z-index` so it sits under the chat bubble rather than over it.

## Shopify Forms is usually fine, and here is why

The obvious worry is that every Shopify component on the store is broken the same way.

I checked Shopify Forms on the same store. It is fine, and the reason is instructive.

Forms does not rely on `:host` styling for its position. It writes `position: fixed` as an inline style on a div inside the component. Inline styles beat stylesheet rules, so the theme's reset never reaches it. Their welcome popup was placed correctly with no override at all.

So do not add a rule for it. That would be one more line to maintain, and it would do nothing.

## What to check if the bubble is still wrong

**It is pinned but in the wrong corner.** That is a setting, not a bug. Shopify Inbox has a position option in the app, and the theme's Custom CSS is not involved.

**It is pinned but sitting behind something, or on top of your menu.** That is a stacking problem rather than a positioning one. Raise or lower the `z-index` in the rule to suit. I covered that case separately in [Stop a Chat Widget Covering Your Shopify Menu](/blog/shopify-chat-widget-covering-menu).

**It moved back after a theme update.** Then the rule was pasted in a theme file, not in Theme settings, Custom CSS. Move it.

**It is fine on desktop and wrong on mobile.** Check whether you have a second override somewhere, for example an app that adds mobile-only CSS. The rule above is not screen size specific and tested identically at 390 by 844.

**Nothing changed at all.** Confirm the app embed for Shopify Inbox is actually turned on, in Theme settings, App embeds. A disabled embed means there is no `shopify-chat` element on the page to style.

## Fixed, sticky and absolute: the difference that causes this

Three words get used interchangeably and they are not the same.

**Fixed** positions an element against the browser window. It stays in place while the page scrolls. This is what a chat bubble needs.

**Sticky** positions an element normally until it reaches a certain point, then it holds. This is what most sticky headers use.

**Absolute** positions an element against its nearest positioned ancestor, or against the page if there is not one. It scrolls with the page.

When a reset strips `position: fixed` off the chat component, the launcher inside it falls back to absolute against the page. That is why the bubble tracks the page perfectly instead of staying still, and why the numbers in the table above move by exactly the scroll amount.

Knowing that distinction is also the fastest way to diagnose any floating element that will not float. Look at `position` on the element, then on its parents, and the first thing that is not `fixed` when it should be is your answer.


---

---
title: "Shopify Checkout Customization: Change Checkout Text"
description: "Change the text on your Shopify checkout, like the Email me with news and offers checkbox, without code or Plus. Why the pop-up in checkout settings will not save, the route that does, and what else you can customize at checkout."
---

## The problem: checkout text you can edit but cannot save

Every Shopify checkout has a small checkbox under the email field. By default it reads **Email me with news and offers**.

A merchant on the Shopify Community wanted it to say **Get important updates on classes and events** instead. The wording made sense for their business, since they run classes and do not send offers.

They found the text in the admin and typed the new wording. Then they looked for a way to save it and found none. There was no Save button in the box, no button below it, and the change was gone when they came back.

I reproduced this on my own test store and got exactly the same result. Then I found the route that does save, and checked the result on a real checkout.

![Shopify checkout showing the default Email me with news and offers checkbox](/images/blog/shopify-checkout-customization/01-checkout-default-label.png)

![Shopify checkout showing a custom marketing checkbox label](/images/blog/shopify-checkout-customization/02-checkout-custom-label.png)

The first screenshot is the checkout before the change. The second is the same checkout a few seconds after saving the new text.

## Where the checkbox text lives

The checkbox is controlled from **Settings > Checkout**, in the card called **Marketing opt-in**. That card decides whether the checkbox shows at all.

The **Email** dropdown sets where it appears. On my store it was set to **Checkout and sign-in**, which shows it on the checkout page. The **SMS** and **WhatsApp** rows work the same way for text messages and WhatsApp, and they are set to **Don't show** unless you turn them on.

![Settings, Checkout, Marketing opt-in card with the Email dropdown and the label field](/images/blog/shopify-checkout-customization/03-marketing-opt-in.png)

Next to the Email dropdown is a grey field holding the label text. It looks like a normal text box, but you cannot type in it directly. When you hover over it, a pencil icon appears on the right, and clicking it opens a pop-up.

## Why the pop-up has no Save button

Clicking the pencil opens a pop-up titled **Online Store**. Inside it is a heading, **Checkout marketing**, and a field called **Accept email marketing checkbox label**.

You can click into that field and type. Nothing else happens. On my store there was no Save button anywhere in the pop-up, no Unsaved changes bar at the top of the admin, and no button further down the page. Shrinking the window, as the merchant also tried, does not reveal one.

![The Online Store pop-up with new text typed and no Save button](/images/blog/shopify-checkout-customization/04-popup-no-save.png)

The pop-up is a shortcut into a bigger editor called **Edit default theme content**. That editor holds almost every piece of fixed text your store shows, from button labels to the words on the password page. It normally lives under your theme, and in its full-page form it has a working Save button.

The pop-up opens the same editor, filtered down to the one field. It just does not bring the Save button with it. So the answer is to open the full editor yourself.

The checkout text belongs to your theme. That sounds strange, since checkout is not part of your theme's design, but Shopify keeps the checkout's fixed text in the same language file as the rest of your store's text. That file is part of whichever theme is live.

## How to change the checkout marketing checkbox text

This takes about a minute. You do not need an app, you do not need to edit code, and you do not need Shopify Plus.

1. In your Shopify admin, go to **Online Store**. You land on the Themes page.
2. Find your current theme, the one at the top marked as live. Click the **...** button next to **Edit theme**.

![Shopify Themes page with Online Store and the theme actions button highlighted](/images/blog/shopify-checkout-customization/05-themes-more-actions.png)

3. Click **Edit default theme content** in the menu.

![Theme actions menu with Edit default theme content highlighted](/images/blog/shopify-checkout-customization/06-edit-default-theme-content.png)

4. The full-page editor opens with tabs across the top, like General, Newsletter and Accessibility. Click the search icon on the right of the tabs.

![Edit default theme content page with the search icon highlighted](/images/blog/shopify-checkout-customization/07-search-icon.png)

5. Type **email me** in the search box. Two results come back. The first is under **Checkout & system > Checkout marketing**. That is the one you want.

![Searching default theme content for email me](/images/blog/shopify-checkout-customization/08-search-email-me.png)

6. Click the box under **Accept email marketing checkbox label** and type your new text. The grey text you see before typing is only the default showing through, so the box is empty until you type.

![Typing new text into the Accept email marketing checkbox label field](/images/blog/shopify-checkout-customization/09-type-new-label.png)

7. As soon as you type, a bar appears at the top of the admin that says **Unsaved changes**. Click **Save** in that bar.

![The Unsaved changes bar with the Save button highlighted](/images/blog/shopify-checkout-customization/10-save-bar.png)

A message at the bottom of the screen confirms **Theme content updated**. That is the save the pop-up never gives you.

## Check the result on your checkout, not in settings

After saving, I opened a fresh checkout on my store. The checkbox read **Get important updates on classes and events** straight away. There was no delay and no cache to clear.

Then I went back to **Settings > Checkout**. The grey field in the Marketing opt-in card still said **Email me with news and offers**, even after a full page reload.

This is easy to misread as a failed save. It is not. The settings page shows the default wording, and your checkout shows your saved wording. To check your change, add something to your cart and go to checkout. Look at the checkbox under the email field.

## Your text is saved inside the live theme

Because the label is stored in your theme, it follows that theme. I checked the language file of the live theme on my store after saving. It held exactly one checkout entry, the new label. The copy of Dawn sitting unpublished on the same store had no such entry, so it still carries the default text.

In practice that means three things:

- **Edit the live theme.** The steps above start from the theme marked as live for a reason. Editing a draft theme changes nothing at checkout until that theme is published.
- **Switching themes brings back the default.** If you install a new theme later, redo the change on the new one before you publish it.
- **Only the text you change is stored.** The theme keeps your edits and uses Shopify's default wording for everything else. You are not copying the whole checkout into your theme.

## The same label in customer accounts

When you search for **email me**, the second result is under **Customer accounts > Order details**, in a field called **Marketing checkbox label**. It defaults to the same words, Email me with news and offers.

That one is separate from the checkout label. If you want the wording to match everywhere a customer sees it, change both fields, then click Save.

## Other checkout text you can change the same way

The Checkout marketing label is one entry in a much longer list. Edit default theme content holds the fixed text for the checkout, the customer account pages, the password page, gift cards and more.

To find a piece of checkout text, search for a few words of it exactly as your customers see it. Searching **email me** found the checkbox field on my store, because those are the words the checkout shows. Then change the field and save with the bar at the top, the same as above.

The checkbox label also has two companions in the same Checkout marketing group of my store's theme. One reads **You are subscribed to receive email news and offers**. The other reads **Check your email to confirm your subscription to news and offers**. Both still promise news and offers, so if you reword the checkbox, reword them too. A search for **news and offers** is the way to reach them, since neither contains the words email me.

Two tips from doing this:

- **Search short.** Two or three distinctive words find the field. A whole sentence can miss if the wording has a small difference, such as a different apostrophe.
- **Check the section heading.** The same words often exist in more than one place, like the checkout and customer accounts labels above. The grey heading above each field tells you where it shows up.

## What else you can customize at checkout without Plus

Changing wording is one kind of Shopify checkout customization. The rest is split between two places, and both are on every plan.

The first is the **Settings > Checkout** page itself. On my store it holds these cards:

- **Customer contact method.** Whether shoppers give a phone number or email, or email only. Two checkboxes sit under it: a link to track the order with the Shop app, and an option to make shoppers sign in before checkout.
- **Customer information.** One dropdown per field. My store asked for first and last name, left out Company name, and kept Address line 2 and the shipping phone number optional.
- **Marketing opt-in.** The Email dropdown offers **Checkout only**, **Sign-in only**, **Checkout and sign-in** and **Don't show**. SMS and WhatsApp offer **Checkout only** and **Don't show**. Under Email there is also a note about preselecting the checkbox in certain regions, set to Automated for the United States on my store.
- **Tipping.** One checkbox to show tipping options at checkout.

![Settings, Checkout page with the Configurations Edit button and the contact method card](/images/blog/shopify-checkout-customization/11-checkout-settings.png)

## The checkout editor handles the look

The second place is the checkout editor. At the top of Settings > Checkout, the **Configurations** card has an **Edit** button. It opens a full-screen editor with a live preview of your checkout.

The left side lists the parts of the page: a Header with your logo and cart link, the Main column with Contact, Delivery, Shipping method and Payment, the Order summary, and a Footer with your policies. The gear icon at the top opens the style settings. On my store those were Logo, Color palette, Main, Header, Order summary, and Accent and buttons.

![Shopify checkout editor with the Settings panel open](/images/blog/shopify-checkout-customization/12-checkout-editor-settings.png)

So the split is simple. Colours, logo and layout go in the checkout editor. Words go in Edit default theme content. Adding a new block or a new field to checkout is a separate job from both, and usually means an app.

## If the new text does not show at checkout

- **You typed in the pop-up.** Anything typed in the pop-up from Settings > Checkout is thrown away. Go through Online Store > Themes and the full-page editor instead.
- **You edited a draft theme.** Go back to the Themes page and make sure you opened the **...** menu on the theme marked as live.
- **You did not click Save.** Leaving the page without clicking Save in the Unsaved changes bar keeps nothing. Look for the **Theme content updated** message.
- **You are checking the settings page.** The grey field in Settings > Checkout keeps showing the default. Check a real checkout instead.
- **The checkbox does not show at all.** In Settings > Checkout > Marketing opt-in, the Email dropdown has to be set to a value that includes checkout, like **Checkout and sign-in**. If it is set to Don't show, there is no checkbox to relabel.

## Customize, Edit default theme content, and Edit code

The theme actions on the Themes page lead to three different editors. They are easy to mix up.

- **Edit theme** opens the visual theme editor. It is for layout, sections, colours and images on your storefront pages. It does not hold the checkout label.
- **Edit default theme content** is the text editor from this article. It holds the fixed words your store and checkout use. No code is involved.
- **Edit code** opens the theme's code files. Store text lives in there too, but changing it through code is slower and easier to break. For wording changes, use Edit default theme content.

For relabelling a checkbox, a button or a heading, Edit default theme content is the right tool nearly every time.


---

---
title: Collapse Collection Filters by Default in Shopify
description: Long filter lists push products down the page. Collapse the Shopify collection filter groups so they open on click, in Dawn-based themes.
---

## The problem

A merchant asked about this on the Shopify Community. Their collection page filters were all open at once, and they wanted them closed by default.

On their theme, every filter group starts expanded. Availability is open. Price is open. Any tag or option group you added is open too. The more filters you set up, the taller the sidebar gets.

That tall sidebar is not just ugly. It pushes real content down. On a collection page, the products are what sell. When the filter column runs longer than the first row of products, shoppers scroll past a wall of checkboxes before they see anything to buy.

The merchant runs the **Nordic** theme. Nordic is a paid theme built on Dawn, Shopify's free reference theme. So this is really a Dawn-family behavior, and the fix works the same way on any Dawn-based theme.

I reproduced it on a test store on the Nordic theme. Here is the default: both filter groups sit wide open the moment the page loads.

![Nordic collection page with the Availability and Price filter groups both open by default](/images/blog/shopify-collapse-collection-filters/01-filters-open-before.png)

The merchant's goal was simple. Keep the filters in the sidebar, but have each one start closed. Click a filter to open it, click again to close it. An accordion, in other words.

That is exactly what this guide does. I will also cover a no-code option for people who do not want to touch theme files.

## Why it happens

This is the part most forum answers skip, so it is worth a minute.

A "filter" on a collection page is a group of options you can tick to narrow the products. Availability, price, color, size, and so on. Shopify calls these filters "facets". You set them up under **Settings > Search & Discovery > Filters**, and the theme decides how to draw them.

Each filter group is drawn with an HTML `<details>` element. Think of `<details>` as a native open-and-close box. If the tag has the word `open` in it, the box starts expanded. Remove that word, and the box starts collapsed. No JavaScript needed. The browser handles the toggle for you.

Here is the key difference. Stock Dawn only opens the **first** filter group and leaves the rest closed. It does that with a small rule in its code: open the box only when it is the first one in the loop.

Nordic drops that rule. Every filter group gets the `open` word, so every group starts expanded. That is the whole cause. Nordic is not broken. It just made a styling choice that opens everything.

I confirmed this by loading the page with JavaScript turned off. The groups still rendered open, which means the `open` is baked into the page by the theme, not added later by a script. So the fix has to be in the theme code, or in a theme setting. You cannot fix it with CSS alone in a reliable way.

Good news: it is a tiny edit. You are deleting one word, in one file, up to two times.

## Which fix is right for you

There are two clean ways to do this. Pick based on whether you are comfortable editing theme code.

- **Option 1 (small code edit).** Keeps your sidebar exactly as it is. Filters stay on the left, they just start closed. This is the closest match to what the merchant asked for.
- **Option 2 (no code).** Switches the filters to a slide-out **Drawer**. Nothing shows expanded on the page, but the sidebar is replaced by a "Filter" button. Choose this only if you like that look.

Most people want Option 1. It changes the behavior without changing the layout. I will walk through both.

## The fix (Option 1: collapse each group with a one-word edit)

This edits your theme code. It is safe and small, but always work on a copy if you are nervous. To make a copy, go to **Online Store > Themes**, find your theme, click the **...** (three dots), then **Duplicate**. Edit the duplicate, then publish it when you are happy.

**Step 1. Open the code editor.**

Go to **Online Store > Themes**. On your Nordic row, click the **...** (three dots), then **Edit code**.

![The Online Store Themes list with the three-dot menu open and Edit code highlighted on the Nordic row](/images/blog/shopify-collapse-collection-filters/02-edit-code-nordic.png)

"Edit code" opens the theme's files in a browser editor. It looks the same on every Shopify theme, so these steps match what you will see even if your theme is not Nordic.

**Step 2. Open the filters file.**

In the file list on the left, open `snippets/facets.liquid`. A snippet is a small reusable chunk of theme code. This one draws the filter groups.

If you cannot find it in the list, use search. Press **Ctrl + Shift + F** (or **Cmd + Shift + F** on a Mac) to search across every file, and type `facets__disclosure`. That is the class name Nordic uses for the desktop filter box, so the search lands you on the right lines.

**Step 3. Find the word `open` and delete it.**

Inside the filter's `<details>` tag you will see the word `open`. Delete just that word. Leave everything else in the tag alone.

There are usually **two** of these tags. One draws the normal filters, like Availability and any tag or option groups. The other draws the Price range. Remove `open` from **both**. Miss one, and that group will still start expanded.

**Step 4. Save.**

Click **Save** in the top right of the editor. That is it.

Refresh your collection page. Every filter now starts collapsed and opens when clicked.

![The same Nordic collection page after the fix, with the Availability and Price groups collapsed to just their labels](/images/blog/shopify-collapse-collection-filters/03-filters-collapsed-after.png)

**Tested on a Nordic store:** after removing `open`, the Availability and Price groups start collapsed and expand only when you click their label. The products now sit higher on the page because the sidebar is short.

One nice detail. When a shopper applies a filter, Dawn-based themes reload only the changed part of the page, not the whole page. That reload keeps your collapsed state. So the filters stay closed even after someone picks an option. You do not get a group popping back open mid-shop.

## An alternative (Option 2: switch to the Drawer layout, no code)

If you would rather not open the code editor at all, there is a built-in setting that hides the filters until they are needed.

This one does not collapse the sidebar. It removes the sidebar and puts your filters behind a single **Filter** button. Click the button, and the filters slide out in a panel.

Here is how to switch it on.

- Go to **Online Store > Themes**, then click **Customize** on your theme.
- Open a collection page inside the editor.
- Click the **Product grid** section.
- Find **Filtering and sorting**.
- Set **Desktop filter layout** to **Drawer**.
- Click **Save**.

![The Nordic Product grid settings in the theme editor, with Desktop filter layout set to Drawer](/images/blog/shopify-collapse-collection-filters/04-drawer-layout-option.png)

Your filters now open from a slide-out panel. Nothing shows expanded on the page, because nothing shows at all until the shopper opens the panel.

The trade-off is layout. Drawer replaces the left sidebar with a button. Some stores prefer that clean look. Others rely on the sidebar so shoppers can see the filter options at a glance. Try it and decide. You can switch back to **Vertical** in the same setting at any time.

If you want the sidebar to stay and just start closed, use Option 1. If you want the filters out of the way entirely, use the Drawer.

## Does this change anything on mobile?

No. This is a desktop change.

On phones, Dawn-based themes already hide filters behind a "Filter" button by default. They do not show an open sidebar on a small screen, because there is no room for one. So on mobile your filters were never the problem.

That is why the code fix targets the desktop filter class. When you delete `open` from `facets.liquid`, you are changing how the desktop sidebar behaves. The mobile drawer keeps working the way it always did.

Check both after you make the change, just to be sure. Open a collection on your computer and on your phone. Desktop should now start collapsed. Mobile should look exactly as before.

## How do I collapse filters on Dawn or another Dawn-based theme?

The same edit works, but the detail is slightly different, so read this if you are not on Nordic.

Stock Dawn already collapses everything except the first group. If that is enough for you, you are done. You only need this fix if you want the first group closed too.

To close the first group as well, open `snippets/facets.liquid` and look for the rule that adds `open` to the first item in the loop. It reads roughly like "if this is the first filter, add open". Remove the part that outputs `open`, and now no group starts expanded.

Many paid themes are Dawn-based. Nordic, and others in the same family, reuse Dawn's filter code with small changes. If your theme has a `snippets/facets.liquid` file, this approach applies. The exact wording of the tag may differ, so search for `open` inside the `<details>` tags and remove it there.

If your theme is not Dawn-based, the file name and class names will be different. The idea is still the same: find the `<details>` that wraps each filter group, and remove `open` so it starts closed. Search your theme files for `<details` and check which ones sit inside the filter markup.

## How do I make Shopify filters open on click instead of all at once?

That is exactly what Option 1 does, and it is worth explaining why it works so smoothly.

The `<details>` element is a native browser feature. It comes with open-and-close behavior built in. Click the summary line, and the box toggles. You do not need any JavaScript for that toggle to work.

So when you remove `open`, you are not disabling anything. You are just changing the starting state from open to closed. The click-to-toggle stays fully intact. This is why the fix is one word and not a script.

This also means it is fast and reliable. There is no extra code to load, nothing to break on a slow phone, and nothing that can conflict with an app. It is the theme's own markup doing the work.

If you ever want a group to start open again, add the word `open` back into that one `<details>` tag. You are in full control of which groups start expanded and which start closed, group by group.

## Will collapsing filters affect my Search and Discovery filter setup?

No. The two are separate, and this trips people up, so let me be clear.

Your filters are configured under **Settings > Search & Discovery > Filters**. That is where you choose which filters exist. Availability, price, a tag, a variant option, and so on. Shopify calls the source of these your "facets".

Collapsing the groups is a **display** change only. It changes how the theme draws the filters you already set up. It does not remove a filter, rename one, or change the order. Every filter you configured is still there. Each one just starts closed instead of open.

So you can safely collapse the groups without touching your Search & Discovery settings. And you can add or remove filters later, and they will inherit the collapsed behavior automatically, because the behavior lives in the theme, not in each filter.

## If it did not work

A few things can trip up the code edit. Here is what to check.

- **Only one group collapsed.** You removed `open` from one `<details>` but not the other. Go back to `snippets/facets.liquid` and search for `open` again. Remove it from every filter `<details>` tag, including the Price range one.
- **Nothing changed at all.** Make sure you saved, then hard-refresh the page. Press **Ctrl + Shift + R** (or **Cmd + Shift + R**) to bypass the cache. Themes and browsers cache heavily.
- **You edited the wrong theme.** If you have several themes, confirm you edited the one that is live, or the one you are previewing. The theme name shows at the top of the code editor.
- **You removed too much.** You only delete the word `open`. If you accidentally deleted a bracket or the class, the group may render oddly. Undo with **Ctrl + Z**, or use the code editor's older-versions view to restore the file, then remove only `open`.
- **Your theme is not Dawn-based.** If there is no `snippets/facets.liquid`, your theme draws filters differently. Search your theme files for `<details` inside the filter markup, and remove `open` there instead.

If you are still stuck, switch to Option 2 (Drawer) as a no-code fallback. It gets the filters off the page without any editing.

## Definitions and distinctions people confuse

A few terms come up around this, and mixing them up leads to the wrong fix.

**Filter vs facet.** Same thing, different word. On the storefront you call it a filter. In Shopify's admin and docs it is often called a facet. When someone says "shopify facets collapsed", they mean the same thing as "collapse collection filters".

**Collapse vs remove.** Collapsing hides the options behind a label until clicked. Removing deletes the filter so it no longer exists. This guide collapses. Your filter set stays complete.

**Vertical vs Drawer.** These are the two Nordic desktop filter layouts. Vertical is the left sidebar. Drawer is the slide-out panel behind a button. Option 1 keeps Vertical and collapses it. Option 2 switches to Drawer.

**Accordion.** A UI pattern where several boxes sit stacked, each closed until clicked, and you can open them one at a time. A collapsed filter sidebar is a Shopify filter accordion. That is the end result of Option 1.

**Sidebar vs the products.** The sidebar is the filter column. The products are the grid of items for sale. The whole point of collapsing is to shrink the sidebar so the products rise up the page. On a busy phone or a small laptop, that first screen of products is what earns the sale.

That is the full picture. Delete one word for a collapsed sidebar, or flip one setting for a slide-out drawer. Either way, your collection page leads with products instead of a wall of open filters.


---

---
title: Why Shopify Collection Cards Show Different Images
description: Some Shopify collection cards show one image, others several. Here is why, and how to control which product photos appear on the card.
---

## The problem

You open your Shopify collection page. Every product has plenty of photos. But the cards do not match.

One product shows a single image. The next one shows three. A third shows two, in an order you never picked.

You did not change any settings. The products look the same in the admin. Yet the grid looks messy and random.

A merchant asked about exactly this on the Shopify Community. Their store had launched with 3 or more images per product, often 5 to 8 because of colour variants. On the homepage collection, some products showed one image. Some showed a "random 3". None matched the order set in the product's Media section.

They had already tried the obvious fixes. They toggled the second-image-on-hover setting. They checked that "hide variant media" was unticked. Nothing helped.

This is the same question people phrase many ways: shopify collection different number of images, shopify collection card images not matching, or shopify collection showing one image. It is one behaviour with one cause.

I reproduced it on a test store on the Savor theme (Savor is part of Shopify's Horizon family of themes). Once you see the mechanism, it stops looking random. It becomes a rule you can control.

Here is what the two cards looked like on my test store.

![Two Savor collection cards side by side. The Carl Cox product shows three photos on the card. The Dimitri from Paris product shows only one.](/images/blog/shopify-collection-different-image-counts/01-savor-cards-different-image-counts.png)

## Why it happens

Here is the part most forum answers skip. The card count is decided by one thing: whether each photo is attached to a colour.

A "collection card" is the small product tile in a grid, like on a collection page or the homepage. It has its own little gallery. That gallery does not show every photo the product has.

On Savor, and on Horizon-family themes generally, the rule is simple:

- A photo that is **not** attached to any colour always shows on the card.
- A photo that **is** attached to a colour is hidden on the card, with one exception.
- The exception is the first colour's photo (the featured image). That one still shows.

So the card shows: the featured photo, plus every "loose" photo that is tied to no colour. Every other colour-tied photo is dropped.

That is the whole rule. Let me show why it produces such different counts.

I read the theme code to confirm it. Savor builds each card in a snippet called `card-gallery.liquid`. Inside, it first collects every image that is attached to a variant:

```liquid
assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
```

Then, as it loops through the photos, it hides the variant-attached ones that are not the first:

```liquid
if variant_images contains media.src
  assign attributes = 'variant-image'
  if forloop.first == false
    assign hidden = true
  endif
endif
```

The featured image is forced to the front of the loop. So if the featured image happens to be a colour photo, it survives because it is first. Every other colour photo gets `hidden`. Loose photos, the ones tied to no colour, are never marked as variant images, so they always show.

That single rule explains every case you see:

- **Every photo tied to a colour.** Only the featured one survives. The card shows exactly 1 image.
- **No photo tied to any colour.** Every photo is loose. The card shows all of them (up to the theme's limit).
- **A mix.** The card shows the featured photo plus the loose photos. The colour-tied ones vanish. This is where "random 3" comes from.

My two test products showed it exactly:

- **Dimitri from Paris**: every photo was attached to a colour. The card showed only 1.
- **Carl Cox**: 2 photos were attached to no colour. The card showed those 2 plus the first colour photo, so 3 in total.

The order looks random for the same reason. The card puts the featured photo first, then the loose photos in Media order. It is not honouring your full Media order. It is honouring featured-first, then loose-only.

Here is the same product in the admin. Photo 1 is tied to the Black colour, so it is hidden on the card. Photos 2 and 3 are tied to no colour, so they show.

![Shopify product admin showing the Media panel and the variants table. Photo 1 is tied to the Black colour and hidden on the card. Photos 2 and 3 are tied to no colour and show on the card.](/images/blog/shopify-collection-different-image-counts/02-photo-tied-to-colour-hidden.png)

This is why the two settings the merchant tried did nothing. The second-image-on-hover setting only controls whether a hover swaps to the next visible slide. The "hide variant media" option affects the product page gallery, not this card rule. Neither one touches the colour-attachment logic. The colour attachment is what decides the card.

## Check this first

Before you change anything, confirm the cause on one messy product.

1. Open the product in your Shopify admin.
2. Look at the Media section. Note how many photos it has.
3. Look at the Variants section. Click into a colour variant and see if it has a photo attached.

If most photos are tied to a colour, you have found it. The card is dropping the tied ones. If no photos are tied to a colour, your issue is different, and the failure-modes section near the end covers that.

This matters because shopify variant images on collection cards behave differently from loose product photos. Sorting out which is which is the whole job.

## The fix

The fix is not code. It is a decision, applied the same way to every product.

Pick one look for your cards. Then make every product match it. Consistency is what clears up the "random" grid.

You have two clean options.

### Option A: several photos per card

Choose this if you want your cards to show a small gallery, like a front and back shot.

1. Open the product in your admin.
2. Go to the Media section.
3. Decide which photos should appear on the card.
4. Make sure those photos are **not attached to any colour**.
5. Drag them into the order you want.

The card will show them featured-photo-first, then the loose photos in your Media order. Because they are loose, none of them get hidden.

To detach a photo from a colour, open the product, open that colour variant, and remove its image. The photo stays in Media. It just is no longer tied to that colour.

### Option B: one clean photo per card

Choose this if you want a tidy, uniform grid where every card shows a single image.

1. Open the product in your admin.
2. Attach exactly one photo to each colour.
3. Leave no photos loose.

Every card then shows a single, consistent image. Because every photo is tied to a colour, only the featured one survives, and that is what you want here.

The key rule for both options: do not leave products in a mix. A mix, some photos tied and some loose, is what created the random look. Pick A or B and apply it to your whole catalogue.

I tested both on a Savor 4.1.3 store. Option A gave me the 3-photo Carl Cox card. Detaching photos on the Dimitri product moved it from 1 image toward a consistent look. The behaviour matched the code every time.

### The trade-off to know

Detaching photos from colours has one cost. On the product page, selecting a colour will no longer switch the main image to that colour.

That is the deal. Colour attachment powers two things at once: the product-page colour swap, and the collection-card hiding. You cannot keep the swap and remove the card hiding with the same photos.

If the colour swap matters more to you, keep Option B. Attach one photo per colour, accept one card image, and the swap keeps working. If a richer card matters more, use Option A and give up the swap on the detached photos.

## An alternative if you have many products

The steps above are per product. If you have a large catalogue, doing this by hand is slow.

There is no single Shopify setting that flips this behaviour off. It is baked into how the theme builds the card. So the "no-code toggle" many people hope for does not exist here.

What you can do instead is decide the rule once, then apply it in bulk.

- Use the product Media view and work through the collection in one sitting, product by product, so the whole grid ends up consistent.
- Standardise your photo naming and your variant setup so new products follow the same rule from day one.
- If you sell many colour variants, lean toward Option B. It scales better because "one photo per colour" is a habit, not a decision you re-make every time.

The goal is not a clever trick. It is a rule you apply the same way forever, so the grid never drifts back to random.

## How do I show multiple images on a Shopify collection card?

Keep the photos you want on the card attached to no colour. That is the whole answer for shopify collection card images.

Loose photos always show. So put your front, back, and detail shots in Media, leave them untied to any variant, and drag them into order. The card shows the featured photo first, then those loose photos in your Media order.

If a photo is not appearing, check that it is not secretly attached to a colour. That is the usual reason a shopify collection product images gallery comes up short.

There is also a theme limit. Cards do not render an unlimited number of slides. On Savor the visible slide count is small by design, for speed. So expect a handful of images per card, not a dozen.

## Why does my Shopify collection show only one image?

Because every photo on that product is attached to a colour. The card keeps only the featured one and hides the rest.

Shopify collection showing one image is the clearest symptom of a fully-attached product. It is not a bug and it is not a broken upload. It is the card rule doing its job.

To get more than one image on that card, detach some photos from their colours, or accept that a fully-attached product will always show a single card image.

## Do variant images show on Shopify collection pages?

Only the first one. This is the core of the whole issue.

Shopify variant images on collection cards are filtered. The theme collects every variant-attached image, then hides all of them except the featured photo. So a product with five colour photos still shows one image on its card.

Loose photos are treated differently. They are not variant images, so they are never hidden. If you want variant-style shots to appear on the card, the workaround is to also add them as loose, untied photos in Media.

## Is this a Savor bug or normal Shopify behaviour?

It is normal behaviour for Savor and the wider Horizon theme family. It is written into the card-gallery code on purpose.

The intent is a clean grid. If a product has many colour photos, showing all of them on a tiny card would look cluttered and load slowly. So the theme shows one variant photo plus any loose photos.

Older themes like Dawn handle card images with their own rules, so you may see different counts if you switch themes. But within Savor, this is the designed behaviour, not a fault.

## If it did not work

A few things can make the fix look like it failed.

**The card still shows one image after detaching.** Check every variant, not just one. If even one colour still holds the photo you detached elsewhere, or if the photo is still the featured image, the count will not change. Detach from all colours, then re-check.

**The order is still off.** Remember the card always puts the featured photo first. If your desired first image is not the featured one, set it as featured in Media. Then the loose photos follow in Media order.

**Changes do not show right away.** Storefront pages cache. Give it a minute, then hard-refresh the collection page. If you use a preview theme, view the change on that theme's preview URL, not the live one.

**A product still shows too few images.** It may be hitting the theme's slide limit, or it may still be a mix. Confirm no photos are secretly tied to a colour, and confirm the product has enough loose photos to fill the card.

**You changed one product and expected the whole grid to fix.** It will not. This is per product. Apply your chosen option to every product in the collection.

## Definitions people confuse

A few terms get mixed up in this topic. Getting them straight makes the fix obvious.

**Media vs variant image.** Media is the full set of photos on a product. A variant image is a photo you have attached to a specific option value, usually a colour. Every variant image lives in Media, but not every Media photo is a variant image. The card only hides the variant images.

**Attached to a colour vs loose.** "Attached" means the photo is tied to a variant. "Loose" means it sits in Media with no variant. Loose photos always show on the card. This single distinction drives the whole behaviour.

**Featured image vs first Media image.** The featured image is the one Shopify treats as primary. The card forces it to the front. It is not always the first photo in your Media order, so if your card leads with the wrong image, fix the featured image.

**Collection card vs product page gallery.** The card is the small tile in a grid. The product page gallery is the big gallery a shopper sees after clicking in. They follow different rules. The colour-hiding behaviour described here is a card rule. The product page shows all your Media.

**Second-image-on-hover vs the card count.** Hover only swaps between images that are already visible on the card. It does not add hidden variant photos back. So it can never fix a one-image card on its own.

Once these five distinctions click, shopify collection different number of images stops being a mystery. It is one rule: colour-attached photos are hidden on the card, except the featured one. Decide the look you want, apply it to every product, and the grid falls into line.


---

---
title: Fix Missing Collection Filters in Shopify
description: Filters gone from your Shopify collection pages? Here is the checklist that brings the filter sidebar back, from Search & Discovery to theme settings.
---

## The problem

You open a collection in Shopify and the filter you rely on is gone.

A merchant named Danielle asked about this on the Shopify Community. Her words say it best. The filter option was removed from the collection editor. So there was no built-in way to filter the product list by status right inside a collection. Editing on the back end got slow and painful.

I reproduced it on a test store. She is right. Open a collection today and you get a sort control and a view toggle. The old status filter is not there.

Here is the thing to know first. "Shopify collection filters not showing" means two different problems. People search the same phrase for both. Sort out which one you have before you fix anything.

- Meaning one is the admin problem. You are inside the collection editor in Shopify admin. You want to filter that product list by status, like Active or Draft. That control is gone.
- Meaning two is the storefront problem. A shopper opens your collection page and the filter sidebar is missing. No filter by price, size, or color.

This guide fixes both. The admin fix comes first, because that is the exact thread we answered. The storefront fix, the Search & Discovery side, comes right after.

![Shopify collection editor with no status filter, only a sort control and a view toggle](/images/blog/shopify-collection-filters-not-showing/01-collection-editor-no-status-filter.png)

## Why it happens (the admin side)

The collection editor used to carry an inline filter. You could stand inside one collection and filter its products by status. That inline control was removed.

Nothing broke on your store. No setting got flipped. Shopify simply moved where that filter lives. The status filter now lives on the main Products page, not inside the collection.

That is the whole mechanism. Most forum answers tell you to look harder inside the collection. There is nothing to find there. The filter moved houses. Once you know that, the fix is quick.

The good news. The Products page filter is more powerful than the old one. It stacks filters. It saves views. It bulk edits. So you end up faster than before, not slower.

## The fix: rebuild the view from the Products page

This is the fix I tested and posted to the thread. It takes about thirty seconds once you have done it once.

**Step 1. Open Products, not the collection.**

In the left menu of Shopify admin, click Products. Do not open the collection. The collection editor is the place that lost the filter, so we work from the Products list instead.

**Step 2. Add the Collection filter.**

Click the search and filter bar at the top of the Products list. Add the filter called Collection. Pick the collection you were trying to edit.

Now the list shows only the products in that collection. That already rebuilds half of the old view.

**Step 3. Add the Status filter.**

Click the filter bar again. Add the filter called Status. Choose Active, Draft, or Archived.

That is the control that vanished from the collection editor. Here it stacks on top of the Collection filter.

![Shopify Products page with the Collection filter set and the Status dropdown open](/images/blog/shopify-collection-filters-not-showing/02-products-page-collection-status-filter.png)

**Step 4. Read the result.**

The list now shows only that status inside that collection. In my test, Collection plus Status set to Draft returned only the draft products in that collection. Ready to bulk edit.

![Shopify Products list showing only the draft products inside one collection](/images/blog/shopify-collection-filters-not-showing/03-drafts-inside-collection-result.png)

**Step 5. Save it as a view (optional but worth it).**

At the right of the filter bar there is a Save button. Click it and name the view. Next time it is one click. No re-filtering.

**Step 6. Bulk edit from here.**

Tick the checkbox at the top of the list to select every product. Then use the bulk actions. Change status, prices, tags, and more in one go. This is faster than the old inline filter ever was.

You can stack more filters too. Add Vendor, Product type, or Tag to narrow further. Each one clicks on in the same filter bar.

## An alternative: if you meant the storefront filter sidebar

Maybe your problem is meaning two. A shopper opens a collection page on your live store and there is no filter sidebar. This is a different fix. It lives in a free Shopify app and your theme, not in the admin filter bar.

Storefront filters in Shopify come from an app called Search & Discovery. It is free and made by Shopify. Your theme then draws the filters that this app defines.

Here is the checklist to bring the filter sidebar back.

**1. Install Search & Discovery.**

Go to the Shopify App Store and install Shopify Search & Discovery. It is free. Without it, most themes show no filters at all on collection pages.

**2. Turn on filters inside the app.**

Open the app. Go to the Filters tab. Add the filters you want, like Availability, Price, Color, or Size. A brand new install often has zero filters set up, which is why the sidebar looks empty.

**3. Check the theme setting that shows filters.**

Filters can be defined in the app but still hidden by the theme. In the theme editor, open a collection page template. Find the product grid or collection section. Look for a setting like "Enable filtering" or "Filtering and sorting" and turn it on.

**4. Make sure the collection template has a facets section.**

A "facet" is just Shopify's word for a filter, like a size or a color option. The collection template needs the section that renders these facets. In most free themes this is built in. In a heavily customized theme, someone may have deleted it. If the setting in step 3 does not exist, the section itself is missing and needs to be added back.

**5. Confirm your products carry the data to filter on.**

Filters need something to sort by. A price filter needs prices. A color filter needs a color option or a color tag. If your products have no options and no relevant tags, the filters will render empty and hide themselves.

Do these four checks in order and the sidebar comes back. In my experience the number one cause is the simplest one. Search & Discovery was never installed, or it was installed with no filters added.

## Why did the filter disappear from my Shopify collection editor?

It disappeared because Shopify removed the inline status filter from the collection editor. This was a platform change, not a bug on your store.

You did not delete anything. A theme update did not cause it. The filter moved to the main Products page, where it now stacks with a Collection filter to do the same job.

So there is no toggle inside the collection that brings it back. The path forward is the Products page workflow above. Save the filtered view once and it stays one click away.

## How do I enable collection filters in Shopify?

It depends on which filters you mean.

For admin filtering by status, you enable them on the Products page. Add a Collection filter, then a Status filter, then Save the view. There is no separate on and off switch. The filters are always available on the Products list.

For storefront filters that shoppers use, you enable them in two places. First install Shopify Search & Discovery and add filters in its Filters tab. Second turn on filtering in your theme editor on the collection template. Both must be on for the sidebar to appear.

The short version. Admin filters live on the Products page. Storefront filters live in Search & Discovery plus your theme.

## Why is my Shopify collection page showing no filters for shoppers?

The most common reason is that Shopify Search & Discovery is not installed, or it has no filters added inside it.

Walk it down in this order.

- No filters at all on any collection usually means the app is missing or empty. Install it and add filters.
- Filters on some collections but not others usually means those collections use a different template with filtering turned off. Check each template in the theme editor.
- Filters that appear then vanish usually means the products in that collection lack the data the filter needs, like a price range or a color option.

Fix the cause that matches your pattern. You rarely need to touch theme code for this.

## Can I filter products by status inside a Shopify collection?

Not inside the collection editor anymore. That inline control was removed.

You get the same result from the Products page. Filter by Collection, then filter by Status. The list you see is identical to the old inline view, and you can bulk edit right there.

Save it as a view so you never rebuild it. Name it something like "Drafts in Summer Sale" and it is one click forever.

## If it did not work

A few things trip people up. Here is what to check.

- You are still inside the collection editor. The status filter is not there and will not come back. Go to Products in the left menu instead.
- The Status filter is missing from the Products filter bar. Scroll the list of filters in the "Add filter" menu. Status sits among Collection, Vendor, Tagged with, and more.
- The saved view did not save. Give it a clear name before you confirm. An unnamed view can be dropped.
- Storefront filters still empty after installing Search & Discovery. You installed the app but never added filters in its Filters tab. An empty app shows an empty sidebar.
- Storefront filters show on the home template but not the collection. Your collection template has filtering turned off, or it uses a template without the facets section. Check that exact template in the theme editor.
- Only some products respond to a filter. Those products lack the option or tag the filter reads. A color filter cannot show a product that has no color set.

## Definitions people confuse

**Collection editor filter versus Products page filter.** The collection editor is the page for one collection. It lost its inline status filter. The Products page is the master list of every product. It has the full filter bar. Same data, different screen.

**Filter versus sort.** A filter hides rows that do not match, like showing only drafts. A sort reorders the rows you already see, like newest first. The collection editor kept sort but lost the status filter, which is why the page can look almost the same yet feel broken.

**Admin filters versus storefront filters.** Admin filters help you, the merchant, manage products. Storefront filters help shoppers narrow a collection while they browse. They live in completely different places. Fixing one does nothing for the other.

**Search & Discovery versus theme settings.** Search & Discovery is the app that defines which storefront filters exist. Your theme decides whether to draw them. You need both switched on. A filter defined in the app but disabled in the theme never shows.

**Facet.** This is Shopify's technical word for a storefront filter, like a price band or a size. When a theme setting mentions facets, it means the filter sidebar. Same thing, more formal name.

That is the full picture. Sort out which filter you lost, admin or storefront, then follow the matching branch. The admin fix takes thirty seconds from the Products page. The storefront fix is a short checklist through Search & Discovery and your theme.


---

---
title: "Shopify Category Grid: Add More Than 8 Tiles in Dawn"
description: "Shopify's collection grid seems capped at 8 tiles, and stacking two sections leaves a gap. Here is how to get a seamless 16-tile category grid on a free theme with one number change."
---

## The problem

A merchant asked about this on the Shopify Community, and most stores hit it.

They wanted a category grid on their homepage. A block of collection tiles, so shoppers can jump straight to "Dresses", "Shoes", "Bags", and so on. They wanted 16 of them in one clean block.

The theme seemed to cap the grid at 8 tiles. Shopify's built-in AI suggested stacking two 8-tile sections on top of each other to reach 16.

That got them to 16 tiles. But it left a visible gap between the two blocks, so the grid did not look like one seamless grid. It looked like two grids with a seam down the middle.

Their exact words: "there's a noticeable gap so it doesn't look seamless."

They also said they do not know how to write CSS or edit code. So any fix has to be short and safe.

I reproduced this on a test store, found why the gap happens, and got a seamless 16-tile grid with a single number change. Here is the result on a free theme.

![16 collection tiles in a single 4x4 grid on a Shopify store](/images/blog/shopify-collection-grid/01-16-tile-grid-result.jpeg)

One section. Sixteen tiles. No gap between the rows.

## Why the gap happens

This is the part worth understanding, because it tells you why the whole "stack two sections" approach is doomed.

A section on your homepage is one self-contained block. When you drop a Collection list section, everything inside it lives in one CSS grid. The spacing between tiles in that grid is controlled and even.

When you stack a second Collection list section under the first, you now have two separate grids. Between them sits section padding, which is the empty margin every section adds above and below itself.

So the "gap" is not a grid gap. It is two lots of section padding meeting in the middle. You can shrink it, but you can never make it match the tight, even spacing inside a single grid. That is why the merchant's version never looked seamless no matter how much the AI trimmed the spacing.

The fix is not to make two sections touch. It is to use one section that holds all 16 tiles.

## The 8-tile limit is not really 8

Here is the second surprise. The limit is not 8, and it is not fixed.

Each theme decides how many tiles its Collection list section allows. It sets that in the section's own code, as a value called `max_blocks`. Different themes ship different numbers. Some default low, which is where the "it maxes out at 8" impression comes from.

On Dawn, the free Shopify theme, the Collection list section allows 15 tiles out of the box. No code needed for the first 15.

The platform itself allows up to 50 blocks in a section. So the ceiling is not the platform. It is one number in your theme, and you can raise it.

To get the merchant's 16 tiles, we only need to nudge that one number from 15 to 16.

## Which free theme to use

I recommend Dawn for this. It is free, Shopify made it, and its Collection list section is a single, clean grid with a desktop column control. That combination is exactly what a category grid needs.

The merchant had tried Horizon and Spotlight. Those can also show collections, but their section models differ and the tile counts and layout options are not the same. If you want the simplest path to a seamless multi-tile category grid with no app, Dawn is the one to reach for.

Everything below is done on Dawn.

## Step 1: Raise the tile limit to 16

You only need this step if you want more than 15 tiles. For 15 or fewer, skip straight to Step 2, because no code is involved.

- In your admin, go to **Online Store > Themes**.
- Next to Dawn, click the **...** button, then **Edit code**.
- In the left file list, open the **sections** folder, then **collection-list.liquid**.
- Scroll near the bottom and find the line `"max_blocks": 15`.
- Change the 15 to **16**.
- Click **Save**.

![Editing collection-list.liquid to change max_blocks from 15 to 16](/images/blog/shopify-collection-grid/02-edit-code-max-blocks.png)

That is the entire code change. One number. You are not writing CSS and you are not adding a snippet. You are lifting a cap the theme set on itself.

If you ever want more than 16 later, set that same number to anything up to 50 and add that many tiles.

## Step 2: Build the grid

Now build the section visually. No code here.

- Go to **Online Store > Themes** and click **Customize** on Dawn.
- Click **Add section**, then choose **Collection list**.
- In the section settings, set **Columns** to **4**. This gives a clean 4 by 4 layout for 16 tiles.
- Add a tile for each collection you want, up to 16. Each tile points at one collection.

![Adding a Collection list section and setting Columns to 4 in the Dawn theme editor](/images/blog/shopify-collection-grid/03-collection-list-columns.jpeg)

Save, and you are done. All 16 tiles sit in one grid with even spacing. No seam, because there is only one section.

Columns is adjustable. Four columns give a 4 by 4 block. Three columns give a different rhythm. Pick whatever suits your number of categories and your images.

## Want more or fewer than 16?

The layout scales cleanly once you understand the two levers.

- **Number of tiles** is set by `max_blocks` in the code plus how many tiles you actually add in the editor. Raise `max_blocks` to any value up to 50 for more tiles.
- **Shape of the grid** is set by the Columns control in the section settings. It decides how many tiles sit per row.

So 12 tiles in 4 columns is a 4 by 3 block. 20 tiles in 5 columns is a 5 by 4 block. You are mixing one code value with one editor control, nothing more.

## Category grid vs product grid

People mix these two up, and it changes which section you use.

A **category grid** shows collections. Each tile is a category like "Shoes" or "Sale", and clicking it takes the shopper to that collection page. The section for this is **Collection list**, and it is what this whole guide covers.

A **product grid** shows individual products. Each tile is one product with its price. The section for this is **Featured collection**, which pulls products from a single collection.

If your tiles should be categories, use Collection list. If your tiles should be products, use Featured collection. The block-limit trick works the same way for both, but they are different sections.

## What to check if it did not work

A few things trip people up after the change.

- **Still capped at 15?** The code edit did not save, or you edited the wrong theme. Make sure you edited the theme you are actually customizing, and that you saved `collection-list.liquid`.
- **The 16th tile will not add?** You raised `max_blocks` but on a different theme copy. Edit code and Customize must be on the same theme.
- **Tiles look uneven in height?** That is usually the image ratio setting. In the section settings, set the image ratio to a fixed shape like Square so every tile matches.
- **You updated Dawn and the limit reset to 15.** A theme update can replace theme files, including your one-line change. If you update Dawn, redo that single edit. This is the one maintenance cost of the code change, and it is small.

## Make it look right on mobile

A grid that looks great on a desktop can feel cramped on a phone, so check both.

Dawn's Collection list has a separate mobile column setting. On a small screen, four columns squeeze each tile and its label into a sliver. Two columns almost always reads better on mobile, so a 4 by 4 desktop grid becomes a 2-wide grid on phones.

Set the desktop columns and the mobile columns independently. Desktop 4, mobile 2 is a safe starting point for a 16-tile grid. Then open the store on your phone, or use the theme editor's mobile preview, and confirm the labels are readable and the tiles are not too small to tap.

Image ratio matters here too. A fixed Square ratio keeps every tile the same height, so the rows line up. Adaptive ratios let each image keep its own shape, which can leave the grid looking ragged when your category images are different sizes.

## How many categories should a grid show?

Just because you can show 16, or 50, does not mean you should.

A category grid is a navigation shortcut. Its job is to get a shopper to the right section fast. Too many tiles turns it back into a wall of choices, which is the thing good navigation is meant to avoid.

For most stores, the sweet spot is the handful of categories that actually drive sales, shown clearly, with strong images. If you genuinely sell across 16 distinct categories, a 4 by 4 grid is a clean way to show them. If you are padding it out to fill space, fewer, larger tiles usually convert better.

Use the tile count that matches your real catalog, not the maximum the theme allows.

## Do you even need to touch code?

If 15 tiles is enough, no. Dawn's Collection list holds 15 with zero code. Add the section, set your columns, add up to 15 tiles, done.

The code step exists only to cross from 15 to 16, or higher. For many stores, 15 categories is already more than enough, and you can ship the whole thing without opening the code editor at all.

The real fix here was never "learn CSS." It was understanding that the gap came from stacking sections, and that the tile cap is one editable number. Once you know that, a seamless 16-tile category grid on a free theme takes about five minutes.

I tested every step above on a Dawn store. Sixteen collection tiles rendered in a single 4 by 4 grid with even spacing and no gap between the rows.


---

---
title: "Shopify Collection Image Size: Why Cards Look Wrong"
description: Collection images that look fine on desktop can turn huge on mobile, with the second card cut off the screen. The cause is not pixel dimensions, it is aspect ratio. Here is what to set, measured on a real phone viewport.
---

## The problem

Most advice about Shopify collection image size gives you a number. Upload 1024 by 1024, or 2048 by 2048, and you are done.

That advice is not wrong, but it does not fix the thing people actually complain about.

A merchant asked about this on the Shopify Community. Their homepage looked correct on desktop. On a phone, the collection tiles were enormous, and the second tile in each row ran off the right edge of the screen. Tapping through to the collection looked perfect. Only the homepage cards were broken.

Their words: massively oversized, and it reverts to fit the screen perfectly once you select it.

That is not a resolution problem. Uploading bigger or smaller files changes nothing. The cause is the **shape** of the images, not their size in pixels.

## What is actually going wrong

I loaded the store on a real 390 pixel wide iPhone viewport and measured the layout rather than eyeballing it.

The section was already configured correctly. Its own settings said two equal columns on mobile, written into the page as `repeat(2, 1fr)`. Two equal columns inside a 358 pixel content area should give two 175 pixel cards.

The columns came out **259 pixels and 190 pixels**.

That is 449 pixels of cards, plus the gap, inside a 358 pixel box. Around 99 pixels of the second card sits past the edge of the phone. And because it is a grid rather than a carousel, there is nothing to swipe. The content is simply cut off and unreachable.

![Shopify collection cards at a 390px phone width, with the right column cut off the screen](/images/blog/shopify-collection-image-size/01-collection-cards-clipped-mobile.png)

So the merchant's two complaints, oversized tiles and a tile hanging off the edge, are one bug.

## Why the aspect ratio decides the width

Here is the mechanism, because once you see it the fix is obvious.

Many modern Shopify themes set the collection card's aspect ratio from the image itself. The theme writes each image's own proportions onto the card as a variable, then applies it:

```css
aspect-ratio: var(--ratio);
```

On this store there were 24 collection cards and **22 different values** of that variable, ranging from 0.735 to 1.256. Twenty-two different card shapes on one page.

Now the important part. In a CSS grid, a `1fr` track will not shrink below the minimum width its content needs. When a card has a fixed aspect ratio and the row forces a shared height, the card's minimum width becomes height multiplied by ratio. A tall card in a tall row demands a wide track.

So the images are not just different heights. They are actively **inflating the columns they sit in**, past what the screen can show.

That is why it only breaks on mobile. On a wide desktop there is enough room to absorb the extra width. On a 390 pixel phone there is not.

And it is why the collection page looks fine. That page uses a different grid, one that is not driven by each image's own shape.

## The fix: give every card the same aspect ratio

You do not need code, and you should not paste any.

1. Open your theme editor and go to the page with the collection cards, usually the home page.
2. In the left sidebar, expand the collection section.
3. Expand **Collection card**, then select the **Image** block inside it.
4. Find the **Aspect ratio** setting on the right. It will most likely be on **Auto**.
5. Change it to a fixed shape.

The moment every card shares one ratio, the columns resolve properly. I tested this on the live page and the tracks went from 259 pixels and 190 pixels to **175 pixels and 175 pixels**, with zero overflow.

![Shopify collection cards with one aspect ratio set, showing two even columns and nothing clipped](/images/blog/shopify-collection-image-size/02-collection-cards-even-columns.png)

Auto is the setting causing the problem. Anything else is better. But which one you pick matters for a different reason.

## Which aspect ratio should you choose?

This is where the generic advice fails, and where you should spend two minutes rather than guessing.

Whatever ratio you pick, Shopify crops your images to fit it. Pick the wrong one and every image loses its edges.

So pick the one closest to what you have already uploaded.

On the store above, I measured all 24 collection images. Twenty-one of the 24 were portrait, and the median ratio was **0.85**, which is close to 4:5. Only one image was landscape.

For that store, Square is the worst available choice. It would crop the top and bottom off almost every image in the collection list. Portrait is the right answer, and it is not what most tutorials suggest.

Your library may be the opposite. The point is to check rather than default to square.

### How to check your own images

You do not need to open each one. Look at the collection list in your admin and judge the thumbnails as a group.

- Mostly taller than wide, so people or products shot upright: choose **Portrait**.
- Mostly wider than tall, so flat lays, landscapes or wide banners: choose **Landscape**.
- Genuinely mixed, or you are not sure: choose **Square**, and accept that some images lose their edges.

If the important part of an image sits near an edge, a logo in a corner or text along the bottom, that part is what gets cut. Which brings us to the durable fix.

## The better long term answer: crop the sources

Setting one aspect ratio makes the layout correct. It does not make the images look good.

Cropping to a shape they were never designed for can cut heads off, slice through product names, or lose a logo. The card is now the right size but the picture inside it is wrong.

If your collection images matter to how the store looks, re-crop them yourself to one consistent shape before uploading. Then set the theme's aspect ratio to match.

That way you decide what stays in frame, not an automatic centre crop. It is the difference between a page that stops being broken and a page that looks designed.

## What size should a Shopify collection image be?

Now the pixel question, since it does matter, just less than shape.

Shopify recommends collection images at around **1024 by 1024 pixels**, and accepts up to 4472 by 4472 or 20 megabytes.

In practice:

- Go bigger than the space it will fill, so it stays sharp on high resolution phones. Something around 1200 to 2048 pixels on the long edge is plenty.
- Keep every collection image the same dimensions. Consistency here is what prevents the whole problem above.
- Use JPEG for photographs and PNG only when you need transparency.
- Do not upload a 6000 pixel wide original. Shopify will serve resized copies, but you are slowing your own uploads and your admin for nothing.

The one number that actually matters is the ratio, and that you should choose deliberately.

## Set it on every section, not just the first

A detail worth knowing before you declare victory.

The aspect ratio setting applies to the **section you are editing**, not to the whole store.

If your home page has more than one section showing collection cards, each one needs setting separately. The same is true of any other page using them.

After changing it, scroll the whole home page on an actual phone. It is common to fix the first row and leave an identical problem further down.

## If you already pasted CSS

A lot of forum answers for this problem hand you a snippet to paste into `theme.liquid`, usually something forcing a square ratio below 767 pixels.

If you have done that, take it back out before using the theme setting.

Two reasons. Running both means a future you, or a future developer, has to work out why the card behaves oddly and which of two fixes is winning. And the pasted version disappears the next time you update your theme, so the bug returns with no obvious cause.

The theme setting survives updates and lives where somebody would think to look.

There is also a correctness problem with most of those snippets. They are wrapped in a mobile only media query, so they stop at 767 pixels. The uneven shapes are still there on desktop, just with enough room to hide them.

## How to check you actually fixed it

Do not rely on the theme editor's mobile preview alone. It can look right while a real phone still overflows.

The fastest real check, on a desktop browser:

1. Open your live home page.
2. Open developer tools and switch on device emulation.
3. Set the viewport to 390 by 844, an iPhone width.
4. Try to scroll the page sideways.

If the page will not move sideways and both cards in every row are fully visible, it is fixed. If you can drag the page left, or a card is sliced by the screen edge, something is still forcing a width.

Check at 375 pixels too, which covers older and smaller iPhones.

## Related reading

If your collection cards are showing the wrong product photos rather than the wrong shape, that is a separate issue with its own cause. See [Why Shopify Collection Cards Show Different Images](/blog/shopify-collection-different-image-counts).

## The short version

Collection image size is a ratio question before it is a pixel question.

If your cards look oversized on mobile, or one runs off the edge, the aspect ratio is set to Auto and each image is inflating its own column. Set one fixed ratio on the Image block inside the Collection card, in every section that uses them.

Choose the ratio that matches most of your existing images rather than defaulting to square, and re-crop the sources if the images matter. Then test at 390 pixels and confirm the page will not scroll sideways.


---

---
title: "Shopify Collection Page Template: Add a Custom Section"
description: You cannot put Liquid in a collection JSON template. Here is the correct wiring for a custom section on one collection, plus the two errors that block most people, tested on Dawn.
---

## The problem: your section will not go into the collection template

You built a custom section. It reads a metafield and only renders when there is something to show. Now you need it on one collection page, not all of them.

So you open `templates/collection.json`, try to paste your Liquid in, and it will not save.

This is one of the most common Online Store 2.0 misunderstandings, and the error messages are unhelpful. A merchant hit it on Dawn and spent most of a thread going in circles, which is a fair outcome given how little Shopify explains here.

The short version: **a JSON template contains no Liquid.** Not a tag, not a filter, not a conditional. It is a list of which sections render and in what order. All the markup and all the conditionals live in the section file.

I built the whole thing on a Dawn test store. Here is the correct wiring, and then the two errors that actually block people, because neither is about the concept.

## How Online Store 2.0 templates are wired

Three files, three jobs. Getting these straight makes everything else obvious.

**The section** (`sections/your-section.liquid`) holds markup, Liquid, conditionals, and a `{% schema %}` block declaring its settings. This is where logic goes.

**The JSON template** (`templates/collection.something.json`) lists section instances and their order. It is configuration, not code. Every value is a literal.

**The collection** points at a template in its admin sidebar.

The rule that follows: if you are writing an `{% if %}`, you are in the wrong file.

## Step 1: the section does the metafield check

Create `sections/collection-metafield-banner.liquid`. The conditional lives here:

```liquid
{% if collection.metafields.custom.promo_banner.value != blank %}
  <div class="page-width">
    <div class="collection-metafield-banner color-{{ section.settings.color_scheme }}">
      {{ collection.metafields.custom.promo_banner.value }}
    </div>
  </div>
{% endif %}

{% schema %}
{
  "name": "Metafield promo banner",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-2"
    }
  ],
  "presets": [{ "name": "Metafield promo banner" }]
}
{% endschema %}
```

The `{% if %}` wraps everything including the outer `div`. That matters: when the metafield is empty the section outputs nothing at all, not an empty container with padding. No stray gap on collections that have no promo.

The `presets` block is what makes the section appear in the theme editor's "Add section" list. Without it the section exists but you cannot add it through the UI.

## Step 2: reference it from the JSON template

Duplicate `templates/collection.json` and name the copy something like `templates/collection.metafield-promo.json`.

Then add your section to it:

```json
{
  "sections": {
    "banner": {
      "type": "main-collection-banner",
      "settings": { "...": "..." }
    },
    "metafield-promo": {
      "type": "collection-metafield-banner",
      "settings": { "color_scheme": "scheme-2" }
    },
    "product-grid": {
      "type": "main-collection-product-grid",
      "settings": { "...": "..." }
    }
  },
  "order": ["banner", "metafield-promo", "product-grid"]
}
```

Two rules govern this file, and confusing them causes most of the failures:

**`type` must match the section filename exactly**, minus `.liquid`. `collection-metafield-banner.liquid` becomes `"type": "collection-metafield-banner"`. Get this wrong and you get a "section not found" error.

**The key in `sections` is an id you invent.** `metafield-promo` here. It has no relationship to the filename. Its only job is to be referenced in `order`.

`order` controls render order top to bottom. Every id in `order` must exist in `sections`, and every id in `sections` should appear in `order` or it will not render.

## Step 3: create the metafield definition

Go to **Settings > Custom data > Collections > Add definition**.

Name it **Promo banner**. Check the generated namespace and key read `custom.promo_banner`, matching the section code. Type: single line text.

![The collection metafield definition for the promo banner](/images/blog/shopify-collection-page-template/01-collection-metafield-definition.jpeg)

The namespace and key are what the Liquid looks up. If Shopify generated something different from `custom.promo_banner`, either edit it here or change the section code to match. It has to be one or the other.

## Step 4: fill the metafield and assign the template

Open the collection. Two things on this screen.

Scroll to **Metafields** and fill in **Promo banner**. Anything, for example `Winter Sale - 20% off all jackets this week`.

Then find **Theme template** in the sidebar and switch it from **Default collection** to **metafield-promo**.

![The metafield value filled in and the theme template dropdown](/images/blog/shopify-collection-page-template/02-metafield-value-and-theme-template.jpeg)

The template assignment is the step people skip. You can build the template perfectly and see nothing, because the collection is still rendering `collection.json`.

Save, and the banner appears between the collection banner and the product grid, exactly where `order` put it.

![The metafield banner rendered on the collection page](/images/blog/shopify-collection-page-template/03-banner-rendered-on-collection.jpeg)

Leave the metafield blank on a different collection using the same template and the section renders nothing. That is the `{% if %}` from step 1 doing its job.

## The two errors that actually block people

The concept above is the easy part. These are what people get stuck on, and neither is really about templates.

### "File save error" from the JSON template

Almost always invalid JSON. Two causes, both invisible if you are skimming.

**A missing comma in `order`.** This is the big one:

```json
"order": [ "carousel" "banner", "product-grid" ]
```

There is no comma after `"carousel"`. JSON has no opinion about newlines, so this reads as one broken value and the parser rejects the whole file. The editor will not tell you which line.

**Smart quotes.** If you drafted the JSON anywhere other than a code editor, autocorrect may have turned `"sections"` into `“sections”`. Those are different characters and JSON only accepts straight quotes. This is why pasting from a document, a chat window or a forum post so often fails when the same text typed by hand works.

If a template will not save, paste it into any JSON validator first. It takes ten seconds and it is almost always one of these two.

### "Could not find asset snippets/xyz.liquid"

This error means `{% render 'xyz' %}` could not find `snippets/xyz.liquid`.

`{% render %}` **only looks in the `snippets` folder.** It cannot render a section. So this:

```liquid
{% if collection.metafields.custom.hero_images.value != blank %}
  {% render 'collection-hero-carousel' %}
{% elsif collection.image %}
  {% render 'collection-featured-image' %}
{% else %}
  {% render 'collection-header' %}
{% endif %}
```

requires three real files in `snippets/`: `collection-hero-carousel.liquid`, `collection-featured-image.liquid` and `collection-header.liquid`.

If you were handed this code without those files, it was written for a different theme that had them. Dawn has no `snippets/collection-header.liquid`, which is exactly why the error names that file.

Two ways out. Either create the missing snippets, or inline their markup directly into the section and drop the `render` calls. For a single banner, inlining is simpler and leaves you fewer files to keep track of.

## Sections, snippets and templates

Worth pinning down, because mixing these up causes the errors above.

| | Lives in | Rendered by | Has schema | Editable in theme editor |
| --- | --- | --- | --- | --- |
| **Section** | `sections/` | JSON template, or `{% section %}` | Yes | Yes |
| **Snippet** | `snippets/` | `{% render %}` | No | No |
| **JSON template** | `templates/` | Assigned to a collection | No | Yes, as a whole page |

The practical consequences:

- Want it in the theme editor? It has to be a **section** with a `{% schema %}`.
- Want to reuse markup inside a section? That is a **snippet**.
- `{% render %}` never reaches `sections/`. That is the asset error.

## Do you even need a custom template?

Sometimes not, and it is worth checking before you build one.

**If the section should appear on every collection**, do not duplicate the template. Add the section to the default `collection.json` through the theme editor and let the `{% if %}` on the metafield decide where it shows. Collections without a value render nothing. One template, no assignment step.

**If it should appear on a handful of collections**, the custom template is right. It keeps the section out of the other templates entirely.

**If you only need static content**, you may not need code at all. Dawn's collection banner already renders the collection description as rich text. For a line of promo copy that may be all you want.

The metafield route earns its complexity when you need the content **structured** rather than freeform: a date, an image, a reference to another collection, or a value your theme styles consistently rather than trusting whoever typed the description.

## Adding more than one section

The same wiring scales. Add an entry to `sections`, add its id to `order`:

```json
{
  "sections": {
    "carousel": {
      "type": "pbb-collection-hero-carousel",
      "settings": { "color_scheme": "scheme-1" }
    },
    "banner": {
      "type": "main-collection-banner",
      "settings": { "show_collection_description": false }
    },
    "product-grid": {
      "type": "main-collection-product-grid",
      "settings": { "products_per_page": 16, "columns_desktop": 4 }
    }
  },
  "order": ["carousel", "banner", "product-grid"]
}
```

Reordering the page is reordering the `order` array. Nothing else moves.

One caution on settings: the values in each `settings` object must match the ids in that section's `{% schema %}`. Copying a settings block from a different theme brings ids that do not exist in yours, and those are ignored, with no error. If a section renders with default styling and you cannot work out why, compare its settings keys against its schema.

## If the section does not appear

Work down these in order. Each rules out the one below it.

**The collection is still on the default template.** The most common cause by a wide margin. Check **Theme template** in the collection's sidebar. Building the template does not assign it.

**The section is not in `order`.** An entry in `sections` that is never referenced in `order` does not render. No error, no warning, just nothing.

**`type` does not match the filename.** `"type": "collection-metafield-banner"` needs `sections/collection-metafield-banner.liquid`. A typo here usually does produce an error, but a plural or a swapped hyphen is easy to miss when reading your own code.

**The metafield is empty, so the `{% if %}` is correctly hiding it.** Fill in a value on the collection and reload. If it appears, everything is wired correctly and you were testing a collection with no data.

**The namespace and key do not match.** The section reads `collection.metafields.custom.promo_banner`. Shopify may have generated a different namespace when you created the definition. Open the definition and compare, character for character.

**You are previewing an unpublished theme.** Template files belong to a theme. If you edited a duplicate and are viewing the live one, you will see nothing.

A quick way to isolate this: temporarily replace the section's body with a plain `<p>hello</p>` and remove the `{% if %}`. If "hello" appears, your wiring is fine and the problem is the metafield. If it does not, the problem is the template or the assignment.

## What this looked like on Dawn

Tested end to end on a Dawn store:

- With the metafield **blank**, the section rendered nothing. No empty div, no gap.
- With a **value set**, the banner appeared between the collection banner and the product grid, in the position `order` specified.
- Switching the collection back to **Default collection** removed it, with no other changes.

The thing to hold on to: JSON templates are configuration and Liquid files are code, and Shopify's error messages will not tell you when you have mixed them up. Once your logic is in the section and your JSON is just a list, the remaining problems are almost always a missing comma or a smart quote.


---

---
title: How to Add Color Swatches in Shopify Without an App
description: Shopify's built-in swatches only work on the Color option. Here is how to build an image-swatch library with metaobjects that works on any option, tested on Horizon.
---

## The problem: swatches only work on "Color"

Shopify has native colour swatches now. You turn them on in the theme editor and your Color option renders as little circles instead of text pills.

Then you try it on a different option and nothing happens.

Pupil Style, Finish, Material, Pattern, Grip, Fabric. Any option that is not colour still renders as plain text buttons. There is no toggle for it, and no obvious reason why.

A merchant on the Horizon theme hit exactly this. They wanted uploaded images as swatches for a non-colour option, they did not want an app, and they were willing to edit code but had no idea which file.

I installed Horizon on a development store, reproduced it, and built a fix. This is that fix, plus the part the forum answer left out: **why** it only works on Color, and the one-line edit that everything else depends on.

![Image swatches rendering for a non-colour option on the product page](/images/blog/shopify-color-swatches-without-app/01-image-swatches-live-on-product-page.png)

## Why it stops at Color

This is worth understanding before you touch any code, because it tells you exactly what you have to supply yourself.

Shopify's swatches are not a theme feature. They are a **catalog** feature.

When you create an option and name it Color, Shopify maps it to a taxonomy attribute and attaches a `swatch` object to each option value. That object holds either a colour (a hex value) or an image you uploaded in the option editor.

Your theme then does roughly this:

```liquid
{%- assign swatch_count = product_option.values | map: 'swatch' | compact | size -%}
{%- if swatch_count > 0 and block_settings.show_swatches -%}
  {%- assign variant_style = 'swatch' -%}
{%- endif -%}
```

It counts how many option values have a `swatch` object. If the count is zero, it falls back to text pills.

For an option called Pupil Style, Shopify attaches no `swatch` object at all. The count is zero. You get pills, and no theme setting can change that, because the data simply is not there.

So the job is not "find the setting." The job is **supply the missing swatch data yourself**, then teach the theme to look for it.

## The approach: a metaobject as a swatch library

The cleanest way to supply that data is a metaobject.

A metaobject is a reusable, structured record. One entry per option value, each holding an image. The theme then looks up the option value's name and finds the matching entry.

The trick that makes this work with no per-product setup is **handleize**. Liquid's `handleize` filter turns `Star` into `star`, `Rain Denim` into `rain-denim`. If the metaobject entry handle matches the handleized option value, the lookup is a single line, and it works for every product automatically.

Two things to know before you start:

- This is a **library, not a per-product setting**. Add "Star" once and every product with a Star option value gets that swatch.
- It is **additive**. Native colour swatches keep working exactly as before, because the custom lookup only runs when Shopify supplied no swatch.

**Duplicate your theme before editing.** Online Store > Themes > ... > Duplicate. That copy is your rollback, and you will want it.

## Step 1: create the metaobject definition

Go to **Settings > Custom data > Metaobjects > Add definition**.

Name it **Variant Swatch**. Confirm the type reads `variant_swatch`, because that string is what the Liquid code references.

![The Variant Swatch metaobject definition with Value and Swatch image fields](/images/blog/shopify-color-swatches-without-app/02-variant-swatch-metaobject-definition.png)

Add two fields:

| Field name | Type |
| --- | --- |
| Value | Single line text |
| Swatch image | Image (File) |

Save it.

The **Value** field is there for your own readability. The lookup uses the entry's handle, not this field, which is a detail that matters in step 2.

## Step 2: add one entry per option value

Open the definition and click **Add entry**. Create one entry for each option value you want a swatch for.

![Three metaobject entries, one per option value, each with a swatch image](/images/blog/shopify-color-swatches-without-app/03-metaobject-entries-one-per-option-value.png)

For each entry:

- Set the display name to the **exact option value**, spelled the same way as in the product. `Star`, `Slit`, `Round`.
- Upload the image into **Swatch image**.

The names must match. `Star` and `Stars` are different handles and the lookup will fall through to a text pill.

Keep the images small and square. 64x64 or 80x80 is plenty. The Liquid requests them at `width: 80`, so anything larger is bytes you pay for and shoppers never see.

## Step 3: edit snippets/swatch.liquid

This snippet renders one swatch. Right now it only knows about Shopify's own swatch data. We add the metaobject lookup ahead of it.

Open `snippets/swatch.liquid`. Find the `{% liquid %}` block near the top, which starts:

```liquid
{% liquid
  assign swatch_value = null
  assign extra_classes = ''
```

Add the lookup directly after `assign extra_classes = ''`:

```liquid
  assign _mo_swatch_image = null
  if label != blank and swatch.image == blank and swatch.color == blank
    assign _swatch_handle = label | handleize
    assign _mo_swatch = metaobjects.variant_swatch[_swatch_handle]
    if _mo_swatch != blank
      assign _mo_swatch_image = _mo_swatch.swatch_image.value
    endif
  endif
```

Then change the chain that follows so the metaobject image is checked **first**. The original starts `if settings.show_variant_image and variant_image`. It becomes:

```liquid
  if _mo_swatch_image != blank
    assign _mo_url = _mo_swatch_image | image_url: width: 80
    assign swatch_value = 'url(' | append: _mo_url | append: ')'
  elsif settings.show_variant_image and variant_image
```

Leave the rest of the chain untouched.

![The metaobject lookup added to swatch.liquid](/images/blog/shopify-color-swatches-without-app/04-swatch-liquid-metaobject-lookup.png)

Read the condition on line two again, because it is doing real work:

```liquid
if label != blank and swatch.image == blank and swatch.color == blank
```

That is what keeps this additive. The custom lookup only runs when Shopify gave us **nothing**. Your real Color swatches never touch this code path.

## Step 4: edit snippets/variant-main-picker.liquid

Two edits here. The first one is what actually switches the option from pills to swatches. The second is the one that is easy to miss and breaks everything if you skip it.

### 4a: count the metaobject swatches

Find the `swatch_count` line inside the option loop:

```liquid
{%- for product_option in product_resource.options_with_values -%}
  {%- liquid
    assign swatch_count = product_option.values | map: 'swatch' | compact | size
```

Add straight after it:

```liquid
    if swatch_count == 0
      for _v in product_option.values
        assign _vh = _v.name | handleize
        if metaobjects.variant_swatch[_vh] != blank
          assign swatch_count = swatch_count | plus: 1
        endif
      endfor
    endif
```

![The swatch count extended to include metaobject matches](/images/blog/shopify-color-swatches-without-app/05-variant-main-picker-swatch-count.png)

Now the count is non-zero for Pupil Style, so a few lines further down the theme's own logic flips `variant_style` to `'swatch'` and the option renders as swatches.

Note the `if swatch_count == 0` guard. The loop only runs for options Shopify did not already handle, so this costs nothing on your colour options.

### 4b: pass the label into the swatch

This is the edit everything else depends on, and it is one line.

`swatch.liquid` looks up the metaobject using `label`. But Horizon's render call does not pass a label. So `label` is blank, the condition in step 3 fails, and **nothing happens**. You will have done all the work and still be looking at text pills.

Find the render call, around line 154:

```liquid
{% render 'swatch',
  swatch: product_option_value.swatch,
  variant_image: featured_media,
  mode: 'unscaled'
%}
```

Add the `label` line:

```liquid
{% render 'swatch',
  swatch: product_option_value.swatch,
  variant_image: featured_media,
  label: product_option_value.name,
  mode: 'unscaled'
%}
```

![The label argument added to the swatch render call](/images/blog/shopify-color-swatches-without-app/06-variant-main-picker-render-label.png)

It is also an accessibility win independent of swatches. `swatch.liquid` renders `label` into a `visually-hidden` span, so screen readers announce "Star" instead of an unlabelled circle. Horizon leaves that empty by default on this path.

## Step 5: turn the toggle on

The code is inert until the theme setting is on.

1. **Customize** the theme.
2. Open a **Product** page.
3. Click the **Variant picker** block.
4. Turn **Swatches** ON, and **Save**.

Your non-colour option now renders as image swatches.

## If it is still showing text pills

In order of how often each one is the actual cause:

**The label edit in 4b is missing.** By far the most common. Without it `label` is blank and the lookup never runs. Check it first.

**The names do not match.** The entry handle must equal the handleized option value. Open the metaobject entry and check its URL: the last path segment is the handle. Compare it to `Star` handleized, which is `star`. Spaces become hyphens, capitals disappear, and a trailing space in the option value will break with nothing to flag it the match.

**The Swatches toggle is off.** The theme editor setting in step 5.

**You edited a different theme.** The deep links in the original thread carry a theme ID, and theme IDs are unique per store. If you pasted someone else's link you edited nothing on your own store. Get yours from Online Store > Themes > ... > Edit code and read the number out of the URL.

**Shopify already supplies a swatch for that option.** If the option is Color with values Shopify recognises, the guard in step 3 deliberately skips the metaobject. That is correct behaviour, not a bug.

## Doing this on Dawn instead of Horizon

The mechanism is identical. The file names are not.

Dawn keeps the same job in `snippets/product-variant-options.liquid`, with the swatch markup in `snippets/swatch.liquid`. Dawn's swatch snippet also takes the option value, so the equivalent of the 4b edit may already be there.

Two things carry over unchanged to any Online Store 2.0 theme:

- The metaobject definition and entries. Those are catalog data, not theme code, so they survive theme switches and theme updates.
- The `metaobjects.variant_swatch[handle]` lookup. That is standard Liquid.

What changes is which file holds the option loop, and whether the render call already passes a label. Search your theme for `swatch_count` and you will land in the right place.

## When you should just use an app

This is free, it survives theme updates as long as the two snippets do not get rewritten, and it adds no scripts to your storefront. For a fixed set of option values it is genuinely the better answer.

Use an app instead when:

- You want swatches **per product** rather than a shared library. The metaobject approach is deliberately global.
- You want swatches on **collection cards and filters**, not just the product page. That is more files, and filter swatches come from a different data path.
- Your option values are **not stable**. If merchandisers invent new values regularly, someone has to remember to add a metaobject entry each time, and they will not.
- Your team is not comfortable editing Liquid. Two files is not a lot, but it is not nothing, and a theme update that rewrites them is your problem.

Swatch King and similar apps handle all of that. The trade is a monthly cost and another script on the product page.

## What this actually changed

On the test store, one option went from three text buttons to three image swatches, with no app installed and no per-product configuration.

The pieces:

- **One metaobject definition** holding a reusable swatch library.
- **One entry per option value**, matched by handle.
- **Two snippet edits**, both additive, both guarded so native colour swatches are untouched.

The part worth remembering, if you remember one thing: swatches are missing because the **data** is missing, not because a setting is off. Once you supply the data and pass the label through, the theme's own logic does the rest.


---

---
title: "Shopify Combined Listings App: Link Separate Products as Swatches"
description: Shopify's Combined Listings app is Plus only. Here is how to link separate products as colour swatches on any plan with one collection and a Custom Liquid block, tested on Horizon.
---

## The problem

You sell one T-shirt in three colours. Each colour is its own product, with its own sizes, photos and stock.

On the product page, a shopper sees one colour and has no way to see the others. They have to go back to the collection and hunt for the next colour.

A merchant asked exactly this on the Shopify Community. They had **Lifestyle Tee - Gray**, **Lifestyle Tee - Brown** and **Lifestyle Tee - Black**, each with 18 size variants. They wanted the three products shown as colour swatches, so a click on Brown opens the Brown product.

The one reply they got explained how to set up swatch colours for a Color option on a single product. That is a different job. It does not link three separate products together.

I rebuilt their setup on a Shopify test store running the Horizon theme and linked the three products with one collection and one short block of code. No app, and no Plus plan.

## What "combined listings" means

Shopify calls this feature **combined listings**. Several separate products (the "children") are shown on the storefront as if they were one product with a colour choice. Each child keeps its own page, title, photos, description and stock.

That is the difference from variants. A **variant** is one version of a single product, such as a size. Variants share one page and one description. Separate products do not.

Merchants keep colours as separate products for good reasons:

- Each colour gets its own web address, which can rank on its own in Google.
- Each colour can have its own description and photo set.
- Each colour shows up as its own card in collections and search.

## Shopify's Combined Listings app is Plus only

Shopify has its own **Combined Listings** app. It groups child products under a parent, and the theme shows them as one listing with a colour option.

The catch is the plan. Shopify's developer documentation says it plainly: "Combined listings are available only to stores on a Shopify Plus plan." Plus starts at about \$2,300 a month, so for most stores the native app is out of reach.

That leaves three routes:

1. **Merge the products into one** with a Color option. Native swatches work, but you lose the separate pages.
2. **Link the separate products with a little code.** Free, on any plan. This is what I built below.
3. **Use a third-party combined listings app.** The App Store has dozens.

## How the free version works

Two pieces do all the work.

- **A collection groups the colours.** A collection is a list of products you can reuse anywhere on your store. You make one whose name starts with "Swatch -" and put the three colours in it.
- **A Custom Liquid block draws the swatches.** Liquid is the code Shopify themes are written in, and a Custom Liquid block is a box in the theme editor where you paste it.

On every product page, the code checks whether the product belongs to a collection whose web address starts with "swatch-". If it does, it shows one round swatch for each product in that collection, using each product's main photo, and links each swatch to its product. The current colour gets an outline.

The colour name comes from the product title. The code takes the part after the last " - ", so "Lifestyle Tee - Brown" shows as **Brown**. Keep that naming pattern for every colour.

Products that are not in a "Swatch -" collection show nothing, so the block is safe to leave on your product template for every product.

## Before and after

On my test store the Gray product page had a Size picker and nothing else. There was no way to reach Brown or Black from it.

![Before: Horizon product page for Lifestyle Tee - Gray with only a size picker](/images/blog/shopify-combined-listings-app/01-before-no-colour-choice.png)

After the steps below, the same page shows "Color: Gray" with three round swatches above the sizes. Gray is outlined as the current colour.

![After: three colour swatches above the size picker, each linking to its own product](/images/blog/shopify-combined-listings-app/02-after-linked-colour-swatches.png)

I checked the real storefront, not only the editor preview. The Gray, Brown and Black pages each showed three swatches with the right one marked as current, and a T-shirt outside the collection showed none.

## Step 1: Make the swatch collection

Go to **Products > Collections** and click **Add collection**.

![Products > Collections with Add collection highlighted](/images/blog/shopify-combined-listings-app/03-collections-add-collection.png)

Name it **Swatch - Lifestyle Tee**. Shopify turns the name into the web address, so this collection's address becomes "swatch-lifestyle-tee". The code looks for the "swatch-" at the start.

![New collection with the title Swatch - Lifestyle Tee](/images/blog/shopify-combined-listings-app/04-name-swatch-collection.png)

Click **Save**.

![Save button on the new collection](/images/blog/shopify-combined-listings-app/05-save-collection.png)

## Step 2: Add the colour products

Click **Add products**. This makes it a manual collection, where you pick products by hand.

![Add products button on the collection](/images/blog/shopify-combined-listings-app/06-add-products.png)

Search for **Lifestyle Tee** and tick your three colours.

![Product picker with the three Lifestyle Tee colours ticked](/images/blog/shopify-combined-listings-app/07-tick-colour-products.png)

Click **Add**, then **Save** the collection.

![Add button in the product picker](/images/blog/shopify-combined-listings-app/08-add-products-confirm.png)

The swatches appear in the order the products sit in this collection. Change the collection's sort order if you want Black first.

## Step 3: Open the product page in the theme editor

Go to **Online Store > Themes**, click **Customize**, then switch the page selector at the top to a product page.

![Theme editor on a product page with Product information in the sidebar](/images/blog/shopify-combined-listings-app/09-theme-editor-product-page.png)

In the left sidebar you will see **Product information**. On Horizon it holds the title, price, Variant picker and Buy buttons.

## Step 4: Add a Custom Liquid block

Hover just under **Divider** in the Product information list. A blue line with a **+** appears. Click the **+**.

![Blue plus insertion line under Divider in the Horizon theme editor](/images/blog/shopify-combined-listings-app/10-add-block-under-divider.png)

Search **Custom liquid** and pick it.

![Block picker with Custom Liquid highlighted](/images/blog/shopify-combined-listings-app/11-custom-liquid-block.png)

Placing it above the Variant picker puts the colours before the sizes, which is where shoppers expect them. If it lands somewhere else, drag it in the sidebar.

## Step 5: Paste the code and save

Paste this code into the **Liquid code** box:

```liquid
{%- for group in product.collections -%}
{%- if group.handle contains 'swatch-' -%}
<div class="color-links">
  <p class="color-links__label">Color: <strong>{{ product.title | split: ' - ' | last }}</strong></p>
  <div class="color-links__list">
    {%- for item in group.products -%}
    {%- assign color_name = item.title | split: ' - ' | last -%}
    <a href="{{ item.url }}" class="color-links__swatch{% if item.id == product.id %} is-current{% endif %}" title="{{ color_name }}" aria-label="{{ color_name }}"{% if item.id == product.id %} aria-current="page"{% endif %}>
      {%- if item.featured_image -%}
      <img src="{{ item.featured_image | image_url: width: 120 }}" alt="{{ color_name }}" width="44" height="44" loading="lazy">
      {%- else -%}
      <span style="background: {{ color_name | downcase }};"></span>
      {%- endif -%}
    </a>
    {%- endfor -%}
  </div>
</div>
{%- break -%}
{%- endif -%}
{%- endfor -%}
<style>
.color-links__label { margin: 0 0 8px; }
.color-links__list { display: flex; flex-wrap: wrap; gap: 10px; }
.color-links__swatch { display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(0,0,0,.2); }
.color-links__swatch img, .color-links__swatch span { display: block; width: 100%; height: 100%; object-fit: cover; }
.color-links__swatch.is-current { outline: 2px solid currentColor; outline-offset: 2px; }
</style>
```

![Custom Liquid block with the swatch code pasted into the Liquid code box](/images/blog/shopify-combined-listings-app/12-paste-swatch-code.png)

Click **Save** in the top right.

![Save button in the theme editor](/images/blog/shopify-combined-listings-app/13-save-theme.png)

If a product has no photo, the swatch falls back to a plain circle in the colour named in the title. That works for simple names like Black, Brown and Gray, but not for names like "Ocean Mist".

## Adding more colour groups

You do not touch the code again. For a hoodie in four colours, make a collection called **Swatch - Hoodie**, add the four hoodies, and name each one like "Hoodie - Navy". The same block picks it up.

Each product should sit in only one "Swatch -" collection. The code uses the first one it finds.

## Option 1 instead: merge the colours into one product

If you do not need separate pages for each colour, a single product with a Color option is simpler. Shopify shows native swatches for a Color option, and you manage one listing instead of three.

The merchant's numbers fit easily. Three colours times 18 variants is 54 variants, and Shopify now allows up to 2,048 variants per product.

What you give up is the separate web addresses, descriptions and collection cards for each colour. I walked through native swatches for a single product in [Shopify color swatches without an app](/blog/shopify-color-swatches-without-app).

## Option 3: a combined listings app

If you want swatches on collection cards as well, or you have hundreds of colour groups, an app saves time. The most-reviewed ones that link separate products are:

- Color Swatch King: Variants
- GLO Color Swatch Variant Image
- SA Variants: Combined Listings

Most of them have a free plan with limits. Check that the app supports your theme before you install it. One low review for a swatch app in the App Store says only "Does not work with craft theme."

## What the code does not do

- **It does not add swatches to collection pages.** It only runs on the product page. For colour dots on collection cards, see [Shopify show variants as separate products](/blog/shopify-show-variants-as-separate-products).
- **It does not keep the selected size.** A shopper who picked Large on Gray starts again on Brown.
- **It does not change your stock or orders.** Each colour stays its own product, so reports and inventory work as before.

## If the swatches do not show

- **Is the collection name right?** Its web address must contain "swatch-". Open the collection and check the search engine listing at the bottom.
- **Is the product in the collection?** Open the collection and check it lists all colours.
- **Did you save both places?** The collection and the theme editor each have their own Save.
- **Are you looking at the right theme?** The block only exists on the theme you edited.
- **Does the title use " - "?** "Lifestyle Tee Gray" without the dash shows the whole title as the colour name.

## Summary

- Shopify's Combined Listings app only works on Plus.
- On any plan, put the colours in a collection named "Swatch - ..." and paste the code into a Custom Liquid block on the product page.
- Name products "Name - Colour" so the swatch labels read correctly.
- Merge into one product instead if you do not need a separate page per colour.

This article started as an answer on the [Shopify Community](https://community.shopify.com/t/how-to-use-a-product-in-a-swatch-option/688245).


---

---
title: Shopify Coming Soon Page: Add a Get Early Access Button
description: Turn the Shopify coming soon page into an early access sign-up with a real "Get early access" button, then email the list your store password before launch. Tested on the Flow theme, with a no-code option.
---

## The problem

A merchant launching a drinks brand on Shopify wanted a pre-launch list. Their store was still behind the password page, and they wanted a clear **Get early access** button on it so visitors could register before the launch.

The plan was simple. Collect emails now. Three days before launch, email that list the store password so they can shop early and enter a competition.

Their theme is **Flow**. Flow's password page already has an email box, but the button next to it is a small arrow with no words. They could rename the heading and the text above the box, but not the button itself, and a bare arrow did not look like an invitation.

I reproduced this on a test store running Flow and built both a code fix and a no-code fix. This guide walks through both, then shows how to find the people who signed up and send them the password.

![The Flow password page before: an email box with a bare arrow button](/images/blog/shopify-coming-soon-page-early-access/01-flow-password-page-arrow-button-before.png)

![The Flow password page after: the same email box with a black Get early access button](/images/blog/shopify-coming-soon-page-early-access/02-flow-password-page-get-early-access-after.png)

## What a Shopify coming soon page actually is

Shopify does not have a separate "coming soon" feature. The coming soon page is the **password page**, the screen visitors see while your store is locked.

You switch it on in **Online Store > Preferences** under password protection. While it is on, every visitor lands on that page. They can leave an email, or type the store password if you have given it to them.

Because the coming soon page is part of your theme, how it looks depends on the theme. Flow shows a centred white card with your store name, a heading, a line of text, an email box and your social icons.

Two things follow from that:

- **Everything on the card is edited in the theme editor**, the screen where you change your store's layout without code.
- **The sign-up box is a normal newsletter form.** Every email it collects becomes a customer in your admin, marked as subscribed to email marketing.

## Why the button has no text

On Flow, the password page's sign-up form uses an icon button. It shows an arrow, and the theme editor has no field for button text.

I checked the obvious places first:

- The **Password page** section has settings for the logo, heading, description, background and colours, but not the button.
- Flow's separate **Newsletter** section, which you can add to the password page, also uses an arrow-only button.

So the words have to be added another way. There are two routes, and which one fits depends on whether you are happy to paste a short piece of code.

## Add a Get early access button (no app)

This route keeps Flow's own sign-up box and turns the arrow into a black button that says **Get early access**. It takes about five minutes.

You will use a **Custom Liquid** section. That is a box in the theme editor where you paste code, and whatever you paste runs on that page.

1. Go to **Online Store**.
2. Click **Edit theme** on your current theme.

![Online Store in the admin menu, and the Edit theme button on the current theme](/images/blog/shopify-coming-soon-page-early-access/03-online-store-edit-theme.png)

3. Open the page menu at the top of the editor and pick **Password**.

![The theme editor page menu open, with Password at the bottom of the list](/images/blog/shopify-coming-soon-page-early-access/04-theme-editor-pick-password-page.png)

4. Click **Password page**, then change the **Description** text. I used "Get early access before we launch." This is the line that sits above the email box.

![The Password page section settings with the Description field changed to Get early access before we launch](/images/blog/shopify-coming-soon-page-early-access/05-password-page-description-text.png)

5. Click **Add section** and choose **Custom Liquid**.

![The Add section menu on the password page, with Custom Liquid highlighted](/images/blog/shopify-coming-soon-page-early-access/06-add-section-custom-liquid.png)

6. Delete what is in the **Liquid** box and paste this code:

```html
<style id="early-access">
  #newsletter_password_form .input-group,
  #newsletter_password_form .input-group-btn { display: flex; }
  #newsletter_password_form button {
    width: auto !important;
    height: auto !important;
    padding: 0 24px;
    background: #000;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
  }
  #newsletter_password_form button svg { display: none; }
  #newsletter_password_form button::after { content: "Get early access"; }
  .shopify-section:has(#early-access) { display: none; }
</style>
```

![The Custom Liquid section with the code pasted into the Liquid box, and the preview showing the new button](/images/blog/shopify-coming-soon-page-early-access/07-paste-code-into-custom-liquid.png)

7. Click **Save**.

![The Save button in the top right corner of the theme editor](/images/blog/shopify-coming-soon-page-early-access/08-save-the-theme.png)

The preview updates as soon as you paste. After saving, I reloaded the editor to make sure the change stuck, and the button still read Get early access.

### What the code changes

You do not need to understand the code to use it, but in plain words it does four things:

- It hides the arrow.
- It writes the words **Get early access** on the button.
- It makes the button black with white text and wide enough for the words.
- It hides the empty Custom Liquid section itself. Flow gives that section a heading and padding by default, and without this line a blank strip would appear under your card.

To change the wording, edit the text between the quote marks on the line with `content`. To change the colour, edit `#000` (the button) and `#fff` (the text).

### Why not the Custom CSS box?

Every section in the theme editor has a **Custom CSS** box at the bottom, and it looks like the natural place for this. It will not work here.

Shopify's Custom CSS box refuses the one line that puts words on the button. When I pasted it there, the editor showed **"Invalid property value: content"**, and the button text was dropped when the theme was saved. The same rule applies on other themes too. A Custom Liquid section accepts the code without complaint, which is why this guide uses one.

## Find the people who signed up

Every email the password page collects is saved as a customer with the tags **prospect** and **password page**. A tag is a label on a customer that you can search by.

To email this group later, save them as a **segment**. A segment is a saved search of your customer list that keeps itself up to date, so people who sign up tomorrow are added to it without you doing anything.

1. Go to **Customers > Segments > Create segment**.
2. Paste `customer_tags CONTAINS 'password page'` into the editor.
3. Save it with a clear name, such as "Early access".

![The Early access segment in the Shopify admin, filtering customers who have the password page tag](/images/blog/shopify-coming-soon-page-early-access/09-customer-segment-password-page-tag.png)

On my test store, a customer with the password page tag showed up in the segment within a couple of minutes, marked **Subscribed**.

## Send the password 3 days before launch

When you are ready to let the list in early:

1. Open the **Early access** segment.
2. Click **Use segment** and pick your email app.
3. Write the email with the store password, the date the store opens to the public and any competition details.

![The Use segment menu on the Early access segment, with the email app option](/images/blog/shopify-coming-soon-page-early-access/10-use-segment-send-email.png)

You can see or change the store password in **Online Store > Preferences**, under password protection. Anyone with the password can get in, so if it gets shared widely, change it there.

Keep the password page switched on until launch day. The people you emailed can shop early, and visitors who were not on the list keep seeing the sign-up form. On launch day, switch password protection off and the store opens to the public.

## No code: use the free Shopify Forms app

If you would rather not paste code, the free **Shopify Forms** app gives you a sign-up form with any button text you like. It adds its own form to the password page as an **app block**, which is a piece an installed app adds to your theme.

1. Install **Shopify Forms** from the Shopify App Store. Click **Create form**, choose **Inline form**, give it a name and click **Create**.

![The Shopify Forms Create form window, with Inline form selected and the name Early access](/images/blog/shopify-coming-soon-page-early-access/11-shopify-forms-create-inline-form.png)

2. Set the **Button label** to "Get early access". The preview on the right shows the button as you type.

![The Shopify Forms editor with the Button label set to Get early access](/images/blog/shopify-coming-soon-page-early-access/12-shopify-forms-button-label.png)

3. Add the tag **early access**, click **Save**, then click **Turn form on**. An inline form only shows on your store once it is turned on.

![The Tags field in Shopify Forms with early access added, and the Turn form on button](/images/blog/shopify-coming-soon-page-early-access/13-shopify-forms-tag-and-turn-on.png)

4. In the theme editor, open the **Password** page, click **Add section**, switch to **Apps** and choose **Forms**.

![The Add section menu on the password page, on the Apps tab, with Forms highlighted](/images/blog/shopify-coming-soon-page-early-access/14-theme-editor-apps-forms-section.png)

5. Paste the **Form ID** from the Forms app into the section and click **Save**.

![The Forms section settings with the Form ID pasted in](/images/blog/shopify-coming-soon-page-early-access/15-forms-section-form-id.png)

6. Click **Password page** and turn off **Show newsletter signup**, so visitors see one form instead of two.

Two differences from the code route:

- **The form sits under Flow's card**, not inside it. On Flow the password card fills the screen, so visitors scroll down to reach it. On a dark background, change the form's **Text** colour to white in the section settings so the heading stays readable.
- **The tag is different.** Use `customer_tags CONTAINS 'early access'` for the segment instead.

The Forms route also asks for a first name and offers a **Continue with Shop** button, which lets shoppers with a Shop account sign up in one click.

## Coming soon page, password page and coming soon product

These three get mixed up, and they solve different problems.

- **Coming soon page** is the password page, shown to every visitor while the whole store is locked. This guide is about that one.
- **Password page schedule** is about unlocking the store at a set time. Shopify cannot do that on its own, which I covered in [Shopify Password Page: Schedule It for Early Access](/blog/shopify-password-page-schedule).
- **Coming soon product** is a single product on a live store that shows a badge and cannot be bought yet. That is covered in [Shopify Coming Soon Product: Add a Badge Without an App](/blog/shopify-coming-soon-product).

If your store is already open and you only want early access to one new product, the coming soon product guide is the one to follow.

## Will this work on my theme?

I tested the code on Flow. It targets Flow's password page form by its name in the page, so on a different theme the button will not change, and nothing else breaks either.

The steps themselves are the same on most current themes: pick **Password** in the theme editor, add a **Custom Liquid** section, paste, save. What differs is the form's name inside the code. If your theme's button does not change, the Shopify Forms route is the safer choice, because it brings its own form.

## If the button did not change

Work through these in order:

- **You pasted into the Custom CSS box.** Move the code into a Custom Liquid section. The Custom CSS box rejects the line that writes the button text.
- **You edited the wrong page.** The page menu at the top of the editor must say **Password**, not Home page.
- **You did not click Save.** The preview shows unsaved changes, but visitors only see them after saving.
- **Show newsletter signup is off.** With it off, Flow hides its own form, and there is no button to change.
- **You are on a trial theme.** A theme you are trying from the Theme Store before buying will not keep some code changes. The Custom Liquid section saved on my Flow trial, but the Custom CSS box did not.


---

---
title: "Shopify Coming Soon Product: Add a Badge Without an App"
description: "Show a Coming soon badge on a Shopify product and stop it being bought, using one tag and no app. Tested on the Spotlight theme."
date: "2026-08-14"
---

## Add a coming soon badge to a Shopify product

A merchant asked this on the Shopify Community. They wanted to tease products before launch.

The idea is simple. Tag a product as coming soon in the admin. Then, when shoppers browse the store, that product shows a "Coming soon" label on its image. People can see it and get excited, but they cannot buy it yet.

Right now they were faking it. They marked those products as **Sold out** so they could not be added to the cart. It works, but it is not right. A sold-out label tells shoppers the product existed and ran out. A coming-soon product is the opposite. It has not launched yet.

I set this up on a test store running the free **Spotlight** theme. It takes three small changes and no app. Below is the full walkthrough, written for someone who has never touched theme code before.

## Why marking it sold out is the wrong fix

Marking a product Sold out does two useful things at once. It disables the buy button, and it prints a "Sold out" badge. That is why so many stores reach for it.

But it sends the wrong message. "Sold out" means demand was high and stock is gone. It can even make a shopper feel they missed out. For a product that has not dropped yet, that is confusing.

It also fights your own inventory. To keep the item "sold out" you have to hold its stock at zero. The day you launch, you have to remember to switch it back on. Miss that, and your launch product looks unavailable on day one.

A coming-soon tag avoids all of that. The product stays in stock. Its real inventory is whatever you set. The tag alone controls the label and blocks the sale, and you remove the tag to go live.

## The plan: one tag drives everything

Here is the whole approach in plain terms.

- You add a product tag called `coming-soon`.
- The theme checks each product for that tag.
- If the tag is there, the theme shows a "Coming soon" badge on the image and turns off the buy button.
- No tag, and the product behaves normally.

A **tag** is just a label you attach to a product in the admin. It does nothing on its own. We are going to teach the theme to react to it.

You will edit two theme files. Do not worry, every change is copy and paste, and I show you the exact text to find.

## Before you start: which theme do you have

I tested this on **Spotlight 16.0.0**. The same code works on Shopify's other free themes that are built on the same base: Dawn, Craft, Taste, Refresh, Sense, and others in that family. They all share the two files below.

If you run a paid theme from a different developer, the file names will be similar but the exact lines may differ. The logic is the same: find where the theme prints the "Sold out" badge and the buy button, and add a tag check next to it.

One safety habit first. Before editing code, duplicate your theme so you have a backup. Go to **Online Store > Themes**, find your theme, click the **...** button, and choose **Duplicate**. If anything goes wrong, you can fall back to the copy.

## Step 1: Tag the product coming-soon

Open the product you want to tease.

- In your Shopify admin, go to **Products** and open the product.
- Scroll to the **Tags** field on the right.
- Type `coming-soon` and press Enter.
- Click **Save**.

That is the only admin change. You do not touch inventory or status. The product can stay Active and in stock.

![Add the coming-soon tag to a Shopify product](/images/blog/shopify-coming-soon-product/01-coming-soon-tag.png)

Use the exact spelling `coming-soon`, all lowercase, with the hyphen. The code we add looks for that precise text, so `Coming Soon` or `comingsoon` will not match.

## Open the theme code editor

Both of the next steps happen in the code editor.

- Go to **Online Store > Themes**.
- Find your theme, click the **...** button, and choose **Edit code**.
- On the left is a list of folders. Open the **Snippets** folder.

You will edit two files inside Snippets: `card-product.liquid` and `buy-buttons.liquid`.

![Edit card-product.liquid and buy-buttons.liquid inside the Snippets folder](/images/blog/shopify-coming-soon-product/02-edit-theme-code-snippets.png)

## Step 2: Show the badge on the product image

The file `card-product.liquid` draws each product card, including its badge. We will add the coming-soon badge above the existing sold-out one.

- Open `snippets/card-product.liquid`.
- Press Ctrl+F (Windows) or Cmd+F (Mac) to open the search box.
- Search for this line. It appears **twice** in the file:

```liquid
{%- if card_product.available == false -%}
```

- Replace it, in both places, with this:

```liquid
{%- if card_product.tags contains 'coming-soon' -%}
  <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">Coming soon</span>
{%- elsif card_product.available == false -%}
```

Click **Save**.

What this does: before the theme decides whether to show "Sold out", it first checks for the `coming-soon` tag. If the tag is there, it prints a "Coming soon" badge in the same spot and style as the sold-out one. If not, everything falls through to the normal behavior. That is why we keep `{%- elsif card_product.available == false -%}` on the end. Nothing else changes.

## Step 3: Stop the product being bought

The badge is only half the job. A tagged product is still in stock, so its buy button still works. We fix that in `buy-buttons.liquid`.

There are three small edits here. Take them one at a time.

**Edit A: hide the Buy it now button.**

- Open `snippets/buy-buttons.liquid`.
- Near the top, find this block:

```liquid
      if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
        assign show_dynamic_checkout = true
      endif
```

- Add these three lines directly under it:

```liquid
      if product.tags contains 'coming-soon'
        assign show_dynamic_checkout = false
      endif
```

This one matters more than it looks. "Buy it now" and Shop Pay are express checkout buttons. Because your product is still in stock, Shopify keeps them active even when the main button is off. If you skip this edit, a shopper can still buy a coming-soon item through Buy it now. These three lines remove that button for tagged products.

**Edit B: disable the Add to cart button.**

- Find this line. It appears **twice** in the file:

```liquid
{% if product.selected_or_first_available_variant.available == false
```

- Replace both with these two lines:

```liquid
{% if product.tags contains 'coming-soon'
              or product.selected_or_first_available_variant.available == false
```

This adds the tag to the condition that greys out the button.

**Edit C: change the button text to "Coming soon".**

- Find this line, which appears once:

```liquid
{%- if product.selected_or_first_available_variant == null -%}
```

- Replace it with:

```liquid
{%- if product.tags contains 'coming-soon' -%}
                Coming soon
              {%- elsif product.selected_or_first_available_variant == null -%}
```

Click **Save**.

That is all the code. Three edits in this file, two in the last one.

## The result

Any product carrying the `coming-soon` tag now behaves like a proper teaser.

On collection pages, search results, and any product grid, the item shows a "Coming soon" badge on its image. It sits in the same corner your theme uses for "Sold out", so it looks native.

![Coming soon badge on a Shopify collection page](/images/blog/shopify-coming-soon-product/03-coming-soon-badge-collection.png)

On the product page, the buy button is greyed out and reads "Coming soon". The Buy it now button is gone. The product still shows its real price and stays in your catalog, so shoppers can browse it and build anticipation.

![Coming soon button on a Shopify product page](/images/blog/shopify-coming-soon-product/04-coming-soon-button-product.png)

On my test store the product had normal stock and a real price. The only thing marking it as coming soon was the tag. Remove the tag and Save, and it instantly becomes a normal, buyable product. That is your launch button.

## The no-code option: coming soon apps

Not comfortable editing theme code? A few apps do this with clicks instead.

Popular ones include **Preorder Now**, **PreProduct**, and **Coming Soon Product Page**. They let you flag products as coming soon and often add an email capture so shoppers can ask to be notified at launch.

Apps are the right call if you also want a waitlist, launch-date countdown, or automatic switch-over. The tag method above is best when you just want a clean badge and a blocked buy button with no monthly fee. Both are valid. Pick the one that matches how much you need.

If your main goal is to collect interest before launch, pair either method with a back-in-stock or notify-me tool. We covered that here: [set up back in stock notifications on Shopify](/blog/shopify-back-in-stock-notification).

## Coming soon page vs coming soon product

This trips people up, so it is worth being clear.

"Coming soon" on Shopify can mean two very different things.

A **coming soon page** is a whole-store holding page. It is the password screen Shopify shows before you launch your store, so visitors see a single "opening soon" message instead of your shop. That is set under your online store password settings and it hides everything.

A **coming soon product** is one item inside a store that is already open and selling. The rest of the shop works normally. Only the tagged product shows the badge and blocks the sale. That is what this guide builds.

If you actually want to hide your entire store until launch, you do not need any of the code above. Turn on the store password in your admin instead. If you want individual teaser products in a live store, the tag method is what you are after.

## Coming soon vs sold out vs pre-order

Three labels, three different meanings. Mixing them up frustrates shoppers.

- **Coming soon**: the product has not launched. It cannot be bought yet. Use it to build hype before a drop.
- **Sold out**: the product launched and its stock ran out. It could return or it could be gone for good.
- **Pre-order**: the product can be bought right now, but it ships later. Money changes hands today.

The method in this guide is for the first one. If you want customers to actually pay now and receive later, that is a pre-order, and it is a different setup. We wrote that up here: [run a Shopify pre-order without an app](/blog/shopify-pre-order-without-app).

## If it did not work

A few things to check if the badge or button is not behaving.

**The badge does not show.** Check the tag spelling on the product. It must be exactly `coming-soon`, lowercase, hyphenated. Then confirm you saved `card-product.liquid` and that you replaced the line in both places, not just one.

**Buy it now still appears.** You missed Edit A, or you added it in the wrong file. The `show_dynamic_checkout` block lives in `buy-buttons.liquid`, near the top. Make sure the three lines sit right after the block that sets it to `true`.

**A quick-add or plus button still adds the item.** Some themes show a small add button on collection cards. If yours does and it still works, the same idea applies: find where that card button checks availability and add the tag check beside it. Most stores leave quick-add off, so this rarely comes up.

**The button greyed out but still says Sold out.** You missed Edit C, the text change. Re-open `buy-buttons.liquid` and add the "Coming soon" branch to the label.

**Nothing changed at all.** Confirm you are editing your live theme, not the duplicate backup. Themes are easy to mix up in the code editor.

## Take the tag off when it launches

The best part of the tag method is the launch itself.

When the product is ready to sell, open it in the admin, remove the `coming-soon` tag, and Save. The badge disappears, the buy button comes back, and Buy it now returns. No theme edits, no inventory juggling, no re-publishing.

One tag in, one tag out. That is a launch you can run in five seconds from your phone.


---

---
title: "Shopify Compare at Price Not Showing? Check the Data First"
description: The crossed-out price is missing on most stores because the compare-at value was never saved, not because the theme is broken. Here is how to check in one request, and how to fill it in for every variant at once.
---

## The problem

A merchant posted on the Shopify Community that the compare-at price on their store was not showing. They had already done a lot of work on it.

They had confirmed the Liquid in `main-product.liquid` was correct. They had confirmed the `.old-price` CSS rule existed in the stylesheet. They had been told the compare-at price was set to 420 euros on every variant. Their theme was Xclusive 3.2.0, a custom theme uploaded manually rather than installed from the Theme Store.

Three people replied, and all three sent them further into the theme code: check the price snippet, check whether the product template uses a different component, inspect the element to see whether CSS is hiding it.

All reasonable advice. All aimed at the wrong layer.

I checked their live store before suggesting anything, and the compare-at price was not there to display. The data was missing.

## Check the data first, it takes one request

Every Shopify product has a public JSON endpoint. Add `.js` to any product URL and you get the raw product data the storefront is working with:

```
https://yourstore.com/products/your-product-handle.js
```

On their store, that returned:

```json
"compare_at_price": null,
"compare_at_price_min": 0,
"compare_at_price_max": 0
```

`null`. Not a rendering problem, not a CSS problem, not a theme problem. There was no compare-at price saved on any variant of any product.

Do this check before you touch a single theme file. If `compare_at_price` is `null`, no amount of Liquid will make a crossed-out price appear, because there is nothing to cross out.

You can check every product at once:

```bash
curl -s https://yourstore.com/products.json?limit=250 \
  | grep -o '"compare_at_price":[^,]*' | sort | uniq -c
```

That prints a count of how many variants have a value and how many are `null`. If the `null` count is everything, stop reading the theme and go fill in the data.

Here is the same product before and after, on my test store. Nothing changed except the price data.

![Before and after: only the price data changed](/images/blog/shopify-compare-at-price/01-before-after-price-data-only.jpeg)

## What compare-at price actually is

Compare-at price is the "was" number. It is the higher, crossed-out price shown next to the current selling price to signal a discount.

Two rules govern whether it renders, and both catch people out.

**It lives on the variant, not the product.** This is the big one. If your product has sizes 36 through 46, that is eleven variants, and each one carries its own compare-at price field. Filling in the first variant does nothing for the other ten. A product page will show the crossed-out price for size 38 and not for size 39, which looks like a random theme bug and is not.

**It must be higher than the selling price.** If compare-at equals the price, or is lower, every well-built theme renders nothing at all. This is deliberate: a strikethrough showing the same number is noise, and a strikethrough showing a lower number is a lie. So setting compare-at to 420 and the price to 420 produces exactly the symptom in this thread, an invisible compare-at price on a product that definitely has one saved.

Worth knowing: the second rule means a `compare_at_price` that is present but not greater than `price` is functionally the same as `null`. When you run the check above, look at the values, not just whether they exist.

## The fix: fill it in for every variant at once

Doing this one variant at a time is what makes people give up and go looking for a theme bug instead. Use the bulk editor.

### Step 1: select the products and open Bulk edit

Go to **Products** in your admin. Tick the products you want to price, then click **Bulk edit** in the bar that appears.

![Select the products, then Bulk edit](/images/blog/shopify-compare-at-price/02-select-the-products-then-bulk-edit.png)

The bulk editor opens as a spreadsheet, one row per variant. That row-per-variant behaviour is exactly what you want here, because it is the reason the manual approach is so slow.

### Step 2: add the Compare at price column

The column is not shown by default. Click **Columns**, search for "compare", and tick **Compare at price**.

![Columns, search compare, tick Compare-at price](/images/blog/shopify-compare-at-price/03-add-compare-at-price-column.png)

While you are in there, it is worth adding the **Price** column too if it is not showing, so you can see both numbers side by side and confirm compare-at is the higher one.

### Step 3: type the old price and save

Fill in the Compare at price column, then **Save**.

![Type the old price in the Compare-at price column, then Save](/images/blog/shopify-compare-at-price/04-type-the-old-price-then-save.png)

You can type a value in the first cell and paste it down the column, the same as any spreadsheet. Every variant of every selected product gets its value in one pass.

Reload the storefront. The crossed-out price appears, and so does whatever sale badge your theme draws from the same data.

## Doing it at scale, or on a schedule

The bulk editor is right for a few hundred variants. Past that, or if you want this to be repeatable, there are two better routes.

**CSV export and import.** Go to Products, **Export**, and open the CSV. The column is `Variant Compare At Price`. Fill it in, import the file back. This is the fastest route for thousands of variants and it gives you a record of what you changed.

**A percentage markup with a formula.** If your "was" price is a consistent markup on your current price, do it in the spreadsheet. Export, set `Variant Compare At Price` to `= Variant Price * 1.3` for a 30 percent apparent discount, then import. Ten seconds for the whole catalog.

One caution on the second one. A compare-at price is a claim about what the item previously sold for, and in several markets, including the UK, EU and much of the US, inventing that number is a regulated pricing practice. Use a price you actually charged.

## Why theme edits were the wrong instinct here

The replies in that thread were not careless. They followed a reasonable chain: the merchant says the data is set, the data is not showing, therefore the display layer is at fault.

The weak link is "the merchant says the data is set". On a custom theme, with a store built by an agency, with prices that were configured by someone else, that is exactly the assumption worth testing first. It cost one HTTP request to test and it turned out to be false.

The general form of this is worth keeping: **when something is not displaying, confirm the value exists before you go looking at how it is rendered.** Shopify makes that cheap, because `.js` on any product URL and `/products.json` on any store are both public and need no authentication.

That also means you can run this check on a store you do not own, which is how I checked theirs before answering.

## Common questions

**Compare-at price shows on the product page but not on collection pages.**

Different template, different snippet. Most themes render the price through a shared `price.liquid` snippet, but some have a separate card price component. If the data is present and one surface shows it, that surface is now your reference: find what it calls and check the other one calls the same thing.

**The strikethrough shows on the first variant only.**

Classic symptom of compare-at being filled in on variant one and nowhere else. Open the bulk editor and look down the column. It is also worth checking that your theme's variant-switching JavaScript updates both prices rather than only the current price, but check the data first.

**Compare-at is set and higher, and still nothing renders.**

Now it is worth looking at the theme, and now you have ruled out the common cause. Inspect the element on the price area. If the markup for the old price is in the DOM but invisible, it is CSS. If the markup is not in the DOM at all, the price snippet your template actually uses does not have the compare-at logic in it.

**Does compare-at price affect anything besides the strikethrough?**

Yes, and this is worth knowing. Sale badges, "on sale" collection filters, and the sale sorting option all key off compare-at being higher than price. Filling it in switches on several theme features at once, which is often a pleasant surprise.

**Can I set compare-at without putting the product on sale?**

No, and that is the point of the field. If compare-at is higher than the price, Shopify considers the variant on sale, and any theme feature that keys off that will treat it as such.

## If it did not work

Run the JSON check again after saving. If `compare_at_price` is still `null`, the save did not land, usually because the bulk editor had a validation error on another column that blocked the whole save.

If the value is there and higher than the price and still nothing shows, share your theme's price snippet. At that point it genuinely is a theme problem, and you have eliminated the cause that accounts for most of these threads.

## Tested on

I reproduced this on a Shopify dev store: set a compare-at price through the bulk editor across multiple variants, confirmed it rendered, then cleared it and confirmed the strikethrough disappeared while the theme code stayed untouched. The store in the original thread was checked read-only through its public product JSON.


---

---
title: Shopify Dependent (Conditional) Product Options
description: Show or hide product options based on an earlier choice in Shopify - what is possible natively, and when you need an app or custom code.
---

## The problem

A merchant asked about this on the Shopify Community. They run an industrial and automotive paint shop, online and in a physical store.

They wanted one product per colour. Then the options on the page should adapt as the buyer chooses.

Pick a colour like RAL7016. Then pick Touch Up, Aerosol, or Liquid Paint. From there the next questions should change:

- Touch Up should ask only for a finish (Gloss, Satin, Matt).
- Aerosol should ask for the aerosol type, then a finish only where it applies.
- Liquid Paint should ask for the paint type, then a finish for 1K or 2K, then a volume.
- Basecoat has no finish. Touch Up and Aerosol have no volume.

In plain words, they wanted **shopify conditional product options**. The second question should depend on the first. This is also called **shopify dependent options** or **shopify linked options**.

The worry was the alternative: building hundreds of separate products or thousands of dead variant combinations.

I reproduced the whole thing on a test store on a Dawn product page. The good news: you do not need an app or a monthly fee. You can do this natively.

## Why it happens

Here is the mechanism most forum answers skip.

A **variant** is one buyable version of a product. It has its own price, SKU, stock, and weight. An **option** is a question on the page, like Size or Finish. Each option has values.

Shopify variants are static. Every combination has to exist in advance. Shopify does not build option paths on the fly.

There are two hard limits. Shopify allows a **maximum of 3 options** per product. It allows up to **2048 variants**, and up to 100 values per option.

The paint setup has four levels: format, paint type, finish, and volume. Four levels do not fit in three options. That is the first wall.

The second wall is display. Shopify's variant picker already knows which combinations do not exist. But it does not hide the whole question. It just **crosses out** or greys the values that lead nowhere.

So a buyer who picks Basecoat still sees a Finish question full of struck-through choices. It looks broken, and there is often no clean way to reach Add to cart. This is what the merchant meant by wanting incompatible options hidden, not crossed out.

Native variants cannot branch on their own. That part is true. But the fix is small, and it keeps every real Shopify feature.

## The fix

The trick is two moves. First, fold four levels into three real options and create only the combinations that exist. Second, add one small block that turns "crossed out" into "gone".

I tested this on Dawn with 31 variants on a single colour. Every choice stayed a real Shopify variant, so price, SKU, stock, and reports all behaved normally.

### Step 1. Fold four levels into three options

Merge the two levels that always travel together. Format and paint type become one option called Product.

- **Product:** Touch Up Pen, 1K Aerosol, 2K Aerosol, Basecoat Aerosol, 1K Paint, 2K Paint, Basecoat Paint
- **Finish:** Gloss, Satin, Matt, Basecoat
- **Size:** 12 ml, 400 ml, 100 ml, 1 L, 5 L

Then create only the combinations that truly exist. This is the key idea.

Give Basecoat a single Finish value, also called Basecoat. Now Basecoat can never offer Gloss or Satin. Touch Up gets no volume rows, so it never asks for a size.

Done this way, one colour comes out at about 31 variants, not 140. You skip every combination that makes no sense.

![Admin variants card showing three Shopify options - Product, Finish, Size - with only the real combinations created](/images/blog/shopify-conditional-product-options/01-three-shopify-options-real-combinations.png)

The fastest way to build it is a CSV import, not clicking one variant at a time. Go to **Products**, then **Import**. Use Option1, Option2, and Option3 columns. Put one row per real variant.

![Shopify product CSV import preview - one row per real paint combination, 31 rows not 140](/images/blog/shopify-conditional-product-options/02-csv-import-one-row-per-variant.png)

Then duplicate that finished product for each RAL code. The structure is the same every time, so only the colour and prices change.

### Step 2. Add one Custom Liquid block

Now hide the values that lead nowhere, instead of crossing them out.

A **Custom Liquid block** is a spot in the theme editor where you can paste your own code onto a page, with no full theme edit.

1. Go to **Online Store**, then **Themes**, then **Customize**.
2. Open a product page.
3. Under **Product information**, click **Add block**, then **Custom Liquid**.
4. Paste the code below, then **Save**.

![Shopify theme editor - adding a Custom Liquid block under Product information on the product page](/images/blog/shopify-conditional-product-options/03-add-custom-liquid-block-product-page.png)

```liquid
<script>
  (() => {
    const HANDLE = {{ product.handle | json }};
    let combos = null;

    const groups = () => [...document.querySelectorAll('variant-selects .product-form__input')];

    const chosenIn = (g) => {
      const r = g.querySelector('input[type=radio]:checked');
      if (r) return r.value;
      const s = g.querySelector('select');
      return s ? s.value : null;
    };

    const show = (el, on) => {
      if (el) el.style.display = on ? '' : 'none';
    };

    function apply() {
      if (!combos) return;
      const gs = groups();
      if (!gs.length) return;
      const chosen = gs.map(chosenIn);

      gs.forEach((g, i) => {
        const ok = new Set(
          combos.filter((o) => chosen.slice(0, i).every((c, j) => o[j] === c)).map((o) => o[i])
        );

        g.querySelectorAll('input[type=radio]').forEach((inp) => {
          const on = ok.has(inp.value);
          show(inp, on);
          show(g.querySelector('label[for="' + CSS.escape(inp.id) + '"]'), on);
        });
        g.querySelectorAll('select option').forEach((o) => {
          o.hidden = !ok.has(o.value);
        });

        show(g, ok.size > 1);

        if (chosen[i] !== null && !ok.has(chosen[i]) && ok.size) {
          const next = [...ok][0];
          const inp = [...g.querySelectorAll('input[type=radio]')].find((x) => x.value === next);
          if (inp) return inp.click();
          const s = g.querySelector('select');
          if (s) {
            s.value = next;
            s.dispatchEvent(new Event('change', { bubbles: true }));
          }
        }
      });
    }

    fetch('/products/' + HANDLE + '.js')
      .then((r) => r.json())
      .then((p) => {
        combos = p.variants.map((v) => v.options);
        apply();
      });

    new MutationObserver(apply).observe(document.body, { childList: true, subtree: true });
    document.addEventListener('change', () => setTimeout(apply, 0));
  })();
</script>
```

Here is what the block does, in plain words. It reads the product's real variant list. For each question, it works out which values still fit the earlier choices. It hides the values that do not fit. If only one value is left, it hides the whole question. If your current pick becomes invalid, it moves you to a valid one. It re-runs every time the theme redraws the picker, so it survives clicks.

### The result

Same product, same theme, same click. The options now cascade.

![Before and after on the same click - crossed-out options become a clean single path to Add to cart](/images/blog/shopify-conditional-product-options/04-before-after-conditional-options.png)

- **Touch Up Pen:** Finish is asked, Size never appears.
- **Basecoat Aerosol:** Finish and Size both disappear. One click and it is buyable.
- **1K Paint or 2K Paint:** Finish and Size both appear.

Values that cannot go together are hidden, not crossed out. That is the whole ask, done natively.

![Touch Up Pen shows only Finish, while 2K Paint shows both Finish and Size - the same picker cascading differently](/images/blog/shopify-conditional-product-options/05-cascade-touchup-vs-2k-paint.png)

The big win over an app: every choice is still a real Shopify variant. So the correct price, SKU, stock, and weight ride along automatically. A touch-up pen and a 5 litre tin carry their own real weight, which matters for shipping.

## An alternative: a product options app

If you do not want to touch code, a product options app is the no-code route. Apps like this add option fields on top of a product and can show or hide them based on an earlier selection.

You attach an option set to the products you choose. Everything else keeps the normal picker. So it is opt-in per product, which is what the merchant asked about next.

There are two trade-offs to know before you commit.

First, app options usually do not become real variants. They often do not carry their own SKU, stock, or weight. The merchant hit exactly this. The app could change price by option, but not shipping weight. A pen and a 5 litre tin then ship at the same weight, which is wrong.

Second, an app is a recurring monthly fee, and it takes over the add-to-cart form on that product. Convert one product and test the full checkout before you roll it out to the whole catalogue.

If you do not track stock per combination and you do not need per-option weight, the app route is smooth and quick. If you need real price, SKU, stock, or weight per choice, the native variant method above is the stronger fit.

## Can you make Shopify options depend on each other without an app?

Yes, with the two-part method above. This is the core of **shopify product options based on selection**.

Native variants cannot branch by themselves. But you can create only the real combinations, then hide the dead-end values with one small block. The result behaves like true **shopify conditional logic product page** work, while staying inside Shopify's own variant system.

The limit is the count. You still get three options and 2048 variants. If your real combinations fit inside that, this method is the cleanest path.

## How many options and variants does Shopify allow?

Shopify allows a maximum of 3 options per product. Each option can hold up to 100 values. A product can have up to 2048 variants in total.

If your setup needs four or more separate questions, you have three moves:

- Fold two questions that always pair up into one option, like the Product option above.
- Use a product options app for the extra questions.
- On Shopify Plus, look at Combined Listings to present several products as one.

Most catalogues fit once you merge the levels that travel together.

## Do product options apps change weight and shipping?

Usually not on their own. This tripped the merchant up.

Most options apps treat the extra choices as add-ons, not as real variants. They can adjust price. They often cannot set a real shipping weight per choice.

If weight varies a lot across choices, like a pen versus five litres of paint, that matters at checkout. Two paths fix it:

- Use the native variant method, where each combination is a real variant with its own weight.
- Or pair the app with a shipping app that can rate by the selected options.

For paint, the native route is simpler, because the weight is already attached to each variant.

## Will an options app break my other products?

No. Options apps are opt-in per product. You attach an option set only to the products you pick. Every product without one keeps the normal variant picker. You do not need to re-code your existing products.

Still, convert one product first and test it end to end. The app takes over the add-to-cart form on that product, so you want to see a real checkout work before you scale it.

## If it did not work

A few things to check if the cascade does not behave.

- **Nothing hides.** Your theme may not use `variant-selects`. Open the product page, inspect the picker, and match the selector in the block to your theme's markup.
- **A value stays crossed out instead of disappearing.** That combination probably still exists as a variant. Delete the variants that should not exist, or give the parent a single dead-end value like the Basecoat trick.
- **The wrong variant gets selected.** Make sure the auto-advance step is intact. It moves the buyer to a valid value when their current pick becomes impossible.
- **It works, then breaks after a click.** The theme re-renders the picker. The block already watches for that with a MutationObserver, so confirm the block saved and loads on the page.
- **You truly need more than three options.** Fold levels first. If you still cannot, use a product options app or, on Plus, Combined Listings.

## Definitions people confuse

**Variant.** One buyable version of the product. It carries its own price, SKU, stock, and weight. Native and reliable.

**Option.** A question on the page, like Finish or Size. Max three per product. Its values feed the variants.

**Line item property.** A custom note attached to a cart line, like an engraving text. It records a choice but does not manage price, stock, or weight on its own.

**Metafield.** Extra structured data on a product, like a spec sheet value. Good for display and filtering, not for making options branch.

**Combined Listings.** A Shopify Plus feature that shows several separate products as one listing. Useful when you have more real questions than three options can hold.

For dependent choices that still need real price, stock, and weight, variants win. Fold your levels into three options, create only the real combinations, and hide the dead ends with one small block. That is the whole native answer.


---

---
title: Shopify Contact Form Not Working? Here Is the Real Fix
description: Your Shopify contact form Send button works in the theme editor but does nothing on the live site. Here is why that happens and how to find the app that breaks it, step by step.
---

## The problem

A merchant asked about this on the Shopify Community, and it is one of the most confusing bugs you can hit.

Their contact form worked perfectly inside the theme editor. They filled it in, clicked Send, and it submitted. But on the real live website, the Send button did nothing. No message, no error, no confirmation. Just a dead button.

That "works here but not there" gap is what makes this so hard to debug. Most people assume the form code is broken and start rewriting it. Usually it is not the form at all.

I reproduced this on the merchant's live store. It runs the Salt Yard theme, which is a version of the Symmetry theme. The contact page had a normal form with a proper Send button.

![The Shopify contact form with a working Send button](/images/blog/shopify-contact-form-not-working/01-contact-form-send-button.png)

I tested the actual button on the live page. It is a real submit button. The form passes validation. Nothing in the theme cancels the submit. In other words, the form itself is fine.

So if the form is fine, why does the button feel dead? Because something else on the page is crashing, and that crash stops the form script from finishing.

## Why it works in the theme editor but not live

This is the single most important thing to understand, so here it is on its own.

**Apps do not run inside the theme editor.**

When you open Online Store, then Themes, then Customize, you are in a preview. Shopify loads your theme, but it does not load most of your third-party apps. Cookie banners, review widgets, speed boosters, SEO tools, chat widgets. Most of them are switched off in that preview.

On your live storefront, all of those apps load. And if one of them has a JavaScript error, that error can knock out other scripts on the page, including the small script that makes your contact form submit.

So the pattern is simple once you see it:

- In the editor: no apps, no crash, the button works.
- On the live site: an app crashes, the button looks dead.

Same form. Same code. Different environment.

## What the error actually looks like

When I opened the live contact page and checked the browser console, there was a clear JavaScript error firing several times as the page loaded. The message was "Maximum call stack size exceeded".

You do not need to understand that message in detail. In plain words, it means a script got stuck in a loop and gave up. When a script dies like that, anything it was supposed to set up afterwards can stop working too.

The important clue was where the error came from. It came from a script hosted on another company's servers, not from the theme. That is the fingerprint of an app, not a theme bug. Another person in the thread had already guessed the same thing, and the evidence backed it up.

You can see this yourself. On your live site, not the editor, open the page with the broken form. On a computer, press F12 to open developer tools, then click the Console tab. Reload the page. If you see red errors there, especially ones about "call stack", "undefined", or a script from a domain that is not your store, an app is very likely the cause.

## First, confirm the form itself is fine

Before you touch anything, rule out the obvious. It takes a minute and saves you rewriting a form that was never broken.

Open the contact page in the theme editor preview and submit a test message. If it goes through there, the form markup and the Send button are correct. That tells you the problem lives with the live-site apps, not the theme.

If the form also fails inside the editor, that is a different problem. In that case, check that the Send button is a real submit button and that all required fields are filled. But in the "works in editor, not live" case, this is almost always an app.

## The fix: find the app that breaks it

You cannot fix an app conflict by editing the form. You have to find the app and stop it. The cleanest way to do that is with app embeds, because you can switch each app off without uninstalling anything.

Here is the process.

![Turn app embeds off one at a time to find the culprit](/images/blog/shopify-contact-form-not-working/02-app-embeds-isolate.png)

### Step 1. Open app embeds

Go to Online Store, then Themes. Click Customize on your live theme. In the bottom left of the editor there is a small icon that opens the App embeds panel. Open it.

You will see a list of every app that injects code into your storefront, each with an on and off toggle.

### Step 2. Turn them off one at a time

Turn one toggle off. Click Save. Now open your live contact page in a normal browser tab, reload it, and click Send.

If the button works, you just found the app that was breaking it. If it still fails, turn that app back on, turn the next one off, and test again.

Work through the list one app at a time. This sounds slow, but it is the only reliable way, and it usually takes only a few rounds.

### Step 3. Start with the apps most likely to be the cause

Not all apps are equally risky. Some apps rewrite or delay other scripts on the page, and those are the usual culprits. Test these first:

- Page speed or "optimizer" apps
- Cookie consent banners
- SEO apps that claim to speed up your site
- Anything you installed right before the form broke

On the store in this thread, I could see a page-speed SEO app and a cookie banner app running. Those are exactly the kind of apps that cause this.

## If the culprit is a speed app, do not delete it

There is a smarter fix than removing a whole app.

Many speed or "optimize" apps have a setting that defers or lazy-loads JavaScript. That setting tells the browser to hold back scripts and run them later. It is meant to improve your speed score. It is also the number one cause of theme scripts breaking, because it changes the order things load in.

If your culprit is one of these apps, open its settings and turn off the "defer JavaScript" or "lazy-load JavaScript" option. Leave the rest of the app on. In most cases the form comes straight back and you keep the app.

## Also check apps with no embed toggle

Not every app shows up in the app embeds list. Some inject code a different way and only appear under Settings, then Apps.

If the app embeds test does not find the culprit, go to Settings, then Apps and sales channels. Look for a speed booster or optimizer. Temporarily pause or uninstall it, then test the form again. Pausing an app is reversible, so this is safe to try.

## What to check if the button still does nothing

If you have been through the apps and the button is still dead, run down this list.

- Test on a phone and a computer. If it fails on one but works on the other, a device-specific script is involved.
- Try a different browser, and try an incognito window. A browser extension can also block scripts.
- Make sure the required fields are actually filled. Some forms refuse to submit with a blank required field and give no visible warning.
- Check that the button sits inside the form, not outside it. If custom code moved it, a click may no longer submit anything.
- Look at the console again after disabling apps. If the "call stack" error is gone but a new error appears, you have a second conflict to chase.

## What actually happens when a contact form is sent

It helps to know the normal behaviour, because a working form can look like a broken one.

A standard Shopify contact form does not open a popup. When you click Send, the page reloads. Shopify then shows a short confirmation message near the form, usually something like "Thanks for contacting us". The message lands in the email address set under Settings, then General, in the "Sender email" or store contact field.

So if you fixed the app conflict and the page now reloads and shows a small thank-you line, it is working, even though nothing dramatic happened on screen. Send yourself a test message and check the inbox to be sure.

## App conflict versus theme bug: how to tell them apart

These two problems look identical from the outside, but the fix is completely different.

An **app conflict** shows the "works in editor, fails live" pattern. The theme editor has no apps, so the form works there. The console shows an error from an outside script. The fix is to find and disable the app.

A **theme bug** fails everywhere, including the editor. The console error, if any, points at one of your own theme files. The fix is to correct the theme code, or restore the section.

The quick test is the theme editor. If the form works in the editor, stop looking at your theme. The problem is an app.

## Move the form off the theme if you want it bulletproof

If you would rather not depend on your theme or fight app conflicts, you can run the form through a dedicated form app instead. These render their own form and their own submit logic, so a theme change or a script conflict is far less likely to break them.

Popular options are POWR Form Builder, Globo Form Builder, and Hulk Form Builder. All three have free tiers. This is optional. For most stores, finding the conflicting app is enough and costs nothing.

## The short version

A Shopify contact form that works in the theme editor but not on the live site is almost never a broken form. Apps do not run in the editor, so a crashing app only shows up live. Find it by turning app embeds off one at a time and retesting the Send button. Start with speed, SEO, and cookie apps, and if a speed app is the cause, turn off its "defer JavaScript" setting rather than removing it.


---

---
title: Make a Shopify Section Responsive With Container Queries
description: A custom Shopify section that reflows on zoom while the theme's own grid stays clean is almost always using viewport media queries. Here is the container query fix, tested on a Savor store.
---

## The problem

A merchant asked about this on the Shopify Community, and it is a problem I see a lot once a store starts adding custom sections.

They run the Shopify Savor theme. They built a custom Video Review section for the product page. It shows customer videos in a grid, a bit like a wall of reviews.

The grid looked fine at first. Then they noticed something odd.

When they zoomed the browser in or out, the video grid changed its layout. It jumped to a different number of columns. Sometimes the videos went narrow and cramped. The theme's own Recommended Products section, sitting right below it, never did that. It stayed clean at every zoom level and every screen size.

Their goal was simple. They wanted the video grid to behave exactly like Recommended Products across desktop, tablet, mobile, and every zoom level. Same clean reflow, no surprises.

I reproduced it on a Savor test store. Here is the video grid at a middling width, around 780 pixels. It has been forced into four cramped columns even though there is not enough room for four.

![A Shopify video review grid squeezed into four cramped columns at a narrow width](/images/blog/shopify-container-queries/01-video-grid-4-cramped-columns.jpeg)

This is not a random glitch. The section is doing exactly what its CSS tells it to. The CSS is just measuring the wrong thing.

## Why the video grid reflows but Recommended Products does not

Both sections are grids. Both change their column count as space changes. The difference is what each one is watching when it decides how many columns to show.

The custom video section switches columns based on the **viewport**. The viewport is the whole browser window. Its rules look like this:

```css
@media screen and (min-width: 750px) { ... }
@media screen and (min-width: 990px) { ... }
```

Read that in plain words. "When the whole browser window is at least 750 pixels wide, use the tablet column count. When it is at least 990 pixels, use the desktop count."

Savor's Recommended Products section does not watch the window. It watches its **own box**. It uses container queries, which look like this:

```css
@container (min-width: 750px) { ... }
```

That reads as "when this section's own width is at least 750 pixels, use more columns."

Most of the time the window and the section are close enough in width that you never notice the difference. The gap shows up when the section is narrower than the window, or when zoom changes them at different rates.

Here is exactly what the merchant hit. Their product page puts the video section inside a content column, so the section is narrower than the full window. At a window width around 990 pixels, the viewport rule fires and demands the full desktop column count. But the section itself is only about 780 pixels wide. It does not have room for that many columns. So it crams them in, and the videos go thin and ugly.

Recommended Products never hits this because it counts its own width. When its box is 780 pixels, it asks for the layout that fits 780 pixels. It cannot over-commit, because it is measuring the thing that actually holds the content.

That is the whole bug in one line. Viewport rules measure the window. Container rules measure the box. The fix is to make the video grid measure its box, exactly like the native section does.

## The fix: two changes in the section's style block

The fix lives in the custom section's own code, inside the `{% style %}` block where the grid columns are set. There are only two changes.

1. Add one new rule that turns the grid wrapper into a container to measure.
2. Change the two `@media screen and (min-width: ...)` lines to `@container (min-width: ...)`.

Here is a map of where those two changes go in the grid CSS.

![Annotated Shopify section CSS showing where to add the container rule and swap media for container queries](/images/blog/shopify-container-queries/02-where-to-edit-grid-css.png)

### Where to find it

In your admin, go to Online Store, then Themes. On your Savor theme click the three dots and choose Edit code. In the left sidebar open the Sections folder and click the file for your video review section. Scroll to the `{% style %}` block near the top and find the part that sets `.ugc-grid-layout` and the two `@media` queries under it.

### The drop-in block

Find your grid block and replace it with this. It keeps all of your own settings. It only adds the wrapper rule and swaps `@media` for `@container`.

```css
.section-{{ section.id }} .ugc-grid-wrapper {
  container-type: inline-size;
}

.section-{{ section.id }} .ugc-grid-layout {
  display: grid;
  gap: {{ section.settings.column_gap_mobile }}px;
  grid-template-columns: repeat({{ section.settings.columns_mobile }}, minmax(0, 1fr));
}

@container (min-width: 750px) {
  .section-{{ section.id }} .ugc-grid-layout {
    gap: {{ section.settings.column_gap_tablet }}px;
    grid-template-columns: repeat({{ section.settings.columns_tablet }}, minmax(0, 1fr));
  }
}

@container (min-width: 990px) {
  .section-{{ section.id }} .ugc-grid-layout {
    gap: {{ section.settings.column_gap_desktop }}px;
    grid-template-columns: repeat({{ section.settings.columns_desktop }}, minmax(0, 1fr));
  }
}
```

Keep your own `.section-{{ section.id }}` prefix. Keep your own settings values. The only real changes are the new `.ugc-grid-wrapper` rule at the top and the word `@media screen and` becoming `@container` on the two lines below.

The new wrapper rule is the key. `container-type: inline-size` tells the browser to treat that element as a measuring box. After that, every `@container` rule inside it reads that box's width instead of the window's.

Save the file. Then open your product page and try the same zoom test.

Here is the same grid after the change, at that same narrow width. It now drops to two clean columns that actually fit. Wider screens still get three or four, because the rules still fire, they just fire off the section width now.

![The Shopify video review grid showing two clean columns after switching to container queries](/images/blog/shopify-container-queries/03-video-grid-2-clean-columns.jpeg)

On my test store, at roughly 780 pixels of section width, the old viewport version forced four cramped columns. The container query version dropped to two columns that fit the space, and full width still gave the desktop count. That is the exact behavior Recommended Products already had.

## Align the heading breakpoints too

There is one more small mismatch worth fixing while you are in there.

The grid switched at 750 and 990 pixels. But the heading font size in the same section switched at 768 and 1024 pixels. Different numbers.

That means the heading and the grid changed size at slightly different moments as the page resized. It looks a little off, like two parts of the same section disagreeing.

If you want them in step, change the heading breakpoints to match. Use the same 750 and 990 the grid uses. It is a tiny change and it makes the whole section feel like one piece.

## What are CSS container queries?

A container query is a rule that responds to the size of an element on the page, not the size of the browser window.

For years, responsive design had one tool for this job: the media query. A media query asks about the window. "Is the window at least 990 pixels wide? Then do this." That works when your component always fills the window, but it falls apart when the component sits in a narrow column or a sidebar.

Container queries fixed that. You mark one element as a container. Then any rule you write with `@container` asks about that element's width instead of the window's. The component becomes self aware. It lays itself out based on the room it actually has.

This is why modern Shopify themes like Savor, Horizon, and their relatives use container queries for their grids. A product grid might sit full width on one page and inside a two column layout on another. With container queries it just works in both places, because it always measures itself.

## Why is my Shopify section not responsive?

If a custom section reflows badly while your theme's built in sections stay clean, the cause is almost always one of these.

- **It uses viewport media queries in a narrow container.** This is the case in this article. The section counts the window, not its own box, so it asks for a layout that does not fit.
- **It has fixed pixel widths.** A card set to `width: 300px` cannot shrink. On a small screen it overflows and pushes the layout sideways.
- **It is missing `minmax(0, 1fr)` on the grid.** Without the `0`, grid columns refuse to shrink below their content, so a wide video or long word can blow the columns out.
- **It copies a breakpoint number that does not match the theme.** Themes pick specific switch points. If your section uses different ones, it changes at the wrong moment and looks out of sync.

The fix is usually to stop measuring the window and start measuring the section, which is exactly what the container query change does.

## How do I make a custom Shopify section match the theme grid?

The goal is not to copy the theme's code. It is to copy the theme's method. Do these three things and a custom grid will behave like a native one.

**Measure the section, not the window.** Add `container-type: inline-size` to the grid's wrapper, then write your column rules with `@container`, not `@media`. This is the single most important step.

**Use `minmax(0, 1fr)` for the columns.** This lets every column shrink evenly and share the row, so nothing overflows. More on this below.

**Match the theme's breakpoints.** Savor switches at 750 and 990 pixels. Use the same numbers so your section changes at the same moments the rest of the page does.

Do all three and the section will track the theme's own layout at any width and any zoom, because it is following the same logic the theme follows.

## Viewport media query vs container query

These two look almost identical in code, so it is worth being clear on the difference, because it is the whole point.

A **viewport media query** starts with `@media` and asks about the browser window. It is the right tool when a section always spans the full width of the page, like a header or a hero banner.

A **container query** starts with `@container` and asks about a specific element's width. It is the right tool when a component can appear in different sized slots, like a product card grid that might be full width on one template and half width on another.

For a grid of items inside a content column, the container query is almost always what you want. The grid should respond to the space it has, not to a window it does not fill.

## What inline-size means

When you write `container-type: inline-size`, the word `inline-size` just means width, for a normal left to right, top to bottom page.

There is also a `size` value, which tracks both width and height. You rarely want that for a vertical grid, because the grid's height depends on its content, and letting height feed back into the layout can cause loops. For a column grid, `inline-size` is the safe and standard choice. It watches width only, which is all a column count needs.

## What minmax(0, 1fr) does, and why columns should grow with width

The column rule uses `repeat(4, minmax(0, 1fr))`. That means "four columns, each one able to shrink to nothing and otherwise share the space equally."

The `1fr` part means equal shares of the leftover space. The `minmax(0, ...)` part is the important half. Without the `0`, a grid column will not shrink below the natural size of its content. A wide video or a long unbroken caption can then force the column wider than its share, and the whole grid overflows. The `0` gives the browser permission to shrink the column all the way down, so the columns always fit.

There is one more habit worth keeping. Your column count should go **up** as width increases, never down. Mobile gets the fewest columns, tablet more, desktop the most. That matches how people read. A phone has room for one or two videos across. A desktop has room for four. If you ever find yourself giving mobile more columns than desktop, the numbers are backwards, and that alone can make a section look broken on small screens.

## What to check if it did not work

**The grid still jumps on zoom.** Confirm the `container-type: inline-size` rule is on the element that actually wraps the grid, and that the grid sits inside it. If the container rule is on the wrong element, the `@container` queries have nothing to measure and fall back to acting like the layout has no breakpoints.

**Nothing changed at all.** Check that you swapped both `@media` lines, the 750 one and the 990 one. Missing one leaves the section half fixed.

**The columns overflow the section.** Make sure each column uses `minmax(0, 1fr)` and not just `1fr`. The `0` is what lets the columns shrink to fit.

**The heading and grid still feel out of step.** That is the breakpoint mismatch. Change the heading's 768 and 1024 media queries to 750 and 990 so they line up with the grid.

Once the section measures its own width, it behaves like the theme's native grid at every size and zoom level, which is what the merchant wanted from the start.


---

---
title: "Shopify Craft Theme: Sync Thumbnails to the Variant Picker"
description: In the Craft theme, clicking a product thumbnail changes the photo but leaves the variant selector behind. Here is why the sync only runs one way, and the Custom Liquid block that fixes it.
---

## The problem

A merchant asked about this on the Shopify Community, and it is one of those things you only notice once a shopper complains.

They run a yarn shop on the Craft theme. One of their products has 41 colourways, and every single colour has its own photo. The photos are mapped correctly, so picking a colour in the dropdown does pull up the right skein.

The trouble is the other direction. A shopper browsing the thumbnail strip clicks a colour they like. The big photo changes. The Color dropdown does not. It still shows whatever was selected when the page loaded.

So the shopper is looking at a coral skein, the selector says Kiwi, and if they hit Add to cart they get Kiwi.

Here is the exact moment on a Craft test store. I clicked the Rosewood thumbnail. The gallery moved. The Color selector did not.

![A Craft product page where the Rosewood thumbnail is selected but the Color dropdown still reads 001 - Cream](/images/blog/shopify-craft-theme-variant-sync/01-thumbnail-clicked-selector-unchanged.png)

The merchant said they have zero coding experience. The good news is the fix does not need any. It is one block you paste into the theme editor.

## Why Craft only syncs one way

This is the part that forum answers usually skip, and it explains why no setting will fix it.

There are two separate things happening on a product page, and Shopify only wires one of them.

**Direction one: variant to image.** When a shopper changes the variant, the theme looks up that variant's assigned image and jumps the gallery to it. This is built in. It works as long as each variant has an image mapped to it in your admin.

**Direction two: image to variant.** When a shopper clicks a thumbnail, the theme swaps the big photo. That is all it does. Nothing tells the variant selector that a choice was made.

That is not a bug in Craft. It is simply a feature that was never built. Craft's gallery treats a thumbnail click as "show me this photo", not "I want this colour". The two ideas happen to overlap on a product where every photo is a colour, but the theme has no way to know that.

So there is no checkbox to turn on. You have to add the missing connection yourself.

## Before you start: check your variant images are mapped

The fix reads the link between each image and its variant. If that link is missing, there is nothing for it to read, and clicking a thumbnail will keep doing nothing.

So check this first, because it is also the single most common reason variant photos misbehave in Shopify generally.

1. Open the product in your Shopify admin.
2. Scroll to the Variants section and click a variant.
3. Look for the image at the top of the variant page.

If the variant has an image there, it is mapped. If it shows a placeholder, it is not.

To map one, click the image area on the variant and pick the photo from the product's media. Do that for every colour.

A quick way to test the whole product without opening every variant: change the colour in the dropdown on your live product page. If the main photo changes to match, your images are mapped. If it stays put, they are not.

This matters for a second reason too. Any photo you never assign to a variant is treated by Shopify as a shared product image. Shared images belong to the product, not to one colour. The fix below deliberately ignores them, so lifestyle shots, size charts and packaging photos will not hijack the selector.

## The fix: one Custom Liquid block

Craft lets you drop custom code into the product page from the theme editor. No code editor, no collaborator access, and nothing that touches your theme files directly.

Four steps.

**1.** Go to Online Store, then Themes, and click Customize on your Craft theme.

![The Shopify Themes page with the Customize button on the Craft theme highlighted](/images/blog/shopify-craft-theme-variant-sync/03-online-store-themes-customize.png)

**2.** Use the page dropdown at the top to open a product page. In the left sidebar, find the Product information section and click Add block.

![The Craft theme editor sidebar with Product information expanded and Add block highlighted](/images/blog/shopify-craft-theme-variant-sync/04-product-information-add-block.jpeg)

**3.** Pick Custom Liquid from the block list.

![The Add block picker in the Craft theme editor with Custom Liquid highlighted](/images/blog/shopify-craft-theme-variant-sync/05-choose-custom-liquid.jpeg)

**4.** Paste the code below into the Liquid code box, then click Save at the top right.

![The Custom Liquid block settings panel with the code pasted into the Liquid code box](/images/blog/shopify-craft-theme-variant-sync/06-paste-code-then-save.jpeg)

```liquid
<script>
  window.thumbSync = window.thumbSync || {};
  window.thumbSync['{{ product.id }}'] = [
    {%- for variant in product.variants -%}
      {%- if variant.featured_media -%}
        { "m": "{{ variant.featured_media.id }}", "o": {{ variant.options | json }} },
      {%- endif -%}
    {%- endfor -%}
  ];

  if (!window.thumbSyncReady) {
    window.thumbSyncReady = true;

    document.addEventListener('click', (event) => {
      const thumb = event.target.closest('.thumbnail-list__item[data-target]');
      const picker = thumb?.closest('product-info')?.querySelector('variant-selects');
      if (!picker) return;

      const mediaId = thumb.dataset.target.split('-').pop();
      const matches = (window.thumbSync[picker.dataset.productId] || [])
        .filter((row) => row.m === mediaId);
      if (!matches.length) return;

      const groups = [...picker.querySelectorAll('fieldset, .product-form__input--dropdown')];
      const current = groups.map((group) =>
        group.querySelector('select')?.value ??
        group.querySelector('input[type="radio"]:checked')?.value
      );

      // Keep the options the shopper already chose where the image allows it.
      const best = matches.reduce((a, b) =>
        b.o.filter((v, i) => v === current[i]).length >
        a.o.filter((v, i) => v === current[i]).length ? b : a
      );

      let changed = null;
      groups.forEach((group, i) => {
        const value = best.o[i];
        const select = group.querySelector('select');

        if (select) {
          const option = [...select.options].find((o) => o.value === value);
          if (!option || option.selected) return;
          [...select.options].forEach((o) => o.removeAttribute('selected'));
          option.setAttribute('selected', 'selected');
          select.value = value;
          changed = select;
        } else {
          const radio = [...group.querySelectorAll('input[type="radio"]')]
            .find((r) => r.value === value);
          if (!radio || radio.checked) return;
          radio.checked = true;
          changed = radio;
        }
      });

      changed?.dispatchEvent(new Event('change', { bubbles: true }));
    });
  }
</script>
```

Same product, same click, after the block is saved. The Color selector now reads Rosewood.

![The same Craft product page after the fix, with the Rosewood thumbnail selected and the Color dropdown reading 031 - Rosewood](/images/blog/shopify-craft-theme-variant-sync/02-thumbnail-clicked-selector-follows.png)

## What actually changes for the shopper

It is worth being precise about this, because "the dropdown updates" undersells it.

- Clicking any thumbnail selects that colour in the selector.
- The price updates, so a colour that costs more shows the right number.
- The stock status updates, so a sold-out colour shows as sold out.
- The hidden variant on the Add to cart form updates. This is the important one. It means the colour the shopper is looking at is the colour that lands in the cart.
- The page URL updates too, so if they copy the link, it opens on the right colour.

That last group is why a label-only fix is not good enough. Plenty of snippets change the visible text and leave the actual cart value pointing at the old variant. Then the shopper orders the wrong colour and you find out through a return.

## Where to put the block, and how many you need

Add it once. You do not repeat it per product.

The Custom Liquid block lives on the product template, and every product using that template picks it up. On a standard Craft setup that is your whole catalogue.

Some stores use more than one product template. If yours does, add the block to each template you want it on.

The block renders nothing visible. It has no height, no spacing, and it does not matter where in the block order you drop it. Bottom of the list is fine.

## Does it work on other Shopify themes?

I tested this on Craft.

Craft is one of Shopify's free themes. It shares its product page code with Dawn and the rest of that family, including Refresh, Sense, Taste, Studio and Publisher. They use the same gallery markup and the same variant picker, so the same block should work on those too.

Horizon is a different generation of theme and is built differently, so treat it as untested here.

If you are on a paid theme from the Theme Store, it depends on how closely the developer followed Dawn. Many did. Paste it in and click a thumbnail. If nothing happens, the theme uses its own markup and the code will need adjusting.

## Does it work with swatches and buttons, not just a dropdown?

Yes. I tested both.

Craft's variant picker can render as a dropdown, or as buttons and swatches. You set that per option in the theme editor's Variant picker block. The code handles both, so you can switch styles later without touching it.

That is worth knowing if you sell colours. On a product with 41 colourways, a dropdown makes a shopper read 41 lines of text. Visible swatches let them scan. If you decide to switch, the thumbnail sync keeps working either way.

## Will a theme update wipe it out?

No, and this is the main reason to use a Custom Liquid block rather than editing theme files.

Block content is stored with your theme settings, not in the theme's code files. Editing a file like `main-product.liquid` directly is what gets overwritten when you update the theme, or lost when you switch.

The one thing to know is that theme settings do not travel between themes. If you install a brand new theme, you paste the block again. That takes a minute.

## What to check if it did not work

Work through these in order. In my experience it is almost always the first one.

**The images are not mapped to variants.** Covered above, and it is by far the most common cause. Change the colour in the dropdown. If the photo does not change, mapping is missing, and the fix has nothing to work with.

**Your gallery has no thumbnails.** In the theme editor, open the Product information section and check the desktop layout setting. Craft can show media stacked in a column instead of a big image with a thumbnail strip. There is no thumbnail to click in a stacked layout. Switch it to a thumbnail layout.

**You added the block to the wrong template.** If it works on one product and not another, the two products are on different templates. Check the template assigned to the product in the admin, then add the block to that template as well.

**You pasted into a section, not the product block.** The block has to sit inside Product information. If you added a standalone Custom Liquid section further down the page, it will not find the picker. Remove it and add it as a block instead.

**Nothing at all happens, on any product.** Something in the paste got mangled. Clear the box, copy the code again from the top, and make sure you got the opening `<script>` and closing `</script>` lines.

## One thing worth checking while you are in there

When I looked at the merchant's live product page, I noticed something unrelated but worth a minute of anyone's time.

Their Color dropdown had been moved below the product description, underneath the Add to cart button. A shopper has to scroll past the whole description to find the colour picker.

That is easy to do by accident when dragging blocks around, and easy to undo. In the theme editor, in the Product information section, drag the Variant picker block so it sits between Price and Quantity. That is where shoppers expect it, and it is where the theme puts it by default.

Worth a look at your own product page while the editor is already open.


---

---
title: How to Create a Discount Code in Shopify
description: Set up a working discount code in your own Shopify store, from a single code to bulk-generated codes, with no third-party app.
---

## The problem

A merchant asked about this on the Shopify Community.

They were planning a new online store. They wanted to offer their own voucher codes to customers. They had looked at a coupon site and started listing features they thought they would need to build: a copy-code button, campaign tracking, a page that lists active codes, and more.

The worry is common. It feels like running your own discount codes needs custom development or a paid app.

It does not. Almost all of it is already in Shopify.

I reproduced the whole thing on a test store. Below is how to create a discount code, how to hand it to customers without a copy-code button, and where people get stuck.

## Why it happens

Shopify keeps discounts in one place, and it is easy to miss how much is packed into it.

A "discount code" in Shopify is a rule attached to the cart. When a shopper enters the code, or arrives through a link that carries it, Shopify checks the rule and takes money off the order total. You do not host the coupon anywhere. You do not write any code. You create the rule once, and Shopify enforces it everywhere: online store, checkout, and even a shareable link.

Because it is a cart rule, everything you would expect to build yourself is a setting on that rule instead. Start and end dates, minimum spend, usage caps, and whether codes can stack are all checkboxes. The mechanism the short forum answers skip is this: you are configuring a rule, not building a coupon system.

## Before you start: code or gift card?

Settle this first, because the two things do not carry over.

A discount code (in German, Gutscheincode) is a rule on the cart. It takes a set amount or a percentage off, or gives free shipping. It costs nothing to issue. You can make as many as you like.

A gift card (Geschenkgutschein) is a prepaid balance. It is sold as a product, or issued to a customer. It has its own rules and its own balance tracking. It is money the customer already paid for.

If you mean "take 10 percent off with WILLKOMMEN10," you want a discount code. If you mean "here is a 50 euro voucher the customer can spend," you want a gift card. This article is about discount codes.

## The fix: create a discount code

Here is the full path I tested on a store.

**Step 1. Open Discounts.**

In your Shopify admin, go to **Discounts** in the left menu. Click **Create discount**.

**Step 2. Pick the discount type.**

Shopify offers four types:

- **Amount off products** - money or percent off specific products or collections
- **Amount off order** - money or percent off the whole order
- **Buy X get Y** - a free or discounted item when they buy something
- **Free shipping** - drops the shipping cost

For a simple "10 percent off everything" welcome code, choose **Amount off order**.

**Step 3. Choose "Discount code," not "Automatic."**

Near the top, Shopify asks whether this is a **Discount code** or an **Automatic discount**. A discount code needs the shopper to enter or carry a code. An automatic discount applies with no code at all. Choose **Discount code** here.

**Step 4. Name the code.**

Type the code customers will use, for example `WILLKOMMEN10`. Keep it short and easy to type. Shopify shows a **Generate** button if you want a random code instead.

The code is not case sensitive. `willkommen10` and `WILLKOMMEN10` both work.

**Step 5. Set the value.**

Set **Percentage** to 10, or set a fixed amount like 5 euros off. Choose whether it applies to the whole order or only certain collections.

**Step 6. Set the rules (all optional).**

This is where Shopify replaces the features people think they must build:

- **Minimum purchase requirement** - require a minimum spend or minimum quantity before the code works
- **Maximum discount uses** - cap the total number of uses, and limit it to one use per customer
- **Combinations** - decide whether this code can stack with product, order, or shipping discounts
- **Active dates** - set a start date and time, and an end date and time

**Step 7. Save.**

Click **Save**. The code is live.

That is the entire creation flow. No app, no code, no developer.

## Hand the code to customers without a copy-code button

The merchant thought they needed to build a button that copies the code to the clipboard. They do not. Shopify generates a link that applies the code by itself.

**Open the code, then Promote, then Get a shareable link.**

Go back into **Discounts**, open the code you made, click **Promote**, then **Get a shareable link**.

![Shopify Discounts, open the code, then Promote, then Get a shareable link](/images/blog/shopify-create-discount-code/01-promote-get-shareable-link.png)

Shopify gives you a link like `https://yourshop.de/discount/WILLKOMMEN10`, plus a QR code you can print. To put the code and that link on a printed coupon for flyers or parcel inserts, use the [free coupon maker](/tools/coupon-template-generator).

![The shareable discount link, a QR code, and the Marketing campaigns dropdown](/images/blog/shopify-create-discount-code/02-shareable-link-qr-campaign.png)

Two things about that link:

- Add `?redirect=/collections/sale` to the end to land people on a specific page. The full link becomes `https://yourshop.de/discount/WILLKOMMEN10?redirect=/collections/sale`.
- The code in the link is not case sensitive, same as typing it.

I tested this on a dev store. I opened the link, added one item, and went to the cart. The total went from 525.00 to 472.50, with the code already attached. Nothing was typed at any point.

![Cart with the discount code applied, total dropped from 525.00 to 472.50, nothing typed](/images/blog/shopify-create-discount-code/03-cart-code-applied.png)

That is a Shopify discount code before checkout, applied for the customer, with zero custom work.

## Campaign tracking is built in too

The merchant also wanted to know which code came from which campaign and which source. Shopify tracks that for you.

The same **Get a shareable link** dialog has a **Marketing campaigns** dropdown. Attach the link to a campaign there, and Shopify tags the traffic. Then, on the discount page, click **View the sales by discount report**. You get which code, which campaign, and which source, with no analytics app.

So the list of "features to build" shrinks to almost nothing. Dates, minimum spend, usage caps, combinations, shareable links, QR codes, and campaign tracking are all already there.

## An alternative: a Shopify bulk discount code generator

One code is easy. But sometimes you need hundreds of unique codes, for example one per influencer, one per printed flyer, or one per customer so a single code cannot be shared around.

Shopify has a bulk option built in.

When you create a discount and reach the code field, click **Generate code** to get a random one. For many codes at once, create the discount, save it, then use the **bulk actions** on the discount to generate multiple unique codes under the same rule. Each shopper gets their own code, but they all point at the same discount settings.

If you need thousands of codes exported to a spreadsheet, there are free apps in the Shopify App Store built only for this, like a bulk discount code generator. They create the codes, hand you a CSV, and still ride on Shopify's native discount rules underneath. You do not lose the built-in dates, caps, or reporting.

For most small stores, a handful of hand-named codes is plenty. Reach for a bulk generator only when you genuinely need many unique codes.

## How to make a discount code on Shopify for a specific product

A common follow-up: you want the code to work only on one product or one collection.

Do it at Step 2. Choose **Amount off products** instead of **Amount off order**. Then Shopify lets you pick the exact products or collections the code applies to. Everything else in the flow is the same. The code will only reduce the price of the items you selected.

This is how "20 percent off summer dresses" codes are built. The rule is scoped to the collection, and the rest of the cart pays full price.

## Can customers apply a Shopify discount code before checkout?

Yes. There are two moments a code can go in.

- **In the cart.** Most themes show a discount field on the cart page or in the cart drawer. The shopper types the code, and the total updates before they reach checkout.
- **At checkout.** Shopify's checkout always has a discount code box, even if your theme hides the cart one.

The shareable link method from above applies the code even earlier, the moment they click the link. So a Shopify discount code before checkout is normal and expected. If your theme is missing the cart field, the checkout field is still there as a fallback.

## What Shopify does not give you

One thing is not built in: a public page that lists your active codes, like the coupon site the merchant looked at.

There is no native "here are all our codes" page. That is a normal page you build yourself.

If you want one, the clean way is metaobjects. A metaobject is a custom content record in Shopify. Create one entry per code, publish the entries as web pages, and point them all at one shared template. You get a tidy, repeatable deals page without a plugin. But this is optional, and most stores never need it. The codes work whether or not you list them on a page.

## If it did not work

A few things trip people up:

- **The code does nothing at the cart.** Check the **Active dates**. If the start date is in the future, or the end date has passed, the code is inactive.
- **"This code is not valid."** Check the **Minimum purchase requirement**. If the cart is below the minimum, Shopify refuses the code. Also check whether you scoped it to products the cart does not contain.
- **The code will not stack with another discount.** Look at **Combinations** on the discount. By default, codes do not combine. Turn on the specific combination you want.
- **The shareable link 404s.** Make sure the discount is a **Discount code**, not an **Automatic discount**. Only code discounts get a `/discount/CODE` link.
- **One customer used it many times.** Set **Limit to one use per customer** under maximum uses. This needs customers to be logged in to be fully enforced.

## Definitions people confuse

- **Discount code vs automatic discount.** A code needs the shopper to enter or carry it. An automatic discount applies with no code. Same discount engine, different trigger.
- **Discount code vs gift card.** A code is a rule that reduces a price. A gift card is prepaid money sold as a product. They share almost nothing.
- **Amount off order vs amount off products.** Order-level takes off the whole cart. Product-level takes off only the items or collections you picked.
- **Percentage vs fixed amount.** Percentage scales with the cart, for example 10 percent of anything. Fixed takes a set amount off, for example 5 euros, no matter the cart size.
- **Usage limit vs per-customer limit.** The usage limit caps total redemptions across all customers. The per-customer limit stops one person redeeming it repeatedly. You can set both.

That is how to create a discount code on Shopify, how to make a discount code on Shopify for a single product, and where to reach for a Shopify bulk discount code generator. The short version: it is all native, so build the rule and share the link.


---

---
title: "Shopify Custom Fields: Add Hundreds Without Hitting Limits"
description: Shopify caps custom fields two different ways, and most stores hit both. Here is the structure that lets one product carry hundreds of spec rows, tested on a real store.
---

## The problem

A merchant posted this on the Shopify Community and it is a problem worth understanding, because almost every store with technical products eventually walks into it.

They sell dash cameras in New Zealand. Over 40 models across two brands. Each model has a long list of technical detail, and the detail is deliberately different per model because it is what customers search for.

They built the product page properly. They made a custom field for every spec. They connected each one to the page in the theme editor.

Then Shopify stopped them twice.

First they ran out of custom field slots. Then, when they tried to put the fields on the page, the theme editor refused to connect any more.

Their words: the level of customisation is a business requirement, not something to be reduced.

They were about to hire a developer. They did not need one. The whole thing is a structure problem, and you fix it in the admin in under an hour.

## The two limits you are actually hitting

These are two separate limits. Most advice online treats them as one, which is why the usual fixes only half work.

**Limit one: 128 custom field definitions per resource.** A "definition" is the field itself, like "Resolution" or "Night vision". Shopify allows 128 of them on products. Make a definition for every spec on every model and you burn through that fast.

**Limit two: 100 dynamic sources per template.** A dynamic source is a connection you make in the theme editor, when you click the little database icon and point a text block at a custom field. The cap is 100 per template, and 50 within a single section.

Here is the part that changes the maths.

That second limit only counts connections made through the theme editor interface. Code that reads your custom fields directly is not counted at all. Not once.

So the 100 limit is not really a limit on how much content your product page can show. It is a limit on how many times you click the connect button.

That single fact removes half the problem immediately.

## Why moving to metaobjects is only half an answer

The common advice is "use metaobjects". That advice is right, but incomplete, and following it carelessly just moves the wall.

A metaobject is a custom record type you define once and then create many entries from. Think of it as your own little table.

If you make one metaobject that holds a field per spec, you have simply moved 100 definitions from one place to another. You will hit a cap again.

The version that scales looks different. You make a metaobject that represents **one row** of a spec sheet, not the whole sheet.

Three fields, and only three, no matter how many specs you end up with:

- **Group**, so rows can be bunched into sections like Video or Power
- **Label**, the name of the spec
- **Value**, the actual content

Then each product gets a **single** custom field that holds a list of those rows.

Now the count works out like this. You have one metaobject definition and one product field. Two definitions, total, forever. Every spec you add after that is content, not schema, so nothing counts against 128 ever again.

## Step 1. Make the Spec row metaobject

Go to Content, then Metaobjects, then Add definition. Call it Spec row.

![Content, Metaobjects, Add definition in the Shopify admin](/images/blog/shopify-custom-fields-limit/01-metaobject-add-definition.png)

Add the three fields. Group and Label can both be single line text. Value should be multi line text, because some specs need a sentence rather than a word.

Then open Options on the definition and turn on **Storefront access**.

Do not skip that. It is the single most common reason this build renders nothing at all, and nothing tells you why. Your entries exist, your field is filled in, and the page stays blank.

With that done you can add entries. Here are the rows on my test store, with the Group column doing the sorting work.

![Spec row entries in the Shopify admin, showing the Group column](/images/blog/shopify-custom-fields-limit/02-spec-row-entries-group-field.png)

Every one of those rows costs nothing against your definition count. They are content.

## Step 2. Add one custom field to your products

Go to Settings, then Custom data, then Products, then Add definition. Call it Specifications.

For the type, choose Metaobject, then pick Spec row. Tick **List of entries**, which is what lets one product hold many rows.

That is it. One definition, covering every spec on every product you will ever add.

## Step 3. Fill it in on the product

Open a product and find Specifications. Add a row per spec.

![The Specifications field on a Shopify product, holding every spec row](/images/blog/shopify-custom-fields-limit/03-specifications-field-on-product.png)

Two things worth knowing here.

Rows print in the order you see them, and you reorder them by dragging. So you do not need a sort or position field, which is a common suggestion and is just extra typing.

And this screen is the only place your team ever enters content. Adding a new model means adding rows. No developer is involved after the setup.

## Step 4. Print it all with one Custom Liquid section

This is the step that makes the 100 limit disappear.

Open Online Store, then Themes, then Customize. Open your product template. Choose Add section, then Custom liquid.

![Add section, then Custom liquid, in the Shopify theme editor](/images/blog/shopify-custom-fields-limit/04-add-section-custom-liquid.png)

Paste this into the Liquid code box, then Save.

```liquid
{%- assign rows = product.metafields.custom.specs.value -%}
{%- if rows != blank -%}
{%- assign seen = '|~|' -%}
{%- for r in rows -%}
{%- assign g = r.group | default: 'Specifications' -%}
{%- assign probe = g | prepend: '|~|' | append: '|~|' -%}
{%- unless seen contains probe -%}
{%- assign seen = seen | append: g | append: '|~|' -%}
{%- endunless -%}
{%- endfor -%}
{%- assign groups = seen | remove_first: '|~|' | split: '|~|' -%}
<div class="spec-sheet">
{%- for g in groups -%}
<details class="spec-sheet__group"{% if forloop.first %} open{% endif %}>
<summary class="spec-sheet__head">{{ g }}</summary>
<div class="spec-sheet__body">
{%- for r in rows -%}
{%- assign rg = r.group | default: 'Specifications' -%}
{%- if rg == g -%}
<div class="spec-sheet__row">
<div class="spec-sheet__label">{{ r.label }}</div>
<div class="spec-sheet__value">{{ r.value | newline_to_br }}</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
</details>
{%- endfor -%}
</div>
<style>
.spec-sheet{max-width:900px;margin:0 auto}
.spec-sheet__group{border-bottom:1px solid rgba(128,128,128,.35)}
.spec-sheet__head{cursor:pointer;list-style:none;padding:16px 4px;font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
.spec-sheet__head::-webkit-details-marker{display:none}
.spec-sheet__head::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1}
.spec-sheet__group[open] .spec-sheet__head::after{content:"\2013"}
.spec-sheet__body{padding:0 4px 12px}
.spec-sheet__row{display:grid;grid-template-columns:240px 1fr;gap:12px;padding:10px 0;border-top:1px solid rgba(128,128,128,.2)}
.spec-sheet__label{font-weight:600}
.spec-sheet__value{opacity:.85}
@media (max-width:749px){.spec-sheet__row{grid-template-columns:1fr;gap:2px}}
</style>
{%- endif -%}
```

![The Liquid code box in the Shopify theme editor, ready to paste into](/images/blog/shopify-custom-fields-limit/05-paste-liquid-code-and-save.png)

One line in that code matters more than the rest.

`product.metafields.custom.specs.value`

The `.value` on the end is required. Without it you get the reference to the rows rather than the rows themselves, and the section prints nothing. This is the second failure that shows you nothing, after Storefront access.

Here is the result on my test store. Twelve spec rows, four groups, from one field definition and zero dynamic sources.

![A grouped spec sheet on a Shopify product page](/images/blog/shopify-custom-fields-limit/06-spec-sheet-on-product-page.png)

Add a hundred more rows and the count of dynamic sources used is still zero.

## Hiding a section when a product has no data

This is usually the second half of the question, and with this structure you get it free.

Not every model has every feature. An entry level camera has no Wi-Fi. A budget model has no GPS. Showing an empty Connectivity heading looks broken.

You do not need any conditions for this.

If a product has no rows at all, the whole section prints nothing. If a product has rows but none in a particular group, that group is never created, so it never appears.

Same section, same code, a cheaper model. The Connectivity group is simply gone.

![The same spec section on a product with no Connectivity rows, so that group is absent](/images/blog/shopify-custom-fields-limit/07-missing-group-hidden.png)

There is nothing per product to configure and nothing to maintain when you add model 41.

## You do not have to rebuild your product page

The merchant's real worry was this. They had spent a long time on the layout and did not want to start over.

You do not have to. Custom Liquid is additive. It is one more section sitting alongside everything you already built. Nothing gets deleted and nothing you already connected stops working.

The practical approach is to move only the field heavy part, which is almost always the spec sheet, and leave the rest of your sections connected the way they are. Your hero, your title, your one off marketing copy can all stay on dynamic sources. Those are a handful of connections, not a hundred.

One genuine limitation is worth flagging. You cannot paste Liquid inside a Collapsible content row. That field accepts typed text or one connected field, and nothing else.

So if collapsible rows are what consumed your 100, rebuild that one accordion using the code above. It uses the browser's own collapsible element, so it looks and behaves the way shoppers expect.

## Loading hundreds of rows from a spreadsheet

If your content already lives in a spreadsheet, do not retype it.

Matrixify imports custom field values from Excel and CSV, which is the fastest way to load 40 products at once. Metafields Guru and Accentuate Custom Fields are both good for bulk editing values afterwards.

Set the structure up by hand on one product first. Get it rendering. Then import the rest against a structure you have already proven, rather than debugging an import and a template at the same time.

## How many custom fields can a Shopify product have?

The definition limit is 128 per resource type. That means 128 on products, and separately 128 on collections, customers, orders and so on.

But the number of **values** a product can carry is effectively unbounded once you use the row structure above. My test product holds twelve spec rows through one definition. Two hundred rows would still be one definition.

If you are close to 128, that is the signal to restructure rather than to request more. Shopify will not raise it.

## What is a dynamic source in Shopify?

A dynamic source is a link between a theme setting and a piece of your store's data.

In the theme editor, some settings have a small database icon next to them. Clicking it lets you point that setting at a product field instead of typing fixed text. That connection is a dynamic source.

They are convenient and they are the right tool for a handful of fields. They are the wrong tool for a spec sheet, because each one is a separate manual connection, they are capped at 100 per template, and you have to repeat the work on every template you create.

Reading the same data in Liquid has no cap and no repetition.

## Custom fields, metafields and metaobjects are not the same thing

These three terms get used interchangeably and it causes real confusion, so here is the distinction in plain words.

**Metafields** are Shopify's name for custom fields. They attach extra data to something that already exists, like a product or a collection. If you are new to them, start with our guide on [how to add metafields in Shopify](/blog/shopify-add-metafields).

**Custom fields** is just the everyday phrase for the same feature. Shopify's own admin calls the area Custom data.

**Metaobjects** are different. They are not attached to anything. They are your own record type, existing on their own, which you then point at from a product. That independence is what makes the row structure in this article possible. We use the same idea to build a [size chart that applies itself to new products](/blog/shopify-size-chart).

The short version: a metafield hangs data off a product, a metaobject is a record in its own right.

## Do custom fields help SEO?

They can, and the merchant in this thread was right to care about it.

Detailed, specific, per product content is exactly what search engines and AI answer engines look for when deciding whether your page actually answers a query. A page saying "4K UHD 3840 x 2160 at 30fps" can rank for that query. A page saying "high quality video" cannot.

The thing to get right is that the content must be in the page's HTML, which is what the Liquid above produces. Content injected by an app after the page loads is far less reliable.

Two practical notes. Write real values rather than marketing adjectives, and keep labels consistent across models so comparison queries can match them.

## What to check if nothing renders

Four failure modes, in the order they actually happen.

- **Storefront access is off** on the metaobject definition. This is the most common one by a wide margin. Open the definition, check Options.
- **`.value` is missing** from the end of the metafield reference in your code.
- **The namespace or key does not match.** The code above expects `custom.specs`. If you named your field something else, change that one line.
- **You are looking at the wrong template.** If some products use a different product template, add the section there too.

If the section renders but looks wrong rather than empty, it is styling, not data. The CSS is all in the block you pasted and you can edit it in place.

## Do you need a developer for this?

No, and that is the honest answer even though a lot of replies on that thread offered to quote for it.

Every step above is admin work plus one paste. There are no theme files to edit, so nothing breaks when your theme updates, and nothing has to be redone when you switch themes. The code lives in a section setting, not in your theme's code.

I built the whole thing on a test store to check it before answering, including the case where a product is missing an entire group. It took less time than writing this article about it.

If your catalog is large and technical, the structure is the thing that matters. Get that right once and the limits stop existing.


---

---
title: "Shopify Custom Payment Method in POS: Hold Orders Unpaid"
description: A Shopify custom payment method closes the POS sale as paid the moment the cashier taps it. Here is how Mark unpaid holds the order instead, and how to flip it to paid once your processor confirms.
---

## The problem

You take payment at the till through something Shopify does not process. A standalone card terminal, a bank transfer app, a local wallet, a finance provider.

Shopify's answer for that is a custom payment method, which POS calls a custom payment type. You add one, it shows up on the POS payment screen, the cashier taps it, the sale closes.

The sale closes as **paid**. Immediately. Before your processor has confirmed anything.

Most of the time that matches reality and the order is correct. Then a settlement fails, or the customer walks away mid-transaction, or the terminal times out, and you are holding an order that says it was paid for money that never arrived.

Cleaning that up means a full refund against a payment that was never taken, plus an inventory correction. At a few transactions a week that is an hour of reconciliation a week for your back office.

There is no setting that makes a custom payment type wait. There is a different payment option that already does.

## Why a Shopify custom payment method closes the sale

A custom payment type in Shopify is a label, not a connection.

Shopify is not talking to your terminal. It has no way to ask whether the money arrived, and no way to be told later that it did not. All it knows is that a cashier tapped a button with a name on it.

So it records the amount against that name and treats the sale as complete. The name is there for your reporting, so you can see how much came through each method at the end of the day. Shopify's own help pages describe custom payment methods as being for tracking purposes.

That design is fine for cash-equivalent tenders, which is what it was built for. Bank transfer on collection, a cheque, a voucher scheme. It does not fit a processor that answers a few seconds or a few minutes later.

## Where the POS payment list lives

The payment screen your cashiers see is configured in one place, and it is not under Settings > Payments.

Go to **Point of Sale** in the sidebar, then **Settings**, then **POS app** under Customization.

![Shopify Point of Sale settings page with the Customization section and the POS app row highlighted](/images/blog/shopify-custom-payment-method-pos/01-pos-settings-pos-app.png)

That opens the POS editor, which is the same idea as the theme editor but for the till. A sidebar of things you can configure, a live preview of the POS screen on the right.

The list you want is **Checkout**.

## Mark unpaid is already in the payment list

Open Checkout in the POS editor sidebar and the payment options appear underneath it: Card, Cash, Gift card, Manual card entry, Split payment, **Mark unpaid**, Store credit, and **Add custom payment type** at the bottom.

![The POS editor with Checkout expanded, showing Mark unpaid in the payment option list and as a tile on the payment options preview](/images/blog/shopify-custom-payment-method-pos/02-mark-unpaid-payment-options.png)

The preview on the right shows what the cashier taps. Cash, Gift card, Split payment, Mark unpaid, sitting together on the payment options screen.

Mark unpaid completes the sale and creates the order without recording any money against it. The order lands in your admin with a payment status of pending, the customer record is attached, the stock is committed, and the receipt prints.

It is the same outcome you would get from an invoice, done at the till in one tap.

If you do not see it on your devices, it has been switched off. The list in this editor is the default for every POS device. A device can turn options off locally, but it cannot turn on anything the default list does not include.

## Mark unpaid has no settings, and neither does a custom type

Click Mark unpaid in the sidebar and the panel underneath says so.

![The Mark unpaid settings panel in the POS editor reading No additional settings here, with Add custom payment type highlighted in the sidebar](/images/blog/shopify-custom-payment-method-pos/03-mark-unpaid-no-settings.png)

"No additional settings here." It is on or off.

The same is true going the other way. Add a custom payment type and you get a name and nothing else. There is no switch that says hold this one until it settles, and no field for a confirmation address your processor could call.

That is the state of it today. The two behaviours exist separately and cannot be combined into one tender.

## The flow that removes the refund cycle

Use Mark unpaid in place of your custom tender, then flip the order to paid from your own system.

**1. The cashier takes the sale with Mark unpaid.** They still run the payment on your terminal as usual. They just do not tell Shopify it succeeded. The order is created, unpaid, with the stock already committed.

**2. Record which processor it went to.** Shopify is not storing the tender name any more, so put it back yourself. A tag on the order is the simplest version, and tags are searchable in the Orders list, so `payment-pending-terminal` gives you your reconciliation queue for free.

**3. When your processor confirms settlement, mark the order paid.** Your integration calls the Admin API, which is how apps and scripts talk to a Shopify store:

```graphql
mutation {
  orderMarkAsPaid(input: { id: "gid://shopify/Order/1234567890" }) {
    order {
      id
      displayFinancialStatus
    }
    userErrors {
      field
      message
    }
  }
}
```

It records a payment for the full outstanding amount and moves the order to paid. It needs the `write_orders` permission, and the account it runs as needs the mark orders as paid permission.

**4. When it fails or times out, cancel instead of refunding.** Cancel the order with restock turned on and reason payment declined. No money was ever captured, so there is no refund to process, no money movement to reconcile, and the stock goes back on its own.

That last step is the whole win. The current cycle is refund, then correct inventory, then explain the refund on a statement. The new one is a cancel.

## What you give up

Two things, and they are worth knowing before you switch a shop over.

**Your tender breakdown changes.** The payment recorded later does not carry your custom tender name. In your POS reports and your daily totals, those sales show as a payment added after the fact rather than as terminal takings. If your end-of-day process reconciles by tender, that process needs rewriting.

**There is a window where the order looks unpaid.** Between the tap and the confirmation the order sits pending. Staff looking at the admin will see orders that appear unpaid but are not. The tag from step 2 is what stops that becoming a support question.

Neither is as expensive as refunding money that was never taken, but both are real.

## Custom payment type, manual payment method, payment provider

Three things with similar names, and the difference decides which one you should be using.

- A **custom payment type** is a POS-only label. It records an amount against a name at the till. Shopify processes nothing and confirms nothing.
- A **manual payment method** is the online-store equivalent, set under Settings > Payments. An order placed with one comes in as pending, and you mark it paid when the money arrives. It behaves the way the POS custom type does not.
- A **payment provider** is a real connection. It authorises, captures, and reports back, so Shopify knows the state of the money without being told.

The online store already has the behaviour being asked for here, through manual payment methods. POS does not carry it across to custom types, which is the difference that generates the reconciliation work.

## If you are building the integration

A few practical notes for whoever wires this up.

**Listen for the order, do not poll for it.** Subscribe to the orders create webhook, which is Shopify calling your server when something happens, and filter for the tag or the location you care about. Polling the Orders list for pending orders works but scales badly.

**Decide what a timeout means before you ship.** A processor that never answers is the case that causes the mess. Pick a cutoff, and make the cutoff cancel the order rather than leave it pending forever.

**Store the processor's transaction reference on the order.** A metafield, which is an extra field you add to hold your own information, keeps it attached to the order rather than in a separate system. When a chargeback arrives six weeks later, that reference is what you need.

**Test the cancel path first.** It is the one that runs least often and matters most.

## The feature request

The behaviour being asked for is a custom payment type that stays pending until an external system confirms it, then transitions to paid on its own.

Shopify staff have logged that request on the developer forum. There is no public tracker or reference number to follow, and the workaround given there is the same one above: mark the order unpaid in POS, then mark it as paid after settlement confirmation.

Until it ships, Mark unpaid plus your own confirmation step is the closest thing available, and it removes the refunds.

## What to do now

1. Open the POS editor at **Point of Sale > Settings > POS app**, click **Checkout**, and confirm Mark unpaid is switched on. Both screens are pictured above.
2. Pick a tag for pending settlements and tell your staff to apply it, or apply it from your integration.
3. Run one real transaction end to end, including a deliberate failure, and watch what the order does.
4. Rewrite your end-of-day reconciliation before you roll it out to every till, because the tender breakdown will not match what it used to.


---

---
title: "Shopify Custom Section: Create One With Editable Settings"
description: Shopify's AI section generator keeps returning half of what you asked for. Here is why, plus a complete custom section file you can paste in, tested on Dawn and Horizon.
---

## The problem

A merchant asked about this on the Shopify Community and I thought the question deserved a better answer than it got.

They wanted a four column section for VIP tiers. Each column needed its own image, a bold title, a subtitle for point ranges, and a reward description. Each column needed its own background colour. Behind all four, one unified full width background image.

They tried Shopify's AI section generator repeatedly. Every attempt returned part of it. Shopify support told them it required custom Liquid code, which was true and also not much help if you do not write Liquid.

What worried them most was cost. They were just starting out, no customers yet, and did not want to pay monthly for something they had not asked for.

They are right to push back. A section like this is a text file that lives in your theme. There is no app and no subscription.

Here is the finished thing, running on two different themes from the same file.

![The finished custom section rendered on Dawn and on Horizon](/images/blog/shopify-custom-section/01-custom-section-dawn-and-horizon.jpeg)

## Why the AI generator kept returning half of it

This is worth understanding, because it is not a fluke and it will happen again on your next request.

The layout is two different mechanisms at once.

The four tiers need to be **blocks**. A block is a repeatable child of a section. Each one carries its own settings, and the merchant can add, reorder and delete them from the theme editor.

The background image behind all four is a **section setting**. It belongs to the section as a whole, sitting underneath every block.

Ask a generator for one of those and it usually manages. Ask for both in the same section and it tends to pick a lane. Most often it hardcodes four fixed columns, which look right in the preview and then turn out not to be editable at all. Sometimes it keeps the blocks and drops the shared background.

So the fix is not a better prompt. It is knowing that "repeatable, editable columns" and "one thing behind all of them" are two different features of the section schema, and writing both.

## What a Shopify custom section actually is

A section is a single `.liquid` file in your theme's `sections` folder. It has three parts.

**The markup.** Normal HTML and Liquid, rendering whatever you want.

**The schema.** A JSON block at the bottom, wrapped in `{% schema %}` tags. This is what generates the settings panel in the theme editor. Every input the merchant sees comes from here.

**The presets.** An optional part of the schema that makes the section appear in the "Add section" list, with sensible starting content.

That is the whole model. Settings you define in JSON become controls in the sidebar, and you read their values back in Liquid as `section.settings.your_id`.

Blocks work the same way, one level down. You define a block type in the schema, loop over `section.blocks` in the markup, and read each one's values as `block.settings.your_id`.

## The code

This is the complete file. It builds a responsive grid whose column count follows the number of blocks, gives every block its own image, title, subtitle, rich text and colours, and puts one background image behind the lot.

```liquid
{%- liquid
  assign s = section.settings
  assign cols = section.blocks.size | at_least: 1
-%}

<style>
  #shopify-section-{{ section.id }} .viptiers {
    position: relative;
    padding: {{ s.padding_top }}px 2rem {{ s.padding_bottom }}px;
    background-color: {{ s.bg_color }};
    {%- if s.bg_image != blank %}
    background-image: url({{ s.bg_image | image_url: width: 3000 }});
    background-size: cover;
    background-position: center;
    {%- endif %}
  }
  #shopify-section-{{ section.id }} .viptiers__overlay {
    position: absolute;
    inset: 0;
    background: {{ s.overlay_color }};
    opacity: {{ s.overlay_opacity | divided_by: 100.0 }};
    pointer-events: none;
  }
  #shopify-section-{{ section.id }} .viptiers__inner {
    position: relative;
    max-width: {{ s.content_width }}px;
    margin: 0 auto;
  }
  #shopify-section-{{ section.id }} .viptiers__heading {
    margin: 0 0 2.4rem;
    text-align: center;
    color: {{ s.heading_color }};
  }
  #shopify-section-{{ section.id }} .viptiers__grid {
    display: grid;
    grid-template-columns: repeat({{ cols }}, minmax(0, 1fr));
    gap: {{ s.gap }}px;
    align-items: stretch;
  }
  #shopify-section-{{ section.id }} .viptiers__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: {{ s.card_padding }}px;
    border-radius: {{ s.corner_radius }}px;
  }
  #shopify-section-{{ section.id }} .viptiers__img {
    display: block;
    width: {{ s.image_height }}px;
    height: {{ s.image_height }}px;
    object-fit: contain;
    margin-bottom: 1.6rem;
  }
  #shopify-section-{{ section.id }} .viptiers__title {
    margin: 0 0 0.4rem;
    font-weight: 700;
    font-size: {{ s.title_size }}px;
    line-height: 1.2;
  }
  #shopify-section-{{ section.id }} .viptiers__points {
    margin: 0 0 1.2rem;
    font-size: {{ s.points_size }}px;
    opacity: 0.8;
  }
  #shopify-section-{{ section.id }} .viptiers__text {
    font-size: {{ s.text_size }}px;
    line-height: 1.5;
  }
  #shopify-section-{{ section.id }} .viptiers__text > *:first-child { margin-top: 0; }
  #shopify-section-{{ section.id }} .viptiers__text > *:last-child { margin-bottom: 0; }

  @media screen and (max-width: 989px) {
    #shopify-section-{{ section.id }} .viptiers__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media screen and (max-width: 599px) {
    #shopify-section-{{ section.id }} .viptiers__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
</style>

<div class="viptiers">
  <div class="viptiers__overlay"></div>

  <div class="viptiers__inner">
    {%- if s.heading != blank -%}
      <h2 class="viptiers__heading">{{ s.heading }}</h2>
    {%- endif -%}

    <div class="viptiers__grid">
      {%- for block in section.blocks -%}
        {%- liquid
          assign b = block.settings
          assign card_alpha = b.card_opacity | divided_by: 100.0
        -%}
        <div
          class="viptiers__card"
          style="background-color: {{ b.card_bg | color_modify: 'alpha', card_alpha }}; color: {{ b.text_color }};"
          {{ block.shopify_attributes }}
        >
          {%- if b.image != blank -%}
            <img
              class="viptiers__img"
              src="{{ b.image | image_url: width: 600 }}"
              alt="{{ b.image.alt | default: b.title | escape }}"
              width="{{ s.image_height }}"
              height="{{ s.image_height }}"
              loading="lazy"
            >
          {%- endif -%}

          {%- if b.title != blank -%}
            <h3 class="viptiers__title">{{ b.title }}</h3>
          {%- endif -%}

          {%- if b.points != blank -%}
            <p class="viptiers__points">{{ b.points }}</p>
          {%- endif -%}

          {%- if b.description != blank -%}
            <div class="viptiers__text">{{ b.description }}</div>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "VIP tiers",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "VIP tiers" },
    { "type": "color", "id": "heading_color", "label": "Heading colour", "default": "#ffffff" },
    { "type": "header", "content": "Background behind all tiers" },
    { "type": "image_picker", "id": "bg_image", "label": "Background image" },
    { "type": "color", "id": "bg_color", "label": "Background colour", "default": "#12121a" },
    { "type": "color", "id": "overlay_color", "label": "Overlay colour", "default": "#000000" },
    { "type": "range", "id": "overlay_opacity", "min": 0, "max": 90, "step": 5, "unit": "%", "label": "Overlay darkness", "default": 35 },
    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "content_width", "min": 800, "max": 1800, "step": 20, "unit": "px", "label": "Content width", "default": 1200 },
    { "type": "range", "id": "gap", "min": 0, "max": 60, "step": 2, "unit": "px", "label": "Space between columns", "default": 20 },
    { "type": "range", "id": "card_padding", "min": 8, "max": 60, "step": 2, "unit": "px", "label": "Padding inside each column", "default": 28 },
    { "type": "range", "id": "corner_radius", "min": 0, "max": 40, "step": 2, "unit": "px", "label": "Corner radius", "default": 12 },
    { "type": "range", "id": "image_height", "min": 40, "max": 260, "step": 10, "unit": "px", "label": "Tier image size", "default": 120 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 64 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 64 },
    { "type": "header", "content": "Text sizes" },
    { "type": "range", "id": "title_size", "min": 14, "max": 40, "step": 1, "unit": "px", "label": "Tier title", "default": 24 },
    { "type": "range", "id": "points_size", "min": 11, "max": 28, "step": 1, "unit": "px", "label": "Points range", "default": 15 },
    { "type": "range", "id": "text_size", "min": 11, "max": 24, "step": 1, "unit": "px", "label": "Reward description", "default": 15 }
  ],
  "blocks": [
    {
      "type": "tier",
      "name": "Tier",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Tier image" },
        { "type": "text", "id": "title", "label": "Tier title", "default": "Bronze" },
        { "type": "text", "id": "points", "label": "Points range", "default": "0 - 499 points" },
        { "type": "richtext", "id": "description", "label": "Rewards", "default": "<p>Free shipping on every order.</p>" },
        { "type": "color", "id": "card_bg", "label": "Column background colour", "default": "#ffffff" },
        { "type": "range", "id": "card_opacity", "min": 0, "max": 100, "step": 5, "unit": "%", "label": "Column background opacity", "default": 100 },
        { "type": "color", "id": "text_color", "label": "Column text colour", "default": "#12121a" }
      ]
    }
  ],
  "max_blocks": 6,
  "presets": [
    {
      "name": "VIP tiers",
      "blocks": [
        { "type": "tier", "settings": { "title": "Bronze", "points": "0 - 499 points", "card_bg": "#f4e3d2", "description": "<p>Free shipping on every order.</p>" } },
        { "type": "tier", "settings": { "title": "Silver", "points": "500 - 1,499 points", "card_bg": "#e6e8ec", "description": "<p>Free shipping plus 5% off everything.</p>" } },
        { "type": "tier", "settings": { "title": "Gold", "points": "1,500 - 4,999 points", "card_bg": "#f6e5b4", "description": "<p>10% off, early access to new drops.</p>" } },
        { "type": "tier", "settings": { "title": "Platinum", "points": "5,000+ points", "card_bg": "#dfe6ef", "description": "<p>15% off, early access, free gift each quarter.</p>" } }
      ]
    }
  ]
}
{% endschema %}
```

It is longer than a minimal example because every value is exposed as a setting. That is deliberate. The point of a custom section is that you never open the code again.

## Step 1: create the file

Go to **Online Store > Themes**, click the `...` next to your theme, and choose **Edit code**.

Find the `sections` folder in the left sidebar. Click **Add a new section**, name it `vip-tiers`, delete whatever Shopify prefills, paste the code, and Save.

![Shopify theme code editor showing the new file inside the sections folder](/images/blog/shopify-custom-section/02-sections-folder-code-editor.jpeg)

The file name becomes the section's identifier. Name it something descriptive and lowercase with hyphens.

A word of advice: **duplicate your theme first**. Online Store > Themes > `...` > Duplicate. Edit the copy, confirm it works, then publish. This costs you nothing and means a mistake never touches your live store.

## Step 2: add it to a page

Open the theme editor, click **Add section**, and search for it.

![Theme editor Add section picker with the new custom section in the results](/images/blog/shopify-custom-section/03-add-section-picker.jpeg)

If it does not appear here, the schema has a problem. See the troubleshooting section at the end.

## Step 3: edit everything from the sidebar

From this point there is no more code.

![Theme editor showing the section settings and one block's settings](/images/blog/shopify-custom-section/04-section-and-block-settings.jpeg)

The section settings hold the background image, background colour, overlay darkness, content width, column spacing, padding and corner radius.

Each tier is its own block, with its own image, title, points range, rewards text, column colour and text colour.

Click **Add Tier** for a fifth or sixth. Drag to reorder. Delete one and the grid re-fits by itself, because the column count is driven by `section.blocks.size` rather than hardcoded to four.

## The setting types you will actually use

The schema supports a long list of input types. These are the ones that cover most sections.

- `text` and `textarea` for plain strings
- `richtext` for a small formatted editor, which is what the rewards field uses
- `image_picker` for anything the merchant should be able to swap
- `color` for a colour swatch, and `color_background` if you want gradients
- `range` for a slider with a `min`, `max`, `step` and `unit`
- `select` and `radio` for a fixed set of choices
- `checkbox` for on or off
- `url`, `product`, `collection` and `blog` for resource pickers
- `header` and `paragraph`, which render nothing but group and explain the controls

Two details that trip people up.

A `range` needs `(max - min) / step` to be a whole number no greater than 101, or the theme editor rejects the whole schema.

Every setting `id` must be unique inside its own settings array, and it is what you reference in Liquid. Rename an `id` after launch and any value the merchant already saved is orphaned.

## Custom section vs Custom Liquid block

These get confused constantly, and the difference matters.

**Custom Liquid** is a block that ships with most themes. You paste a snippet into a textarea in the theme editor. Nothing to install, and it is the right tool for a one-off tweak or a third party embed.

But it has no schema. It cannot generate settings. Anything you want to change later means editing the raw Liquid again, and a merchant who is not comfortable in code cannot safely touch it.

A **custom section** is a real file with a schema. It creates its own controls, it is reusable across pages, it can be added and removed like any built-in section, and it supports blocks.

Rough rule: if it is used once and never edited, Custom Liquid is fine. If someone will change the content later, or you need it more than once, write a section.

There is also a scripting caveat worth knowing. Shopify's Custom Liquid block does not allow `<script src>` tags pointing at external domains. That restriction is one of the more common reasons a snippet that works elsewhere does nothing when pasted in.

## Does this work on my theme?

The file above uses no theme specific classes, snippets or CSS variables. It carries its own styles, scoped by section ID so it cannot collide with anything.

I tested it on **Dawn 15.5** and on **Horizon**, the same file with nothing changed between them.

On Dawn the section measured 1425px wide on a 1425px viewport, with four equal 285px columns. On Horizon it measured 1430px, which is exactly what Horizon's own hero and product list sections measure, so it is as full width as that theme allows any section to be.

At 989px it drops to two columns. Below 599px it goes to one. On a 390px phone all four stacked with no sideways scroll.

Anything on Online Store 2.0 will take it. That covers every free Shopify theme and effectively every paid theme sold today.

## If it is not working

**The section is missing from "Add section".** Almost always invalid JSON in the schema. A trailing comma after the last item in an array is the usual culprit. Paste the schema block on its own into a JSON validator. A section with no `presets` also will not appear in that list, though it can still be assigned in a JSON template.

**"Invalid schema" when you save.** Read the line number in the error. Beyond bad JSON, the usual causes are a duplicate setting `id`, a `range` whose step count exceeds 101, or a block `type` that does not match the type you used in `presets`.

**Blocks render but settings do nothing.** Check you are reading `block.settings.x` inside the block loop and `section.settings.x` outside it. Mixing them up fails with no error, which makes it annoying to spot.

**Clicking a block in the sidebar does not highlight it on the canvas.** You are missing `{{ block.shopify_attributes }}` on the block's outer element. That attribute is what connects the editor to the DOM.

**Your image is stretched or blurry.** Pass a width to `image_url`, as in `{{ b.image | image_url: width: 600 }}`. Without it you can end up serving the original at whatever size it was uploaded.

**The section appears but is unstyled.** The `<style>` block is scoped with `#shopify-section-{{ section.id }}`. If you renamed the wrapper class in the markup and not in the CSS, or the other way round, nothing matches.

I built and tested this on a development store, on both themes, before posting it. The screenshots are from that store.


---

---
title: "Shopify Customer Tags: Discounts for Tagged Buyers"
description: "There is no customer tag option on a Shopify discount. The route from a tag to a discount runs through a customer segment, and here is the exact query. Checked in a live admin."
---

## The problem

You tag your best customers `vip`. You go to build a discount only they can use.

You open the discount, find **Eligibility**, and there is nothing about tags.

This is one of the most persistent misunderstandings in the Shopify admin, and it has a simple cause: **tags and discounts do not talk to each other directly.** There is a step in between that is easy to miss because nothing on either page mentions it.

I walked the whole chain in a live admin. Here it is.

## What customer tags are

A customer tag is a plain text label on a customer record. `vip`, `wholesale`, `trade`, `local`, `repeat`. A customer can carry any number of them.

They are free-form. There is no list to define first; typing a new one creates it. That flexibility is why they are the most useful organising tool in the admin, and also why they get messy: `VIP`, `vip` and `Vip` are three different tags, and nothing warns you.

Pick a convention early. Lower case, hyphens, no spaces is the one that causes fewest problems.

### Where they come from

- **By hand**, on a customer record
- **In bulk**, by selecting customers on the Customers list and adding a tag
- **On import**, via a Tags column in a customer CSV
- **Automatically**, via Shopify Flow, Shopify's free automation app, which can add a tag when something happens such as a first order or a spend threshold
- **From a form**, since Shopify Forms can attach a tag to each person who signs up

The Flow route is the one worth knowing about. "Tag any customer whose lifetime spend passes 500" is a two-block workflow and it keeps your `vip` tag up to date without anyone touching it.

## The bit in the middle

Here is the discount **Eligibility** control, opened:

![The Eligibility dropdown on a Shopify discount showing four options, All customers, Markets, Customer segments and Specific customers](/images/blog/shopify-customer-tags/02-discount-eligibility-customer-segments.png)

Four options, and that is the complete list:

- **All customers**
- **Markets**
- **Customer segments**
- **Specific customers**

There is no "customer tags" entry, and there never has been. That is the whole reason this question keeps coming back.

The route runs through **Customer segments**. A segment is a saved search of your customer list that keeps itself up to date, and one of the things it can search on is tags. So:

**tag → segment → discount**

Two steps, not one. Once you know the middle step exists, the rest is easy.

## Turning a tag into a segment

Go to **Customers → Segments → Create segment**.

![The Segments page under Customers in the Shopify admin, listing saved segments with the Create segment button top right](/images/blog/shopify-customer-tags/03-customers-segments-create-segment.png)

The box you land on lets you describe the group in ordinary words. It works, but it is vague about what it actually matched. Click **Toggle Editor** and you get the precise version instead: three lines that say which list to search, which columns to show, and the condition to match on.

On the line that starts `WHERE`, type:

```
customer_tags CONTAINS 'vip'
```

![The Shopify segment query editor showing FROM customers, a SHOW clause, and WHERE customer_tags CONTAINS vip, with the status reading Valid query](/images/blog/shopify-customer-tags/01-segment-customer-tags-query.png)

The status line at the top reads **Valid query**. Give the segment a name and save it.

A few things about that query language, since it is not documented anywhere obvious in the admin:

- The field is **`customer_tags`**, not `tags`
- The operator is **`CONTAINS`**, and the value goes in **single quotes**
- Combine conditions with `AND` and `OR`, so `customer_tags CONTAINS 'vip' AND amount_spent > 500` is valid
- Exclude with `NOT`, as in `NOT customer_tags CONTAINS 'wholesale'`

Segments are **live**. They are a saved query, not a saved list, so a customer who gets the tag tomorrow is in the segment tomorrow, and a discount pointed at that segment covers them with no further action.

## Pointing the discount at it

Back on the discount, open **Eligibility** (the same dropdown pictured near the top of this article), choose **Customer segments**, and pick the segment you saved. Save the discount.

That is the chain complete. Tag the customer, the segment picks them up, the discount applies to the segment.

Two consequences worth being clear about:

**The customer has to be logged in.** Shopify can only know which customer is shopping if they are signed in to their account. A segment-restricted discount cannot work for a guest checkout, because there is no customer to match against. If your buyers do not have accounts, this whole approach does not apply and you need a plain discount code you only send to those people.

**The tag is the switch.** Untag someone and they leave the segment and lose the discount, with no edit to the discount itself. That is the payoff for the extra step.

## Specific customers, and why it backfires

The Eligibility list also offers **Specific customers**, which lets you name individuals.

It works, and it is the wrong tool almost every time:

- It does not scale past a handful of people
- It does not follow a rule, so a customer who becomes a VIP next week is not added
- Every change means editing every discount

Use it for a one-off, like a goodwill gesture to a single named customer. For anything that describes a *kind* of customer, use a segment.

## Sensible tags to actually use

Tags are only worth the trouble if they mean something. Ones that earn their place:

- **`vip`** or **`gold`** for a loyalty tier, ideally applied by Flow on a spend threshold
- **`wholesale`** or **`trade`** for buyers on different terms
- **`local`** for customers eligible for local delivery or pickup pricing
- **`no-marketing`** for people who have asked not to be contacted, so you can exclude them from segments

What tags are *not* good for is anything Shopify already tracks. Do not tag customers with their order count or total spend; segments can query `number_of_orders` and `amount_spent` directly and will always be current, whereas a tag goes stale the moment they order again.

## Tagging customers automatically with Flow

Shopify Flow is free on all plans and it is what turns tags from admin busywork into something that maintains itself.

A workflow to promote spenders to VIP is three blocks:

1. **Trigger**: Order paid
2. **Condition**: customer's total spent is greater than your threshold
3. **Action**: Add customer tag `vip`

The tag lands on the customer, the segment picks them up on the next evaluation, and any discount pointed at that segment now covers them. The discount itself was never touched.

You can run the reverse too, removing a tag when someone no longer qualifies, though most stores prefer tiers to be sticky.

## Customer tags versus product tags

Worth separating, because the words are the same and the behaviour is not.

**Product tags** can be read by your theme's own code, so it can check whether a product is tagged `sale` and show a badge. That is how the badge in [showing a discount on the product page](/blog/shopify-show-discount-on-product-page) works.

**Customer tags** can be read the same way, but only while the customer is signed in. To a shopper browsing as a guest, there is no customer to read, and the check does nothing, and says nothing. Plan for that, because "it works when I test it" usually means you were signed in as yourself.

For discounts, neither kind of tag is selectable on the discount page. A product tag reaches a discount through a collection, and a customer tag reaches one through a segment. Same detour both times, so when a tag seems to be ignored, look for the thing in the middle.

One caveat on what I checked. I set the segment up and confirmed the discount accepts it, but I did not sign in as a tagged shopper and run a real checkout, because that needs a customer account. So treat the steps below as the setup, which is the part people get stuck on.

## Common problems

**The discount is not applying for a tagged customer.** They are almost certainly not logged in. A segment cannot match a guest.

**The segment is empty.** Check the tag's exact spelling and case. `VIP` and `vip` are different strings to `CONTAINS`.

**The segment shows customers who should not be in it.** `CONTAINS` matches substrings, so `vip` also matches a tag like `vip-lapsed`. Use a more distinctive tag, or add a `NOT` condition.

**The query editor is not showing.** Click **Toggle Editor** on the segment page. You land on the plain-words box first.

**Tags are not appearing on imported customers.** The CSV column must be named `Tags`, and multiple tags are comma separated inside the cell.

## What to do

- **There is no customer tag option on a discount.** Eligibility offers only All customers, Markets, Customer segments and Specific customers.
- The route is **tag → segment → discount**, and the middle step is the one that gets skipped.
- Build the segment in **Customers → Segments → Create segment → Toggle Editor**, with `customer_tags CONTAINS 'vip'`. The editor confirms **Valid query**.
- The field is `customer_tags`, the operator is `CONTAINS`, values take single quotes.
- Segments are **live queries**, so tagging someone later covers them automatically.
- The customer must be **logged in**. Guest checkouts cannot match a segment.
- Avoid **Specific customers** for anything that describes a kind of customer rather than one person.
- Use **Flow** to apply tags on spend or order events so they maintain themselves.


---

---
title: "Get a List of Customers Who Bought a Product in Shopify"
---

## The problem

A merchant asked this on the Shopify Community. They sell workshop tickets, and they need a list of the people who bought each workshop, so they can see the attendees.

Their real pain was not "can it be done". It was that every method they had tried felt clunky. They were exporting order data to a CSV and filtering it in Excel every time. They wanted the attendee list to be easy to reach, ideally on a phone, without exporting anything.

That is a very reasonable ask, and Shopify can do it natively. The trick is using **customer segments** the right way, and knowing they open on mobile. I set this up on a test store to show each step.

## The tool for this: customer segments

Shopify has a feature called **segments** under Customers. A segment is a saved, living list of customers that match a rule you set, like "bought this product" or "spent over 100 dollars".

The important word is **living**. A segment is not a one-time export. It updates itself. When a new person buys the product, they appear in the segment automatically. That is exactly what you want for an attendee list that keeps growing as tickets sell.

Most people either do not know segments exist, or they open the segment editor, see a query box, and back out. So here is the easy way in.

## Build the list once, in plain English

You do not need to know any query language. Shopify will write the rule for you from a plain sentence.

- Go to **Customers > Segments**.
- Click **Create segment**.
- In the box at the top that says **Describe your segment**, type what you want in normal words. For a workshop, something like: `customers who bought Autumn Pottery Workshop`.
- Shopify turns that sentence into a filter and shows you the matching customers.
- Give the segment a name and click **Save**.

![Describe the segment in plain English and Shopify builds the filter](/images/blog/shopify-customers-who-bought-a-product/01-describe-segment.png)

Once you save it, you have a named list you can reopen any time. On my test store, describing it in plain English produced the exact buyer of that product, one customer, with no export and no spreadsheet:

![The saved segment lists every customer who bought that product](/images/blog/shopify-customers-who-bought-a-product/02-segment-result.jpeg)

## Open it on your phone, no CSV

This is the part that solves the "without a laptop" problem, and it is the part that usually gets missed.

Customer segments are available in the **Shopify mobile app**, on both iPhone and Android.

- Open the Shopify app.
- Tap **Customers**.
- Tap **Segments**.
- Tap the segment you saved.

Your attendee list is right there on your phone. No exporting, no Excel, no being at a desk. And because the segment is live, it already includes anyone who bought a ticket since you last looked.

For running a workshop, this means you can pull up the attendee list at the door from your phone.

## The exact filter, if you want it

When you describe a segment in plain English, Shopify writes a small filter behind the scenes. For "bought a specific product" it looks like this:

```
products_purchased MATCHES (id = YOUR_PRODUCT_ID)
```

You can paste that straight into the segment box if you prefer to be precise. `YOUR_PRODUCT_ID` is the long number in the product's admin URL. You can also match more than one product at once by listing several IDs, or add a date range so you only see buyers from a certain period.

Most people never need to touch this. The plain-English box is enough. But it is there if you want repeatable, exact segments.

## The one limitation to know: product vs variant

The merchant asked about product **or product variant**, and this is where it matters.

Segments match at the **product** level. They do not filter by a specific variant. So if your different workshop dates are set up as **variants of one product**, every customer who bought any date lands in the same segment. You cannot split them by date with a segment alone.

There are two clean ways around this.

**Option 1: make each date its own product.** If "Pottery Workshop, 12 March" and "Pottery Workshop, 19 March" are separate products, you can make one segment per date, and each is a clean attendee list. This is usually the better setup for events anyway, because each date has its own inventory, its own sold-out state, and its own page.

**Option 2: use the Orders page for a one-off.** If you just need a quick look and your dates are variants, go to **Orders** and filter by product. On the Orders page you can filter by variant too, so you can see just the orders for one date. This is fine for a quick check, but it is a list of orders, not a saved customer list, and it is less phone-friendly than a segment.

For a recurring workshop business, option 1 plus one segment per product is the setup that stays easy over time.

## Why not just export to a spreadsheet?

The merchant was already doing that, and it worked, but it was the thing they wanted to stop doing.

A CSV export is a snapshot. The moment someone buys another ticket, your spreadsheet is out of date and you export again. You are also tied to a computer to open and filter it.

A segment removes both problems. It is always current, and it opens on your phone. You set it up once per workshop and then you just look at it. That is the whole win here: replacing a repeated manual export with a saved, live list.

## Bonus: what else a segment unlocks

Once you have an attendee segment, a few useful things become easy.

- **Email just the attendees.** From Shopify Email you can send to a segment, so you can message every customer booked onto a workshop about a time change or a reminder, without copying addresses.
- **See it grow.** The segment count tells you how many tickets you have sold to that product at a glance.
- **Reuse the pattern.** The same plain-English approach builds any list you need, like repeat buyers, customers in a city, or people who bought two different products.

## Segments vs the Orders page vs an app

There are three native-ish ways to answer "who bought this", and they suit different needs.

**A saved segment** is best when you want a living list you return to, especially on your phone. It is the right default for a recurring workshop, a membership, or any product where you keep needing the buyer list.

**The Orders page filter** is best for a one-off look, or when you specifically need order-level detail like fulfillment status, or when you must split by variant. It is quick, but it is orders, not a saved customer list, and it is more awkward on a phone.

**A dedicated app** only earns its place when you need something Shopify does not do at all, like printing name badges, checking attendees in at the door, or bespoke event reporting. For simply seeing who bought a product, an app is more than you need, and the merchant in the thread had already found that nothing fit well.

Start with a segment. Reach for the Orders filter when you need variant-level detail, and only add an app when you have a genuine event-management need beyond a list.

## A note on customer accounts and guest checkout

A worry that stops people using segments is "but my customers check out as guests, they do not have accounts".

That does not matter here. Shopify creates a customer record from the email on every order, account or not. So guest buyers still land in the segment. As long as an order exists for the product, the buyer is on the list. You do not need to force account creation to make this work.

## What to check if your segment is empty

If you build the segment and it comes back empty, run through these.

- **Spelling of the product name.** In the plain-English box, the product name has to match. If unsure, use the exact filter with the product ID instead.
- **Test orders do not count.** Orders placed while your payment gateway was in test mode may not count toward a customer's purchases, so a test order will not populate the segment. Use a real order to confirm.
- **Guest checkouts still count.** You do not need customers to have accounts. As long as an order exists for that product, the buyer shows up.
- **Give it a moment.** A brand new order can take a short while to be reflected in a segment.

## The short version

Use a customer segment, not a repeated CSV export. Go to Customers > Segments > Create segment, describe it in plain English like "customers who bought Autumn Pottery Workshop", and save it. It is a live list that updates itself, and it opens in the Shopify mobile app under Customers > Segments, so you can check attendees from your phone.

Segments match at the product level, so if your dates are variants, either make each date its own product and one segment each, or filter the Orders page by variant for a quick look.


---

---
title: Shopify Different Image for Mobile and Desktop (No Code)
description: Sense crops one hero image differently on desktop and mobile. Here is the no-code way to show a landscape banner on desktop and a portrait banner on phones, with nothing cut off.
---

## The problem

A merchant asked about this on the Shopify Community. They run the Sense theme, and they wanted a landscape hero banner on desktop and a portrait hero banner on mobile.

That sounds simple. It is not, with one image.

They designed two images. A wide one for desktop. A tall one for phones. When they loaded the same image into the banner, Shopify cropped it to fit each screen. The desktop version looked fine. The phone version had the important part cut off, or the other way around.

They tried Shopify Sidekick. It gave them code snippets they did not want to paste. So the banner still looked wrong on half their traffic.

I reproduced this on a Sense test store. Here is the fix, and it needs no theme file editing at all.

## Why Sense crops your image on one screen

This is the part every quick answer skips, so let me explain it plainly.

The Image banner section in Sense has one image slot. One image. That single image has to cover every screen size, from a wide desktop monitor to a narrow phone held upright.

To fill the space, the theme scales the image and then crops whatever does not fit. On a wide desktop the banner area is short and wide, so a landscape photo sits in it nicely. On a phone the banner area is tall and narrow, so that same landscape photo gets zoomed in and the sides get chopped off.

There is no "mobile image" field in the Sense Image banner. So you cannot just upload a second picture for phones. One slot, one image, cropped to taste.

That is the whole issue. You are not missing a setting. The setting does not exist in this section.

Once you see it that way, the answer is obvious. You do not need one image that survives both shapes. You need two images, and a way to show the right one on the right screen.

## The fix: two banners, one shown per screen

The trick is to build the hero twice.

You add two Image banner sections. You put the landscape image in one and the portrait image in the other. Then you add one line of Custom CSS to each, so the desktop banner hides on phones and the mobile banner hides on desktop.

Every visitor sees exactly one banner, the one made for their screen, and neither one is cropped.

No theme files. No developer. It is all in the theme editor, which is why I like this route for a merchant who does not want to touch code.

Here is each step.

### Step 1. Add two Image banner sections

Open the theme editor. On the page where you want the hero, click **Add section** and choose **Image banner**. Do it twice, so you end up with two Image banner sections stacked on top of each other.

![Add section, choose Image banner, and add it twice in the Shopify theme editor](/images/blog/shopify-different-image-mobile-desktop/01-add-image-banner-section.png)

In the editor sidebar you will now see two Image banner sections. I renamed the headings while testing so I could tell them apart, one for the desktop banner and one for the mobile banner. You do not have to, but it helps.

### Step 2. Put one image in each

Click the first Image banner and set its image to your **desktop landscape** image.

Click the second Image banner and set its image to your **mobile portrait** image.

That is it for the images. Right now both banners show on every screen, stacked. That is expected. The next step hides the wrong one on each device.

### Step 3. Add one line of Custom CSS to each banner

Each Sense section has a **Custom CSS** box in its settings. That box only styles that one section, which is exactly what we want.

Open the desktop banner's settings, scroll to **Custom CSS**, and paste this. It hides the desktop banner on phones.

```css
@media screen and (max-width: 749px) { .banner { display: none; } }
```

Open the mobile banner's settings, scroll to **Custom CSS**, and paste this. It hides the mobile banner on desktop.

```css
@media screen and (min-width: 750px) { .banner { display: none; } }
```

![The Custom CSS box on a Sense Image banner with the media query hide rule pasted in](/images/blog/shopify-different-image-mobile-desktop/02-custom-css-banner-hide-rule.png)

Then click **Save**.

If Save stays greyed out after you paste, click into the box, press Space, then Backspace. That nudges the editor into noticing the change.

### The result

On desktop, visitors get the landscape image, full width, nothing cropped.

![The Sense storefront on desktop showing the landscape banner at full width](/images/blog/shopify-different-image-mobile-desktop/03-desktop-landscape-banner.png)

On a phone, visitors get the portrait image, nothing cropped.

![The Sense storefront on mobile showing the tall portrait banner with nothing cut off](/images/blog/shopify-different-image-mobile-desktop/04-mobile-portrait-banner.png)

I tested this on a Sense store. Desktop loaded the wide image, the phone loaded the tall image, and neither one was cut off. That is the whole goal.

## Keep the heading, text and buttons in sync

There is one catch with the two-banner approach. You now have two separate banners, so any text lives in two places.

Set the same heading, the same body text and the same buttons on both banners. Otherwise you will edit the desktop headline, forget the mobile one, and end up with two different messages depending on the device.

Make it a habit. Every time you change the wording, change it on both.

If keeping two copies of the text in sync sounds annoying, the code alternative further down keeps everything in one section. It just needs a small theme edit.

## What breakpoint does Sense use, and why 749 and 750

The two numbers in the CSS are not random.

Sense treats **750px** wide as the line between phone and desktop. Below that is the mobile layout. At 750px and above is the desktop layout.

So the rules pair up cleanly:

- The desktop banner hides at **max-width: 749px**, meaning 749px and below.
- The mobile banner hides at **min-width: 750px**, meaning 750px and above.

There is no gap and no overlap. At any width, exactly one banner is hidden and exactly one shows. If you used the same number on both, say 750 on each, you would get a one-pixel width where both show or both hide. The 749 and 750 split avoids that.

If you ever want the switch to happen at a different width, change both numbers together and keep them one apart. For example 989 and 990 would switch closer to tablet width.

## Does this affect my other sections

No. This is the nice part about the Custom CSS box on a section.

The box says it "adds custom styles to this section only." That is literally true. The rule you paste is scoped to that one banner. It cannot reach your header, your footer, your product grid or any other section.

The `.banner` class in the rule refers to the banner inside that section. Even though other sections might use similar class names, the Custom CSS box wraps your rule so it only applies where you pasted it. So you can hide one banner without any risk to the rest of the page.

That is why I reach for this before editing theme files. The blast radius is one section.

## Alternative 1: add a mobile image field to the section

If you are comfortable editing theme code, or you have a developer, you can add a second image field to the Image banner section instead of duplicating the whole section.

The idea:

- Open `sections/image-banner.liquid` in the code editor.
- Add a second image picker setting in the section schema, something like `mobile_image`.
- In the section markup, output both images inside a `picture` element, or output the mobile image with a class that only shows on small screens and hides the desktop image there.

The upside is that the heading, text and buttons stay in one place, so there is nothing to keep in sync. You get a clean "Desktop image" and "Mobile image" pair right in the section settings.

The downside is that it is a theme file edit. Theme updates can overwrite it, and a typo in the schema can break the section. If you go this way, duplicate the theme first so you have a safe copy.

I would only pick this route if you plan to reuse the two-image banner in many places. For a single hero, the no-code two-section method is faster and safer.

## Alternative 2: one Custom Liquid section with a picture element

There is a middle path that needs no theme file edit but still keeps everything in one block.

Add a **Custom Liquid** section and use a `picture` element. A `picture` element lets the browser pick the right image by screen width, and the browser only downloads the one it uses.

```html
<picture>
  <source media="(max-width: 749px)" srcset="MOBILE_IMAGE_URL">
  <img src="DESKTOP_IMAGE_URL" alt="Your banner description">
</picture>
```

You upload both images to Settings, Files, copy their URLs, and drop them in. The browser loads the portrait image on phones and the landscape image on desktop.

The upside over Alternative 1 is that it needs no theme file editing, so a theme update will not wipe it.

The downside is that you lose the built-in banner controls. There is no heading field, no button field, no overlay setting. You would build any text and buttons yourself in the same block. For a plain image hero this is fine. For a hero with a call to action, the two-section method keeps the native controls, which most merchants prefer.

## Which method should you use

Pick based on how much you want to touch, and how often you will reuse it.

| Your situation | Use |
| --- | --- |
| No code, single hero, want native heading and buttons | Two Image banner sections plus the Custom CSS rule |
| No code, plain image hero, no theme edit | Custom Liquid with a picture element |
| Comfortable with code, reusing everywhere | Add a mobile image field to image-banner.liquid |

For the merchant who asked, the two-section method won. It is all in the theme editor, it keeps the banner's heading and buttons, and it survives theme updates because it changes no files.

## A quick glossary

These terms come up a lot, so here they are in plain words.

**Section.** A big building block of a page, like the Image banner, a Featured collection, or a Rich text block. You add and remove sections in the theme editor. Each Sense section has its own Custom CSS box.

**Block.** A smaller piece inside a section. For example, a heading, a paragraph and a button inside one Image banner are blocks. Blocks live inside sections.

**Breakpoint.** The screen width where a layout switches from one arrangement to another. In Sense the main breakpoint is 750px. Below it you get the phone layout, at and above it you get the desktop layout. The CSS rules above hook onto that breakpoint.

**Media query.** The `@media screen and (max-width: 749px)` part of the CSS. It means "only apply these styles when the screen is 749px wide or smaller." That is how one rule can hide a banner on phones but leave it alone on desktop.

## What to check if it did not work

**Both banners still show, stacked.** The Custom CSS did not save. Reopen each banner's Custom CSS box, confirm the rule is there, and Save again. Nudge Save with Space then Backspace if it is greyed out.

**The wrong banner shows on your phone.** You pasted the rules into the wrong banners. The **max-width: 749px** rule goes on the desktop banner. The **min-width: 750px** rule goes on the mobile banner. Swap them if they are reversed.

**Both banners hide at one width.** You used the same number in both rules. Use 749 in one and 750 in the other so they never overlap.

**It looks right in the editor but wrong on the live site.** The theme editor preview is not always a true phone width. Check on a real phone, or resize your browser window until it is narrower than 750px.

**Your images still look cropped.** That is a separate thing. Each banner still crops its own image to the banner height. Set the banner height to a size that suits your image, and upload an image close to the shape you want. The two-banner trick fixes device switching, not the crop inside a single banner.


---

---
title: Show a Different Menu on Different Pages in Shopify
description: In Shopify's Dawn theme you can show one navigation menu on some pages and a different menu on others, driven by a page metafield. Here is the exact Liquid, tested, plus how to set the metafield up.
---

## The problem

A merchant asked about this on the Shopify Community, and it is a common wish once a store grows past a handful of pages.

They wanted one header menu on some pages and a different header menu on others. Their example was a normal retail menu for most of the site, and a separate wholesale menu on a set of commercial pages.

They already had the right instinct. They created a true/false page metafield to mark which pages should get the alternate menu, and they tried to swap the menu in the theme code based on it. But it would not work, and they could not see why.

This is a good problem to walk through, because the idea is completely sound. Only two small details were stopping it. I reproduced the whole thing on a Dawn test store, fixed it, and the fix is short.

Here is a normal page keeping the store's default menu.

![A normal Shopify page in Dawn showing the default header menu](/images/blog/shopify-different-menu-on-different-pages/01-normal-page-default-menu.png)

And here is a page that has the metafield turned on, showing a completely different menu in the same header.

![A Shopify page with the metafield turned on showing an alternate wholesale menu](/images/blog/shopify-different-menu-on-different-pages/02-page-metafield-alternate-menu.png)

Same theme, same header, two different menus. The only difference between the two pages is a single true/false field.

## Why the first attempt did not work

There were two reasons, and both are easy to miss.

**Reason one: Dawn does not render the header menu from one file.** It uses three separate snippet files, and which one runs depends on your header layout and the visitor's device.

- `snippets/header-dropdown-menu.liquid` draws the desktop menu when your header uses the dropdown style.
- `snippets/header-mega-menu.liquid` draws the desktop menu when your header uses the mega-menu style.
- `snippets/header-drawer.liquid` draws the mobile menu, and also the desktop menu if you use the drawer layout.

So if you only edit one of them, the menu only swaps in some places. Edit only the dropdown file and the swap never reaches mobile visitors, because mobile reads from the drawer file. This is what makes people think their code is broken when it is actually running fine in a file they are not looking at.

**Reason two: a true/false metafield is a real boolean, not text.** The first attempt compared the field to the string `'true'` with quotes. A true/false metafield does not return the word "true". It returns an actual yes/no value. Comparing a real yes/no value to a piece of text never matches, so the condition was always false and the alternate menu never appeared.

Drop the quotes and compare to `true` with no quotes, and it starts working.

## What you need before you touch the code

The code assumes two things already exist. Set these up first or nothing will render.

**A menu to switch to.** Build your alternate menu under Content, then Menus, in your Shopify admin. Give it a title like "Wholesale menu". Shopify turns that title into a **handle**, which is the machine name the code uses. "Wholesale menu" becomes the handle `wholesale-menu`. You will need that exact handle in a moment.

**A page metafield to flag the right pages.** This is the on/off switch. I will cover exactly how to create it further down, because it is the part most people have not done before.

Once both exist, the code below reads them and does the swap.

## The fix, step by step

You will edit the three header files listed above. In each one you add a small block at the very top, then change one line.

Here is what you are pasting and the one line you are changing.

![The Liquid code to paste at the top of each header file, and the one line to change](/images/blog/shopify-different-menu-on-different-pages/03-liquid-code-to-paste.png)

**Step one.** Open your theme code editor. From your admin go to Online Store, then Themes, then the three-dot menu on your theme, then Edit code.

**Step two.** Open `snippets/header-dropdown-menu.liquid` and paste this block at the very top of the file, above everything else:

```liquid
{%- if template.name == 'page' and page.metafields.custom.commercial_menu.value == true -%}
  {%- assign header_menu = linklists['new-menu'].links -%}
{%- else -%}
  {%- assign header_menu = section.settings.menu.links -%}
{%- endif -%}
```

**Step three.** In that same file, find the line that loops over the menu near the top. In Dawn it reads:

```liquid
{%- for link in section.settings.menu.links -%}
```

Change it to:

```liquid
{%- for link in header_menu -%}
```

**Step four.** Do the same two edits in `snippets/header-mega-menu.liquid` and `snippets/header-drawer.liquid`. Same block at the top, same one-line change to the loop. All three files, or the swap will be incomplete.

**Step five.** Save each file.

That is the whole change. On a page where the metafield is on, the header now reads from your alternate menu. On every other page it reads from the menu you picked in the theme editor, exactly as before.

A few things to match to your own store:

- Replace `new-menu` in the code with your alternate menu's real handle, the one you noted earlier.
- Replace `commercial_menu` with your metafield's key if you named it something else.
- `template.name == 'page'` keeps the swap on pages only, so products, collections and your home page always show the normal menu.

## How to set up a page metafield in Shopify

This is the piece the original poster had already done, but most people have not, so here it is in full. It comes in two parts: define the field once, then flip it on per page.

**Define the field once.**

1. Go to Settings, then Custom data.
2. Click Pages in the list of things you can add fields to.
3. Click Add definition.
4. Give it a name, such as "Commercial menu".
5. Check that the namespace and key land on `custom` and `commercial_menu`, so it matches `page.metafields.custom.commercial_menu` in the code.
6. For the type, choose True or false.
7. Save.

**Turn it on per page.**

1. Go to Content, then Pages, and open a page that should get the alternate menu.
2. Scroll to the bottom. There is now a Metafields section with your new True or false toggle.
3. Turn it on and save.
4. Leave it off on every normal page.

That toggle is exactly what the code checks. Pages with it on get the alternate menu. Everything else falls back to the default, with no extra work.

## What is a linklist in Shopify

The code uses the word `linklists`, and it throws people, so it is worth a plain definition.

A **linklist** is Shopify's internal name for one of your navigation menus. Every menu you build under Content, then Menus, becomes one linklist, and you reach it by its handle.

Your main navigation, usually titled "Main menu", has the handle `main-menu`, so the code refers to it as `linklists['main-menu']` or `linklists.main-menu`. A menu you called "New Menu" gets the handle `new-menu`, so it is `linklists['new-menu']`.

Each linklist has a `.links` property, which is the actual list of menu items. So `linklists['new-menu'].links` means "the items inside the New Menu", and that is the list the header loops over to draw the menu.

Two things trip people up here:

- **The handle is what the code uses, not the title.** You can see the handle under the menu title when you edit the menu.
- **Hyphenated handles need square brackets.** `linklists.new-menu` breaks, because Liquid reads the hyphen as a minus sign. `linklists['new-menu']` is the safe form, which is why the code uses brackets.

Dawn's header normally reads `section.settings.menu.links`. That is just whichever menu you picked in the theme editor's Header section. It is the same kind of list, chosen through a setting instead of named directly in code.

## What to check if it still does not swap

If you made the edits and the menu is not changing, run through this short list.

- **The menu handle is wrong.** If `new-menu` in the code does not match a real menu handle, the alternate menu comes back empty and you see no items. Open the menu in admin and confirm the handle.
- **You are testing on the wrong page type.** The condition only fires on pages. It will not swap on a product, a collection, or the home page by design. Test on an actual page with the toggle on.
- **The metafield is off, or on the wrong page.** Open the page and confirm the True or false toggle is on and saved.
- **You only edited one file.** Check on both desktop and mobile. If it swaps on desktop but not mobile, you skipped the drawer file. If it does not swap on desktop, you edited the file for the wrong header style.
- **You kept the quotes.** The comparison must be `== true` with no quotes. `== 'true'` never matches a real true/false field.

## Does this work on other themes

The exact file names above are Dawn's. The idea works on any theme, but the file and the setting name change.

Every theme renders its header menu from some file and some menu setting. The pattern is always the same: at the top of that file, choose between your alternate menu and the theme's normal menu based on the page metafield, then loop over your chosen list instead of the theme's default one.

If you are not comfortable editing theme code at all, a navigation or mega-menu app can give you per-page or rule-based menus through a visual editor, without touching Liquid. Popular options include Buddha Mega Menu, Meteor Mega Menu, and qikify Smart Menu. For a single true/false swap like this, though, the theme edit above is lighter and has nothing extra to pay for or load.

## The short version

Dawn draws the header menu from three files, so the swap goes in all three. A true/false metafield is a real boolean, so compare it with `true` and no quotes. Set up an alternate menu and a page metafield first, add the small block plus the one-line loop change to each header file, and pages you flag get their own menu while everything else stays the same. I tested this end to end on a Dawn store, on both desktop and mobile.


---

---
title: "Shopify Digital Downloads App: Fix the Download Button"
description: "Buyers keep emailing to say they cannot download the file they just paid for. Here is what the Shopify Digital Downloads app actually sends them, why the Download Now link looks dead, and the four changes that stop the emails."
date: "2026-09-12"
---

## Buyers say they cannot download the file they just bought

A merchant selling printable mahjong cards described it perfectly on the Shopify Community: *"The gray bar doesn't look like they can click on it. We get several emails with confused customers thinking that they cannot download the item."*

That is not a broken app. The file is there, the link works, and the download is one click away. The click target just does not look like a click target.

I installed Shopify's own Digital Downloads app on a test store, attached a PDF to a product, placed a real order and followed the file all the way to the buyer. Here is what actually reaches them, and the four changes that stop the support emails.

![The Download Now link with the app's default styling, and the same link after adding CSS](/images/blog/shopify-digital-downloads-app-download-button/01-shopify-download-button-plain-text-vs-styled.png)

Top: what most themes render. Bottom: the same link, after the one CSS rule further down this page.

## The app is called Digital Products now

Small thing, but it wastes people's time in the admin. Shopify's free first-party download app was called **Digital Downloads** for years. It is now listed as **Shopify Digital Products**, and it appears in your Apps menu as **Digital Products**. The App Store address is still `/digital-downloads`, so old links and old tutorials still work.

Everywhere below, "the app" means that one. It is free, it is made by Shopify, and it has around 1,200 reviews at 4.7.

## What your buyer actually receives

This is the part almost every tutorial skips, and it is the whole reason for the confusion.

A digital order sends **two separate emails**:

1. **Order confirmation.** Shopify's normal receipt. No download in it.
2. **"Your downloads are ready".** Sent by the app, a few seconds later.

The second email is **plain text only**. No buttons, no styling, nothing you can design. The download arrives as a bare web address on its own line, like this:

```
Pattern Pack 2026 (PDF)

pattern-pack-2026.pdf
Download Link: https://yourstore.com/a/downloads/-/7b47ec72cc/35c0646f09
```

![The download email exactly as the customer receives it, with the Resend button in the app](/images/blog/shopify-digital-downloads-app-download-button/05-download-email-as-received.png)

Then, and this is the bit people do not expect, **that link does not download anything directly**. It opens a page on your own store, wearing your own theme, with a Download Now link on it. So the buyer has to click twice: once in the email, once on the page.

If the second click does not look like a click, they stop there and email you.

## Why the Download Now link looks dead

The download page is drawn by the app but rendered inside your theme. The app supplies a small block of styling with it, and the download control is a single link:

```html
<a class="sdd-download-button" href="...">Download Now</a>
```

The app's own styling for that link ends with this line:

```css
.sdd-download-button {
  font-weight: bold;
  font-size: 24px;
  padding: 12px 24px;
  background: revert;
}
```

`background: revert` means "whatever the theme would normally give a plain link". The app is deliberately staying out of your theme's way. The catch is that most themes give a plain link inside page content nothing at all.

I checked this against a real store running Fashionopolism. The Download Now link came out with a transparent background, zero border, no underline, and the same dark grey as the body text. It renders as a bold word sitting under the file name, indistinguishable from a caption.

That is the gray bar people describe. Nothing is broken. There is simply no button there.

## Fix 1: give the download link a real button

One rule, in a box Shopify gives every modern theme. No theme files, no code editor, nothing that survives a theme update badly.

Go to **Online Store > Themes > Customize**, click the **gear icon** for Theme settings, scroll to the bottom and open **Custom CSS**.

![The Custom CSS box in Shopify theme settings](/images/blog/shopify-digital-downloads-app-download-button/06-theme-settings-custom-css.png)

Paste this and press Save:

```css
.sdd-download-button {
  display: inline-block;
  background: #b11116;
  color: #ffffff !important;
  padding: 16px 40px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 20px;
}

.sdd-download-button:hover {
  opacity: 0.9;
}
```

Change `#b11116` to your own button colour. If you do not know it, open any product page, right-click your Add to cart button and pick Inspect, and read the background colour off it.

Two things worth knowing:

- **Custom CSS applies to your whole online store**, and the download page is part of your online store. That is exactly why this works without touching any app setting.
- The `!important` on `color` is there because some themes set link colours with a more specific rule of their own. Leave it in.

If your theme has no Custom CSS box (anything built before late 2021), the same rule goes at the bottom of `base.css` or `theme.css` under **Online Store > Themes > ... > Edit code > Assets**.

## Fix 2: put the download on the Thank you page

The best download email is the one the buyer never has to hunt for. The app can put the file on the page the buyer is already looking at when they finish checkout.

Go to **Apps > Digital Products > Settings**. Under **Digital products at checkout**, find **Digital product at checkout in your online store** and click **Add**.

![Digital Products app settings, showing the email templates and the checkout download block](/images/blog/shopify-digital-downloads-app-download-button/03-digital-products-app-settings.png)

That adds a Digital downloads block to your **Thank you** and **Order status** pages. Most buyers download there and then, and never open the email at all.

This is off by default, so if you have never been into this screen, it is off on your store right now.

## Fix 3: rewrite the download email so it explains itself

Same Settings screen, top box: **Digital product ready email**.

![The Download ready email template, with subject and body fields](/images/blog/shopify-digital-downloads-app-download-button/04-download-ready-email-template.png)

The subject and body are both yours to edit. The body is plain text, so there is no button to add. What you can do is stop relying on the link looking clickable and just say what happens:

```
Your download is ready.

Open the link below. It opens a page on our store with a
big Download Now button on it. Click that button and the
file saves to your device.

If you are on a phone, the file lands in your Downloads
folder or in Files.
```

Two small pieces of Shopify's template language are worth keeping when you rewrite it:

- `{{customer.first_name}}` prints the buyer's first name.
- The block starting `{% for attachment in attachments %}` repeats once per file on the order. Leave that loop intact or buyers who bought two files will only get one.

There is a **Revert to default template** button in the top right if you make a mess of it.

## Fix 4: set the expectation before they buy

The merchant who raised this already does it on one product. Their free Charleston card description says: *"You will first get a confirmation email and then a separate email with the download."*

That single sentence pre-empts the whole problem, because the confusion is almost always "I got a receipt and no file". Their paid PDF listing has no line like it.

Put it on **every** digital product, not just the ones you remembered. Something like:

> This is an instant download. After checkout you will get two emails: your receipt first, then a separate email with the download link.

## How to add digital downloads to Shopify in the first place

If you are setting this up rather than fixing it, the whole flow is three steps.

1. Create the product as normal, then **untick Shipping > This is a physical product**. The app only lists products that do not need shipping.
2. Open **Apps > Digital Products**, find the product in the list and click **Add asset**.
3. Choose **File** and upload, or **Link** if the "download" is really a link to somewhere else, such as a course or a shared folder.

![Attaching a file to a product, with the fulfilment and access limit settings](/images/blog/shopify-digital-downloads-app-download-button/02-digital-products-add-asset-and-download-limit.png)

Each attached file carries two settings, shown as chips under the file list:

- **Fulfilled: Automatically** sends the download email the moment the order is paid and marks the order fulfilled. Switch it to Manually if you want to approve each one.
- **Access limit: Unlimited** is the default. Set a number here if you want the link to expire after, say, three downloads.

You can mix a file with a physical product too. A pattern with a printed booklet, a book with its audio version.

## Can you sell digital downloads on Shopify without an app?

Not really, and you should not try. Shopify has no built-in file delivery, so the file has to come from somewhere.

The three routes people attempt:

- **The free Digital Products app.** Made by Shopify, no monthly fee, hosts the files, handles the emails, tracks downloads. This is the right answer for most stores.
- **A link in the order confirmation or thank-you page.** Works, but the link is public forever and gets shared. Fine for a free lead magnet, bad for anything you charge for.
- **Emailing files by hand.** Fine at two orders a week, miserable at twenty.

If you outgrow the free app, the usual paid alternatives are **Digital Downloads PDF Pendora** (free, about 1,200 reviews), **Digital Downloads Filemonk** and **Sky Pilot**. They ship their own styled download page, which means you skip Fix 1 entirely, plus extras like PDF stamping and drip delivery.

## Someone still cannot get their file

Work down this list before you email the file manually.

**They say they never got the email.** Open **Apps > Digital Products > Orders**, find the order and click **Resend**. The same email goes out again. Check the address on the order first, since a typo at checkout is the single most common cause.

![The app's order screen, with Resend, the download counter and Deactivate](/images/blog/shopify-digital-downloads-app-download-button/07-digital-products-order-resend-and-counter.png)

**They hit the download limit.** The order row shows a counter like `2 / Unlimited`. If it is capped and they have used it up, raise the limit on the product or resend.

**The link says the file is not found.** The asset was removed or replaced after the order. Re-upload it and use Resend.

**They clicked and nothing happened.** Usually a phone. The file downloaded straight into Files or Downloads with no prompt. Ask them to look there before assuming it failed.

**They want it deactivated.** The order screen has a Deactivate control per file, which kills that buyer's link. It is reversible.

## Two things people mix up

**The app's email is not your order confirmation.** Editing **Settings > Notifications > Order confirmation** in the Shopify admin does nothing to the download email, and vice versa. They are two templates in two different places. The order confirmation is full HTML and you can style it freely; the app's download email is plain text and you cannot.

**The download page is not an app page.** It lives on your domain, under `/a/downloads/`, and it renders with your header, your footer and your fonts. That is why your theme's CSS reaches it, and it is also why it looks half-finished if you have never styled it.

## What changed on my test store

Concrete numbers from the run, so you know what to expect:

- Order paid, two emails delivered within 6 seconds of each other.
- The download email arrived as 8 lines of plain text with one bare URL.
- The Download Now link computed to `background-color: rgba(0, 0, 0, 0)`, `border-width: 0px`, `text-decoration: none`. After the CSS above, a solid filled button at 16px by 40px padding.
- The app's order screen showed the download counter incrementing with each visit to the link.

The gray bar is a styling gap, not a bug, and it takes one rule to close.


---

---
title: "Shopify Discount Limit: One Code for More Than 100 Products"
description: "Shopify stops you at 100 items when a discount applies to specific products. There is no setting to raise it, but you do not need one. Point the discount at a collection and one code covers thousands of products. Tested on a store, with the B2B route too."
---

## The problem

A merchant posted this on the Shopify Community. They run a franchise supply store, selling preschool kits to authorised partners, with customised bundles for each one. They wanted a single discount code to apply to around 2,000 product variants.

Shopify would not let them. As soon as they added more than 100 items to the discount, the admin threw an error and refused to save. Using several codes to cover the catalog was not practical, so they asked Shopify to raise the limit or let them upload eligible variant IDs in bulk.

The limit is real and there is no switch to lift it. But the goal, one code across a large catalog, is completely doable today. You just point the discount at the products a different way. I set the whole thing up on a test store to confirm it, and this post walks through it.

## Why Shopify caps the discount at 100 products

When you create a code or automatic discount and set **Applies to** to **Specific products**, the picker holds a fixed number of items. Add too many products or variants and the discount stops saving.

That cap sits on the hand-picked list only. It is not a limit on how many products a discount can ever touch. It is a limit on how many individual items you can staple to one discount by hand.

The way around it is to stop stapling items one by one. A **collection** is a single object that can hold thousands of products. When a discount applies to a collection, Shopify stores one reference, the collection, not 2,000 references. The cap never comes into play, because from the discount's point of view you added one thing.

So the entire fix is: put the eligible products in a collection, then apply the discount to that collection instead of to each product.

## The fix: point the discount at a collection

### Step 1: tag the products you want to include

You could add products to a collection by hand, but with 2,000 items that is its own chore. Tagging scales better and keeps the collection updating itself.

- Open **Products**, select the ones this discount should cover, and use the bulk **Add tags** action. Give them a tag like `franchise-a-kit`.
- If the list is long, do it with a CSV instead. Export the products, fill the **Tags** column, and re-import. That is your bulk upload, handled through a file rather than clicking each item.

A tag is just a label. A product can carry several, so the same item can belong to more than one discount group without any conflict.

### Step 2: build an automated collection from that tag

Now create a collection whose membership is driven by the tag, so you never maintain the list by hand.

- Go to **Products > Collections > Create collection**.
- Set the collection type to **Automated**.
- Add the condition **Product tag is equal to** and enter your tag, `franchise-a-kit`.

Every product with that tag joins the collection on its own. Tag a new product next month and it appears here with no extra step. Remove the tag and it drops out.

![An automated Shopify collection with the condition Product tag is equal to franchise-a-kit, showing five products matched](/images/blog/shopify-discount-100-product-limit/01-automated-collection-by-tag.png)

### Step 3: set the discount to apply to that collection

With the collection built, the discount is quick.

- Open your discount under **Discounts**, or create a new code discount.
- Set the discount value, for example 10% off.
- Under **Applies to**, choose **Specific collections**.
- Search for your collection and add it.

There is no 100 item cap on this screen. One collection covers every product inside it, however many that is.

![A Shopify code discount with Applies to set to Specific collections and the Franchise A Kit collection selected](/images/blog/shopify-discount-100-product-limit/02-discount-specific-collections.png)

Save it, and you have one code that discounts the whole group. If you split your catalog by franchise, make a collection per franchise and add several collections to the same discount, or keep them on separate codes. Either way the item cap is gone.

I tested this end to end on a store. A code scoped to a five product collection took 10% off every product in the collection and nothing outside it. The setup screen never asked me to trim the list.

## The one caveat worth knowing

A collection groups **products**, not variants. So a discount on a collection applies to the whole product, and every variant of an included product becomes eligible.

For most catalogs that is exactly what you want. Where it matters is if only some variants of a product should be discounted and others should stay full price. A collection cannot split a product like that.

If that is your case, you have two options. Keep the discounted variants as their own product so the collection can include them cleanly. Or use the B2B route below, which prices at the variant level.

## If you run B2B, use a catalog price list instead

The merchant in the thread was already on Shopify B2B, with each franchise partner limited to their own products. That detail changes the best answer, because B2B has a tool built for exactly this and it sidesteps discount codes entirely.

In B2B, each company buys from a **catalog**, and a catalog carries a **price list**. That price list is where franchise pricing belongs.

- Attach a price list to the franchise's catalog and set the reduced prices there. Prices are set per variant, with no 100 item limit.
- Edit the prices in bulk with a **CSV import**. Two thousand variants is one upload, not a manual selection. This is the bulk upload the merchant asked for, and it already exists.
- Only that franchise sees those prices. There is no code to hand out, nothing for a customer to type, and nothing to leak to another partner.

For franchise-specific pricing this is cleaner than a shared coupon. The right price simply shows when that company logs in. A coupon is better when you want a temporary, promotional discount that anyone eligible can enter at checkout. Match the tool to the job: catalogs for standing partner pricing, a collection-scoped code for a sale.

## When an app makes sense

The collection method is free and covers most cases. Reach for an app when you want scheduled bulk sales across many groups, tiered or volume pricing, or wholesale pricing tables that go beyond what native B2B offers. A few well-known options:

- Discounty: Bulk Discount Sales
- Shopacado, Volume Discounts
- BSS B2B Wholesale Pricing

None of these are required to beat the 100 item cap. They earn their place when the pricing logic itself is more than a flat percentage off a group.

## About the feature request

The merchant also asked Shopify to raise the limit and wanted a reference number. Worth knowing: a Community post is not a tracked request queue and does not return a ticket number. To actually file a product request, use the feature request form in the Help Center, or raise it with your Plus support contact, who can log it internally. In the meantime the collection method removes the blocker today.

## The short answer

- The 100 item cap only applies when a discount targets **Specific products**.
- Put the products in a collection and apply the discount to the **collection**. One code, thousands of products, no cap.
- Use an **automated collection by tag** so the list maintains itself, and tag in bulk with a CSV.
- Collections discount whole products, so every variant of an included product is eligible.
- On **B2B**, a **catalog price list** prices per variant, imports by CSV, and stays private to each company. That is the better fit for standing franchise pricing.

The limit looks like a wall in the discount editor. It is really just a nudge to group your products first, which is a better way to run a large catalog anyway.


---

---
title: "Shopify Discount Combinations: How to Stack Discounts"
description: "A discount code does not stack on top of your automatic discount. It replaces it, and nothing on the page says so. Here is the Combinations setting that fixes it, and where the fix usually stalls. Tested on a live store."
---

## The problem

You have an automatic discount running. A shopper types a code at checkout. You expect the two to add up.

They do not. The code applies, the automatic discount is removed, and Shopify says nothing about it.

I set this up on a test store to watch it happen. One product in the cart, a Harbour Cotton Tee at \$40.

An automatic discount called "Autumn 10% off apparel" was already running. At checkout it took \$4 off. Total savings: \$4.

![Shopify checkout showing an automatic 10 percent discount taking 4 off a 40 cotton tee, with total savings of 4](/images/blog/shopify-discount-combinations/01-automatic-discount-only.png)

Then I applied a \$5 code called SAVE5.

![The same checkout after applying the SAVE5 code, showing only the 5 off and no sign of the automatic discount](/images/blog/shopify-discount-combinations/02-code-replaced-the-automatic-discount.png)

The automatic discount is not reduced, it is removed, and total savings dropped from a possible \$9 to \$5. Shopify shows no warning at either step, so the shopper believes they got the better deal and you believe both promotions are running.

## Why it happens

Shopify sorts every discount into one of three **classes**:

- **Product discount** - takes money off specific items
- **Order discount** - takes money off the whole order
- **Shipping discount** - takes money off delivery

By default, a discount refuses to run alongside any other discount. It does not matter whether one is automatic and one is a code. It does not matter that they are different classes. The default answer is no.

When two discounts both want to apply and neither allows the other, Shopify picks one and drops the other. That is the whole mechanism.

The setting that changes this is called **Combinations**, and it sits on the discount itself.

## Where the Combinations setting is

Open **Discounts**, click a discount, and scroll down. You will find a small card called Combinations with a sentence in it.

![The Combinations card on a Shopify discount, reading that the discount will not combine with other product, order or shipping discounts](/images/blog/shopify-discount-combinations/03-combinations-panel-closed.png)

The sentence reads: *"Autumn 10% off apparel won't combine with other product, order, or shipping discounts in the customer's cart."*

That is the default state on every discount you create. The card looks like a status message, so it is easy to read it and move on. It is not a status message. It is a control.

There is a small plus icon in the top right corner of that card. Click it.

![The Combinations popover open, showing checkboxes for Product discounts, Order discounts and Shipping discounts](/images/blog/shopify-discount-combinations/04-combinations-three-checkboxes.png)

Three checkboxes, headed "Allow this discount to combine with other discounts":

- **Product discounts** - Multiple can apply per order
- **Order discounts** - Multiple can apply per order
- **Shipping discounts** - Only one can apply per order (best value wins)

Read the small print under each one. Product and order discounts can pile up. Shipping is different: only one shipping discount ever applies, and the customer gets the best one.

## Where the fix usually stalls

Here is where most people stop, and why the fix still does not work for them.

My automatic discount is a product discount. My code SAVE5 is an order discount. So I ticked **Order discounts** on the automatic discount, saved it, and went back to checkout.

![Checkout with the code applied, still showing only the 5 off and no automatic discount](/images/blog/shopify-discount-combinations/05-one-side-ticked-still-fails.png)

Nothing changed. Still \$5 off. Still no automatic discount.

**Both discounts have to allow each other.** Permission is not one way. Ticking "Order discounts" on the product discount says *I am willing to run beside an order discount*. It does not give the order discount permission to run beside a product discount.

You can see this in the admin. After ticking one side, the Combinations card shows the class you allowed with a small count badge next to it. Mine read **0**. That number is how many discounts on the other side are set to combine back. Zero means the pairing is still broken.

So I opened SAVE5 as well, ticked **Product discounts** there, and saved. The count badge went from 0 to 2.

## What it looks like when it works

Same cart, same code, both sides ticked.

![Checkout showing the tee reduced from 40 to 36 by the automatic discount and a further 5 off by SAVE5, with total savings of 9](/images/blog/shopify-discount-combinations/06-both-discounts-applied.png)

Now the line item reads \$40.00 struck through, "AUTUMN 10% OFF APPAREL (-\$4.00)", and \$36.00. Below it, the order discount takes another \$5.00 off. Total savings: **\$9.00**.

Subtotal went \$40 to \$36 to \$31 before tax. Both discounts ran. That is the fix.

To recap the two edits:

1. On the product discount, tick **Order discounts**.
2. On the order discount, tick **Product discounts**.

Save both.

## Why is my discount code not working?

This is the same problem wearing a different hat, and it has a visible symptom you can look for.

When a shopper already has a discount applied and tries to add a second one that is not allowed to combine, Shopify does show a message. It looks like this:

![Checkout showing the message that SHIPFREE could not be used with your existing discounts](/images/blog/shopify-discount-combinations/07-couldnt-be-used-with-your-existing-discounts.png)

*"SHIPFREE couldn't be used with your existing discounts."*

I got that by applying a free shipping code while a \$20 order code was already on the cart. The free shipping code was set to combine with everything. The order code was set to combine with nothing. One closed door is enough.

So if a customer tells you a code "does not work", check this before you check anything else:

- Is another discount already on that cart? An automatic discount counts.
- Does **each** discount tick the other one's class?

That message only shows when the shopper adds a second **code**. When the conflict is between a code and an **automatic** discount, there is no message at all. The automatic one just disappears, which is exactly the case in the first two screenshots on this page.

## Can two discount codes stack on Shopify?

Yes, but only if they are in different classes and both allow each other.

Two discount codes of the same class cannot stack, no matter what you tick. Two order discounts will never both apply. The checkbox for "Order discounts" on an order discount means *combine with other order discounts on top of my own class*, and in practice Shopify still keeps one order-level reduction. The reliable combinations are:

- Product discount + order discount
- Product discount + shipping discount
- Order discount + shipping discount
- Product discount + product discount, when they hit different items

If you want a "10% off plus \$5 off plus free delivery" promotion, build it as three discounts in three different classes and tick every relevant box on all three. If you have not made the codes yet, start with [how to create a discount code in Shopify](/blog/shopify-create-discount-code).

## The class change when you pick "All products"

This one cost me a few minutes and it is worth knowing.

I first built the automatic discount as "10% off, applies to **all products**". Shopify classified it as an **order** discount, not a product discount. The admin labelled it "Amount off order".

Then SAVE5, also an order discount, could never stack with it.

The rule: a percentage or amount off that targets **all products** becomes an order discount. Point the same discount at **specific products** or **specific collections** and it becomes a product discount.

If two of your discounts refuse to combine and you cannot see why, open both and read the **Type** line in the right hand sidebar. If they both say the same class, that is your answer, and the fix is to re-target one of them rather than to tick more boxes.

## Do automatic discounts and codes combine?

They follow exactly the same rules. Automatic versus code makes no difference to combining. Only the class matters, and only the Combinations settings decide.

That surprises people because automatic discounts feel like a background setting rather than a discount. They are not. An automatic discount competes with a code the same way two codes compete.

One practical consequence: if you run a permanent automatic discount and then launch a campaign code, you have to go back and edit the automatic discount too. It will not pick up the new code on its own.

## How to check what is set, without opening every discount

Each discount page has a **Details** list in the right hand sidebar. The last-but-one line tells you the combination state in plain words:

- "Can't combine with other discounts" - nothing is ticked
- "Combines with product discounts" - product is ticked
- and so on for order and shipping

That line is faster to scan than opening the Combinations card, and it updates the moment you save. When I ticked Product discounts on SAVE5, the sidebar flipped from "Can't combine with other discounts" to "Combines with product discounts".

## Discount combinations and free shipping

Shipping is the one class with a hard limit. The checkbox itself says it: **only one shipping discount can apply per order, and the best value wins**.

So you cannot stack a "free shipping" code on top of a "\$5 off shipping" code. Shopify picks whichever is worth more to the customer and ignores the other.

You can, however, run a shipping discount alongside a product discount and an order discount at the same time, which is what most stores actually want.

There is a second, sneakier interaction between discounts and free shipping that has nothing to do with Combinations: if your free shipping comes from a **shipping rate** with a minimum order amount, a discount can drag the subtotal under that minimum and take the free shipping away. That one is covered in [how to offer free shipping on Shopify](/blog/shopify-free-shipping).

## What to check if it still is not stacking

Work through these in order. In my testing, the first two account for almost everything.

1. **Both sides ticked?** Open both discounts, not just the one you think is failing.

   The Discounts list has a Combinations column, so you can see at a glance which ones are set to stack:

![The Shopify Discounts list with a Combinations column, showing which discounts are set to combine with product, order and shipping discounts](/images/blog/shopify-discount-combinations/06-discounts-list-combinations-column.png)
2. **Same class?** Two order discounts, or two shipping discounts, will not both apply. Check the Type line.
3. **Did you save?** The Combinations popover stays open while you tick. The change is not live until you press Save in the top bar.
4. **Are both discounts active?** An expired or deactivated discount fails with no error, exactly like a blocked one.
5. **Do the conditions overlap?** A product discount limited to one collection and an order discount with a minimum spend can both be set to combine and still not both apply, simply because the cart does not satisfy both.
6. **Is one of them from an app?** App discounts follow the same Combinations settings, but the app has to have been built to expose them. If the Combinations card is missing on an app discount, that app does not support stacking.

## Product, order and shipping: which is which

Worth pinning down, because the whole system turns on it.

**Product discount.** Takes money off named items. In the admin it is created as "Amount off products". It shows on the line item at checkout, struck through, like "\$40.00 → \$36.00". Use it for "20% off jackets".

**Order discount.** Takes money off the cart total. Created as "Amount off order". It shows as its own row under the subtotal. Use it for "\$10 off orders over \$75".

**Shipping discount.** Created as "Free shipping". It strikes through the delivery charge. Use it for "free delivery this weekend".

Two of these are decided for you by what you target rather than by which menu item you picked, which is the behaviour described earlier. Target specific products or collections to get a product discount. Target everything to get an order discount.

## The main points
- A code does not stack on an automatic discount by default. It **replaces** it, with no warning.
- The control is **Combinations**, on the discount page, behind a small plus icon.
- **Both** discounts must tick each other's class. One side is not enough, and the count badge next to the class shows you when the other side is missing.
- Only one **shipping** discount ever applies. Product and order discounts can stack.
- A percentage off "all products" is an **order** discount. Point it at specific products or collections to make it a product discount.
- When a shopper reports a code "not working", check for another discount already on the cart before anything else.

Tested end to end on a store running Shopify's current admin, with the numbers above taken straight off the checkout.


---

---
title: "Shopify Discount Types: Amount Off Products vs Order"
description: Shopify has four discount types, and two of them work out a percentage in different ways. One rounds every single unit, the other rounds the order once. On low unit prices that difference is real money. Tested on a live store.
---

## Two discounts, same 10 percent, different totals

Set up a 10 percent code on a product that costs 0.15 a unit. Add 30 units to the cart. You expect 0.45 off.

Depending on which discount type you picked, you get 0.45 or you get 0.30.

Nothing in the discount screen warns you. The code applies, the cart updates, and the number is a third smaller than it should be.

The cause is the **discount type**, the choice Shopify makes you make before it shows you any settings. Most merchants pick one, never see the other, and never learn that the two calculate differently.

## The four Shopify discount types

Go to **Discounts > Create discount** and Shopify asks for the type first, before it shows you any settings.

![The Create discount screen for Amount off products, with the Type panel naming it a product discount](/images/blog/shopify-discount-types/02-create-discount-amount-off-products.png)

There are four:

- **Amount off products** - a set amount or percentage off chosen products or collections. Shopify files this as a *product discount*.
- **Amount off order** - a set amount or percentage off the order. Shopify files this as an *order discount*.
- **Buy X get Y** - buy some things, get other things cheaper or free.
- **Free shipping** - removes the shipping charge.

Each type can be a **discount code** the shopper types at checkout, or an **automatic discount** that applies on its own. That choice is separate from the type and does not change any of the maths below.


The two that matter here are the first two, because they are the two that can both express "10 percent off" and yet produce different totals.

## Why the type changes the amount

A product discount is attached to the **line item**, the row in the cart for one product. Shopify works out what the discount is worth for **one unit**, drops anything below a whole cent, then multiplies by the quantity.

An order discount is attached to the **order**. Shopify works out the discount against the **subtotal** and rounds that once.

Prices in Shopify carry two decimal places and no more. So the question is only ever where the rounding happens: before the multiplication, or after it.

At normal prices it never shows. Ten percent of 24.99 is 2.499, which rounds to 2.50, and the fraction of a cent goes unnoticed. At 0.15 a unit, ten percent is 0.015. Rounded down to the nearest cent that is 0.01, and a third of the discount is gone before the quantity is applied.

## Amount off products, tested

I set up a test product at 0.15 a unit, put it in a collection, and made a 10 percent **Amount off products** code scoped to that collection. Then I added 30 units to the cart.

![Cart with an Amount off products code: the unit price itself drops from 0.15 to 0.14](/images/blog/shopify-discount-types/03-amount-off-product-unit-price-discounted.png)

The cart shows what happened. The unit price itself is struck through and replaced: **0.15 becomes 0.14**. The line total is 30 times the new unit price, so **4.50 becomes 4.20**, and the discount is **0.30**.

Shopify did not ignore the quantity. It discounted one unit, rounded, and then multiplied.

It always rounds down, never up. I tried 0.19 a unit as well, where 10 percent is 0.019, and the unit price still dropped by exactly one cent.

## Amount off order, tested

Same store, same product, same 30 units, same 10 percent. The only change is the type: an **Amount off order** code.

![Cart with an Amount off order code: the unit price stays 0.15 and 0.45 comes off the subtotal](/images/blog/shopify-discount-types/04-amount-off-order-subtotal-discount.png)

The unit price stays at 0.15. The line total stays at 4.50. The discount appears as its own line under the cart totals, **0.45**, and the estimated total drops to 4.05.

That is the number most merchants expect, and it comes from rounding once at the end instead of thirty times along the way.

## Who this actually costs money

The loss only shows up when the per-unit discount lands on a fraction of a cent, which means one of these:

- **You sell by a small unit.** Fabric by the centimetre, cable by the foot, ribbon by the metre, beads by the gram. Unit prices sit in the 0.05 to 0.50 range, and quantities run into the hundreds.
- **Your percentage is small.** Five percent of 0.90 is 0.045, so the same rounding applies at a price that looks perfectly ordinary.
- **You run a high-quantity wholesale line.** The per-unit error is a cent, but the quantity multiplies it.

Work out the size of it before you change anything. Take your unit price, multiply by the percentage, and look at the third decimal place. If it is not zero, that fraction is what you lose on every unit.

At 0.15 and 10 percent you lose half a cent a unit. On a 300 unit roll that is 1.50 of discount the customer was promised and did not get.

## Fix 1: price by a larger unit

The cheapest fix costs nothing and needs no app. Change the unit so that price times percentage lands on a whole cent.

Instead of selling per 1 cm at 0.15, sell per 10 cm at 1.50. Ten percent of 1.50 is 0.15 exactly, and the discount comes out right.

I confirmed the same effect by moving the test product to 0.20 a unit, where 10 percent is 0.02 on the nose. The Amount off products code then gave the full 0.60 on 30 units with nothing lost.

The trade-off is that customers buy in 10 cm steps rather than any number of centimetres. If your cuts are usually round numbers anyway, this is the whole fix.

Update the product title and the unit label on the product page at the same time, so a customer ordering 30 does not expect 30 cm and receive 3 metres.

## Fix 2: use an order discount instead

If the discount is meant to apply to the whole basket anyway, switch the type to **Amount off order** and the rounding problem goes away on its own.

The catch is scope. An order discount applies to the order, so you cannot limit it to one collection the way a product discount can. If your promotion is "10 percent off everything", that is not a limitation. If it is "10 percent off fabric only", it is.

Minimum purchase requirements still work on an order discount, so "10 percent off orders over 50" behaves exactly as you would expect.

## Fix 3: an app or a discount function

If you need per-unit pricing, collection scoping and a code, all three at once, no built-in setting covers it.

What does cover it is a **discount function**, a small piece of custom code Shopify runs at checkout to work out a discount its built-in types cannot. It needs a developer, but the job itself is small: read the line subtotal, take the percentage, round once.

Apps exist that do the same thing. The useful question to ask any of them before you install it is whether it creates an **order** discount or a **product** discount. An app that applies its value at order level allocates across the subtotal and gets the right number. An app that creates a product discount inherits the same rounding you already have.

## How to tell which type a discount already is

You do not have to open a discount to check. The **Type** column on **Discounts** names it.

![The Shopify Discounts list showing the Type column: Amount off product on one code and Amount off order on another](/images/blog/shopify-discount-types/01-discounts-list-type-column.png)

Both codes in that screenshot are 10 percent off the same product on the same store. The only difference is the Type column, and that difference is worth 0.15 on a 30 unit cart.

The type is fixed once a discount is created. To change it you delete the discount and make a new one, which means the code stops working for anyone holding it, so pick the type before you print anything.

## Other reasons a discount gives the wrong amount

Rounding is not the only way a discount ends up smaller than planned. Two more are worth checking before you rebuild anything.

**A code can replace your automatic discount.** If you run an automatic discount and a shopper enters a code, Shopify applies one or the other unless both are set to combine with each other. The cart total changes to the code's value and nothing on the page says the automatic discount was dropped. Both discounts have to tick each other's class under Combinations. That is covered in full in [Shopify discount combinations](/blog/shopify-discount-combinations).

**Free shipping thresholds are measured after discounts.** A code that lowers the subtotal below your free shipping minimum removes free shipping, so the customer saves on the goods and pays for delivery.

## Questions merchants ask

**Does the discount type change what the customer types at checkout?**
No. The code is the code. Type is about how the value is worked out, not how it is entered.

**Can one discount be both product and order scoped?**
No. Each discount is one type. Run two discounts if you need both behaviours, and set Combinations on each so they can apply together.

**Does an automatic discount round differently to a code?**
No. Method (code or automatic) and type are separate settings. An automatic **Amount off products** discount rounds per unit exactly like the code version.

**Why does the unit price change on a product discount?**
Because the discount belongs to the line item. Shopify shows the reduced unit price with the original struck through, so the cart line and the maths agree.

**Does this affect fixed amount discounts too?**
A fixed amount off products is divided across the units in the line, so it can split unevenly across a large quantity. Percentage discounts are where the per-unit rounding bites hardest, because the fraction repeats on every unit.

## If the number is still wrong

Work through these in order.

- **Check the Type column** on the Discounts list. If it says Amount off product, the per-unit rounding above applies.
- **Multiply your unit price by the percentage** and look past two decimal places. Anything there is lost per unit.
- **Check Combinations** on both the code and any automatic discount, if you run both.
- **Check the minimum purchase requirement.** A cart that drops below it after another discount stops qualifying.
- **Check the dates and usage limits.** An expired or exhausted code applies nothing at all rather than the wrong amount, so if you are seeing a partial discount this is not it.
- **Test in the cart, not in the admin.** The discount screen shows what you configured. The cart shows what a customer gets, and those are the numbers that matter.

## What I would do

For most stores the answer is Fix 1. Pricing by a unit that divides cleanly costs nothing, keeps the collection scoping, and removes the rounding permanently rather than working around it.

Keep Amount off order for storewide promotions, where it is the right type anyway and happens to round the way people expect.

Reach for a function or an app only when per-unit pricing, collection scoping and a code are all required at the same time.


---

---
title: Shopify Dropdown Menu Behind Page Content (Z-Index Fix)
description: Your Shopify dropdown or mega menu opens, but the page title and products sit on top of its links and the menu closes before you can click. The fix is one Custom CSS rule in Theme settings. Tested on a Rebel store.
---

## The problem

A merchant running the Rebel theme asked about this on the Shopify Community. Their store has a mega menu under the header, with tabs for Living, Dining, Office, Bar, Lighting and Decor. A mega menu is a wide dropdown that shows many links in columns when you point at a tab.

On the home page it worked. On the other pages the menu opened, but part of the page was drawn on top of it. The merchant also said the menu "snaps shut" before a visitor can click a link.

I opened the merchant's store and checked the Sofas collection page. I pointed at **Living** and the menu opened. The big page heading "Sofas" was printed right across the first row of links. When I moved the pointer down toward **Sofas**, **Recliners** or **Sectionals**, it left the menu and the menu closed.

![Before: the Sofas page heading sits on top of the Living menu links](/images/blog/shopify-dropdown-menu-behind-content/01-before-menu-links-covered.png)

I measured it as well. For every link in the menu, I asked the browser which element sits at the center of that link. On the Sofas page, a block of page content answered for all 16 links across the six tabs, not the menu. A click on those links would have hit the page, not the link.

## Why the menu ends up behind the page

Every item on a web page sits on a layer. When two items overlap, the one on the higher layer is drawn on top. The number that sets the layer is called **z-index**. A bigger number is higher, and an item with no number gets the default layer.

When two items ask for the same layer, the one that comes later in the page's code is drawn on top.

That is what happens here. Rebel is built on Shopify's Horizon theme, and Horizon gives its sections a content wrapper on layer 1. The merchant's mega menu is a section under the header, so its wrapper is on layer 1. The first section of the page below it, such as the collection title and description, has a wrapper on layer 1 as well.

Both are on layer 1, so the page content wins because it comes later. The menu panel opens downward, straight into that content.

This also explains why the menu closes. A hover menu stays open only while the pointer is over the menu or its panel. When the page content is drawn on top, the pointer is over the page, not the panel. The browser treats that as leaving the menu and the panel hides.

It also explains why the home page worked. I tested the menu on six pages, with the page-level code the merchant had already added switched off. The menu was covered on the Sofas page, the All products page, a product page and the Contact page. It was not covered on the home page or the About page, because the first section on those pages does not sit on layer 1 over the menu.

## The fix: put the menu section on a higher layer

The fix gives the menu's section a layer higher than the page content. The section keeps its place on the page, so the layout does not change. You paste the rule into **Custom CSS**, a box in the theme editor where you can add your own styling code without editing any theme files.

These are the exact steps from my reply on the forum.

### Step 1 and 2: open the theme editor

In your Shopify admin, go to **Online Store**. Then click **Edit theme** on your current theme.

![Go to Online Store, then click Edit theme on your current theme](/images/blog/shopify-dropdown-menu-behind-content/02-online-store-edit-theme.png)

### Step 3: open Theme settings

Click the **Theme settings** icon at the top of the left panel. It is the gear, next to the icon that shows your page sections.

![Click the Theme settings gear at the top of the left panel](/images/blog/shopify-dropdown-menu-behind-content/03-theme-settings-gear.png)

### Step 4: open Custom CSS

Theme settings shows a list of groups such as Prices, Product cards and Swatches. Scroll down and click **Custom CSS**.

![Scroll down and click Custom CSS in the Theme settings list](/images/blog/shopify-dropdown-menu-behind-content/04-custom-css.png)

### Step 5: paste the code

Click at the end of the box, press Enter and paste this code. If the box already holds code, leave it there and add this below it.

```css
.shopify-section-group-header-group:not(.header-section) {
  position: relative;
  z-index: 10;
}
```

![Paste the code at the end of the Custom CSS box](/images/blog/shopify-dropdown-menu-behind-content/05-paste-code.png)

The first line points at the sections that sit in your header area, except the header itself. In the merchant's store that is the mega menu section. The second line lets the section take a layer. The third puts it on layer 10, above the page content on layer 1.

The header is left out on purpose. Horizon keeps the header in place while you scroll, and changing how it is positioned could break that.

### Step 6: save

Click **Save** in the top right corner.

![Click Save in the top right of the theme editor](/images/blog/shopify-dropdown-menu-behind-content/06-save.png)

## The result

I tried the rule on the merchant's live store, in my own browser only. Nothing was saved to their store. The Living panel now opens above the Sofas heading, and the page text no longer shows through the links.

![After: the Living menu links sit on top of the page and can be clicked](/images/blog/shopify-dropdown-menu-behind-content/07-after-menu-links-on-top.png)

I ran the same check as before on seven pages: the home page, About, Contact, a product page, the Sofas collection, the All products collection and the cart. The menu answered for 16 of 16 links on every page. Before the rule, the page answered for all 16 on the Sofas page.

Only the layer changed. The menu looks the same, and nothing else on the page moved.

## Other fixes from the same thread

Two other replies in the thread tried to fix this, and both are reasonable.

**Lower the page content to layer 0.** One reply added `main#MainContent { z-index: 0; }` to the bottom of the theme's main layout file. `main#MainContent` is the box that holds everything under the header. Putting it on layer 0 puts the whole page below the menu's layer 1. When I loaded the merchant's store, that rule was in place and all 16 links were reachable.

The tradeoff is that it changes the layer of the entire page body, not only the menu. If you later add a sticky bar or a popup inside the page, it now sits below the menu, which may not be what you want. It also means editing the theme's code file, where a Custom CSS box is easier to undo.

**Target the menu section by its ID.** Another reply used the section's own ID in the selector. That also worked when I tried it at desktop width. The ID belongs to one section, so if you delete the menu section and add it back, the ID changes and the rule stops matching. The rule in this guide points at the header area as a whole, so it keeps working.

All three methods do the same job, which is to give the menu a higher layer than the page. Pick the one you find easiest to maintain.

## How to check your own store

You do not need any developer tools to see whether your menu is covered.

- Open one collection page, one product page and your home page on a computer.
- Point at a menu tab so the dropdown opens.
- Move the pointer slowly down onto the first link in the dropdown.
- Watch for the menu closing, or page text showing through the links.

If the menu works on the home page but not on inner pages, you have the layer clash described above. Different pages start with different first sections, so one page can behave differently from another.

Test on a computer. This menu switches to a tap-to-open layout on a phone, so the hover problem does not show there.

## Z-index terms that are easy to mix up

**Z-index.** A number that sets which of two overlapping items is drawn on top. A higher number is on top. It only has an effect on items that are positioned, which is why the rule above also sets `position: relative`.

**Layer.** A plain word for a z-index level. Items with the same layer are drawn in page order, so the later one is on top.

**Hover menu.** A menu that opens when the pointer rests on a tab and closes when the pointer leaves it. If anything else is drawn over the opened panel, the pointer counts as having left.

**Mega menu.** A wide dropdown that shows many links in columns, often with images. Themes such as Horizon ship a basic dropdown, and merchants add mega menus with an app or a custom block. If you want to change how wide the panel is, the [Shopify mega menu width guide](/blog/shopify-mega-menu-width) covers it.

**Sticky header.** A header that stays at the top while a visitor scrolls. It has its own layer, and it is the reason the rule above leaves the header alone.

If your menu is not covered by page content but by a chat button, that is the same type of problem with a different cause. The [chat widget covering your menu guide](/blog/shopify-chat-widget-covering-menu) explains it. If a header is sitting on your announcement bar on a phone, see the [header covering the announcement bar guide](/blog/shopify-header-covering-announcement-bar). For menus with several levels, the [Shopify nested dropdown menu guide](/blog/shopify-nested-dropdown-menu) covers how to build them.

## If it did not work

**Did you test the right theme?** If you pasted the code into a duplicate of your theme, preview that duplicate. The live store will not change until you publish the duplicate.

**Is the code in the right box?** Paste it in **Theme settings > Custom CSS**. The individual sections have their own Custom CSS boxes, and the code does not apply to the whole header area from there.

**Did you click Save?** The Save button is greyed out until you change something. After pasting, it turns dark. Click it, then reload your store.

**Is your menu inside the header itself?** The rule leaves the header section alone. If your menu is a setting of the Header section, the menu is not the problem described here. Look for what is drawn on top of it.

**Does the menu still close before you reach the links?** Look for empty space between the tab and the panel. If there is some, the pointer leaves the menu while crossing it. That is a spacing problem and a separate fix.

**Do other things now sit under the menu?** The rule gives the menu section layer 10. If a popup or a drawer is now hidden behind the menu, give that item a layer above 10.

**Did Shopify change your code after saving?** Shopify tidies the Custom CSS box when you save. It may spread the rule over more lines. That is formatting only, and the code works the same.

## What to do

- Go back to **Custom CSS** using steps 1 to 4 above.
- Paste the rule at the end of the box and save.
- Hover over a menu tab on a collection page and move down to the links.
- If the links are still covered, check the questions above.

I tried this on the merchant's live store with seven pages and 16 menu links, and the menu was reachable on all of them.


---

---
title: How to Edit the Footer in Shopify
description: Footer content is split across three places - menus, theme settings and policies - which is why links go missing. Here is what lives where, and the nesting rule that hides your policy links.
---

## The problem: your footer link is there, but it is not

You added Privacy Policy, Refund Policy, Shipping Policy and Terms of Service to your footer menu. You saved. You look at the storefront and the footer shows one link:

**Terms and Policies.**

The four you actually care about are nowhere. They are in the menu, you can see them in the admin, and the footer refuses to print them.

![The storefront footer showing only the parent link, with the four policy links missing](/images/blog/shopify-edit-footer/01-image.png)

A merchant on the Trade theme asked how to show their policy links separately instead of grouped. The fix takes about ten seconds once you know what is happening, and the underlying reason explains a whole category of Shopify footer confusion.

## Why footers are confusing: content comes from three places

The reason footer editing feels harder than it should is that there is no single "edit footer" screen. What you see is assembled from three independent sources, and knowing which one owns a given piece of text is most of the battle.

**Menus** (`Content > Menus`) hold your link lists. The Quick links or Footer menu is a menu you edit here, not in the theme editor.

**Theme settings** (`Online Store > Themes > Customize > Footer`) control the structure and the toggles. Which blocks appear, how many columns, whether social icons and payment icons show, the newsletter signup.

**Policies** (`Settings > Policies`) hold the actual text of your refund, privacy, shipping and terms pages. Themes can print links to these automatically, without any menu involved.

So "edit the footer" means different actions depending on what you are changing. Wrong text in a policy? That is Settings. Missing link? Probably Menus. Want to remove the newsletter box? Theme editor.

Most footer problems are really "I am editing the wrong one of these three."

## The nesting rule that hides links

Back to the missing policy links. Go to **Content > Menus** and open the menu your footer uses, usually Quick links or Footer.

![The menu showing Privacy, Refund, Shipping and Terms nested under a Terms and Policies parent](/images/blog/shopify-edit-footer/02-image.jpeg)

There it is. Privacy Policy, Refund Policy, Shipping Policy and Terms of Service are **indented** beneath a "Terms and Policies" item. They are child items in a two-level menu.

That structure is correct for a header, where children become a dropdown. Footers are different. **Most themes loop only the top-level items** of a footer menu and never render children, because a footer has no room for hover dropdowns and no sensible way to reveal a second level.

So the theme prints the parent, "Terms and Policies", and drops, with no error everything under it. No error, no warning. The links exist and are simply never output.

This is why the problem is so disorienting. Nothing looks broken in the admin. The menu is right there with all five items in it.

### Fix 1: flatten the menu

Drag Privacy, Refund, Shipping and Terms **out** to the top level so they sit beside "Terms and Policies" rather than under it.

![The same menu with the policy links dragged out to the top level](/images/blog/shopify-edit-footer/03-image.png)

Save, reload the storefront, and all four print as separate links.

Delete the now-redundant "Terms and Policies" parent if you no longer want it, or keep it pointing somewhere useful.

The drag target is finicky: dragging an item slightly left promotes it to the top level, and slightly right nests it under whatever is above. If an item refuses to move, drop it at the bottom of the list first, then drag it up into position.

### Fix 2: use the theme's built-in policy row

Many themes, Trade included, already have a policy link row that does not use a menu at all.

Go to **Theme editor > Footer > Utilities > Policy links** and tick it.

![The Policy links toggle in the theme editor footer settings](/images/blog/shopify-edit-footer/04-image.png)

Every policy you have published under `Settings > Policies` now prints as its own link automatically.

**This is the better option when it exists**, for a reason worth spelling out: it stays in sync. Publish a new policy and the link appears. Remove one and the link goes. There is no menu to maintain, and no chance of a link pointing at a policy you have since deleted.

It also means the policy links are correct in every language you sell in, since Shopify handles the localised policy URLs for you. A hand-built menu of policy links does not do that.

The trade-off is control. You get every published policy, in Shopify's order, with Shopify's names. If you need a specific subset, or want to call it "Returns" rather than "Refund policy", use the menu.

## Other footer edits worth knowing

Since footer questions cluster, here is where the rest of it lives.

**Change the footer link text.** In `Content > Menus`, edit the menu item's name. The name is the visible text, and it is independent of the page title it points at. This is how you get "Returns" in the footer while the page itself is titled "Refund policy".

**Add a footer menu.** In the theme editor, select the Footer section and add a **Menu** block, then choose which menu it shows. Most themes support several, which is how you get columns of links with different headings.

**Remove the newsletter signup.** Theme editor, Footer section, find the newsletter block and either toggle it off or delete the block.

**Social media icons.** Usually a single toggle in the footer settings, with the actual URLs set in `Theme settings > Social media`. A common confusion: ticking the box does nothing if the URLs are blank, because there is nothing to link to. Themes generally hide icons for networks with no URL rather than showing a dead link.

**Payment icons.** Another toggle. These reflect the payment methods actually enabled in `Settings > Payments`, so you cannot show a card logo you do not accept.

**"Powered by Shopify".** Available on paid plans. Look in `Theme settings` or the footer section for the toggle. If your theme has no toggle, it is in the footer Liquid, usually as `{{ powered_by_link }}`. Removing it is allowed, and the toggle exists precisely so you do not have to edit code.

**Copyright text.** Usually generated from your store name and the current year. Themes that let you change it expose a field in the footer settings.

## Getting the columns right

Footer columns confuse people because they are not always a setting.

In block-based themes such as Dawn, Horizon and Trade, each block you add becomes a column, and the theme decides how they wrap. Four menu blocks give four columns on desktop, stacking on mobile. There is often no explicit "number of columns" control, because the block count is the control.

If your footer looks lopsided, count your blocks. Three menus and a newsletter is four columns, and a fifth block will usually wrap onto a second row rather than squeeze in.

Check it on a phone. Footers stack, and a footer that is tidy on desktop can become a very long scroll of links on mobile. If yours runs past two screens, that is a signal to cut links rather than to style them smaller.

## A note on what belongs in a footer

Worth a moment, since you are in there anyway.

Your policy links belong in the footer, and in most jurisdictions selling online they are effectively required to be findable. Refund, privacy, shipping and terms are the standard four, and a contact route is expected alongside them.

Beyond that, footers work best short. A footer with forty links is a footer people skip, and it dilutes the internal linking signal that makes the footer worth anything for SEO in the first place. Links you put in every page's footer are telling search engines those pages matter. If everything is in the footer, nothing is.

The links worth having sitewide are the ones a visitor might want from *any* page: policies, contact, about, and your main category pages. Seasonal promotions and individual products are not that.

## If it is still not showing

**You edited the wrong menu.** Stores often have several. Check which one the footer block is actually set to in the theme editor, then edit that one. The menu named "Footer" is not necessarily the one your footer uses.

**Items are still nested.** Look for indentation in `Content > Menus`. This is the main cause.

**The policy link goes nowhere.** The policy is not published. Add the text under `Settings > Policies` and save. An empty policy has no page to link to.

**You are previewing a different theme.** Changes to an unpublished theme do not show on your live store. Confirm you are editing the theme marked Live, or open the preview URL for the one you edited.

**Nothing you change appears.** Hard refresh, or open the storefront in a private window. Footers are on every page and get cached aggressively.

**Your theme has no Policy links toggle.** Not all themes include one. Use the menu method instead.

## What I confirmed on the test store

- Policy links nested under a parent item **did not render** in the Trade footer. Only the parent printed, with no error anywhere in the admin.
- Dragging them to the **top level** made all four appear immediately.
- The theme's built-in **Policy links** toggle printed every published policy without touching a menu at all, and stays in sync as policies change.

The short version: a footer menu is a flat list, even though the menu editor lets you build a tree. If a footer link has vanished, check for indentation before you check anything else. And if your theme offers a policy links toggle, use it, because a footer that maintains itself is worth more than one you have to remember to update.


---

---
title: How to Edit the Shopify Order Confirmation Email
description: The order confirmation email is Liquid you can edit, but it is not in your theme and not in the checkout editor. Here is where it lives, plus two tested fixes for local pickup orders.
---

## The problem: the email says the wrong thing and you cannot find it

A customer places a local pickup order. The confirmation email tells them:

> You'll receive an email when your order is ready for pickup.
> Estimated delivery Sunday, Jul 19 to Tuesday, Jul 21

Two things are wrong with that.

There is **no pickup address**. The customer is collecting the order in person and the email never says from where.

And there is an **estimated delivery window** on an order that is not being delivered. Nothing is shipping, so the date range is meaningless at best and a support ticket at worst.

A bakery owner hit exactly this and asked how to edit the email code. That question has a real answer, but only once you know which of Shopify's several editors owns this particular text.

![The order confirmation email with a pickup line but no address, and an estimated delivery that should not be there](/images/blog/shopify-edit-order-confirmation-email/01-image.jpeg)

I reproduced both problems on a test store and fixed them. Here is the result:

![The same email with the pickup address showing and the delivery estimate gone](/images/blog/shopify-edit-order-confirmation-email/02-image.jpeg)

## Where the email actually lives

This trips people up constantly, so it is worth being precise.

Shopify has three separate surfaces that all feel like "the store", and each has its own editor:

- **Your theme** is the online store. Home, collections, products, cart. Edited under `Online Store > Themes`.
- **Checkout, the Thank You page and the Order status page** are rendered by Shopify, not your theme. Edited under `Settings > Checkout`.
- **Emails** are neither. They are edited under **`Settings > Notifications`**.

So if you have been searching your theme code for the pickup sentence, you will never find it. It is not there. If you have been hunting through the checkout editor, same story. Emails are their own thing.

A quick test that always works: did the text arrive in the customer's **inbox**, or was it on a **web page** they clicked to? Inbox means Notifications. Web page means the theme or the checkout editor. I wrote up that second case separately in [how to edit the Shopify Thank You page](/blog/shopify-edit-thank-you-page).

The good news is that Notifications gives you the raw template. Not a block editor, not a set of toggles. The actual HTML and Liquid, which you can change however you like.

## Step 1: open the template

Go to **Settings > Notifications**.

Find **Order confirmation** under Customer notifications and open it, then click **Edit code**.

You now have the full email template: HTML, inline CSS, and Liquid tags that pull in the order data.

Before you touch anything, note the **Revert to default** button at the top. That is your undo. Whatever you break here, one click puts the template back to how Shopify shipped it. It makes this whole job far lower risk than it looks, so do not be timid.

## Fix 1: show the pickup address

Search the template for `pick-up`. You are looking for this:

```liquid
{% when 'pick-up' %}
  You'll receive an email when your order is ready for pickup.
```

Add your address directly beneath the sentence:

```liquid
{% when 'pick-up' %}
  You'll receive an email when your order is ready for pickup.
  <br><br>
  <b>Pickup location</b><br>
  Your Store Name<br>
  12 Example Street<br>
  Tel Aviv 6100000<br>
  Usually ready in 2 hours.
```

![Finding the pick-up case and pasting the address underneath it](/images/blog/shopify-edit-order-confirmation-email/03-image.jpeg)

That is plain HTML inside a Liquid template, which is all these emails are. `<br>` for line breaks, `<b>` for the label. Email clients are conservative about CSS, so simple tags are the right call here rather than anything clever.

### There are two copies of the template

Search results will show `{% when 'pick-up' %}` **twice**.

One sits under a `{% case split_cart_delivery_method %}`, which runs when a single order is split across more than one delivery method. The other sits under `{% case delivery_method %}`, the normal single-method path.

**Edit both.** If you only do one, the address appears on some orders and not others, and which orders depends on how the customer's cart was fulfilled. That produces a bug that looks random and is miserable to chase down later.

This is the single most common reason a change here "only works sometimes".

## Fix 2: remove the estimated delivery line

Still in the same file, find:

```liquid
{% unless delivery_method_types.size > 1 %}
```

Change it to:

```liquid
{% unless delivery_method_types.size > 1 or delivery_method == 'pick-up' %}
```

![Adding the pick-up condition so the estimated delivery block is skipped](/images/blog/shopify-edit-order-confirmation-email/04-image.jpeg)

That block is what prints `Estimated delivery` followed by a date range. Adding the second condition means it is skipped entirely for pickup orders while shipped orders keep their estimate, which is what you want. You are not deleting the feature, just excluding one case from it.

### If pickup and shipping still get mixed up

On orders containing both a shipped item and a pickup item, there is a **second** estimate rendered per line-item group. Find this and remove the inner `{% if %}` block:

```liquid
{% if delivery_agreement.delivery_method_type == 'pick-up' %}
  {% if delivery_agreement.estimated_delivery_date %}
    <p class="order-list__estimated-delivery">
      Estimated delivery &middot; <strong>{{ delivery_agreement.estimated_delivery_date }}</strong>
    </p>
  {% endif %}
```

The pattern is consistent throughout this template: anything that can vary per delivery method tends to exist in more than one place, because Shopify renders the whole-order summary and the per-group detail separately. When a change half-works, the answer is almost always a second copy you have not found yet.

## More than one pickup location

Hardcoding one address works fine for a single-location store. With several branches, you want the email to print the right one.

Wrap the address in a case statement on the delivery method name:

```liquid
{% case delivery_agreement.delivery_method_name %}
  {% when 'Main Street Store' %}
    <b>Pickup location</b><br>
    Main Street Store<br>
    12 Example Street<br>
  {% when 'Airport Branch' %}
    <b>Pickup location</b><br>
    Airport Branch<br>
    4 Terminal Road<br>
{% endcase %}
```

The strings must match your location names in `Settings > Locations` **exactly**, including capitalisation. A near-miss prints nothing and reports no error, since no `when` branch matches and there is no `else`.

If you would rather the failure be visible, add an `{% else %}` with a fallback line such as your main address or a "check your order page" note. On something customer-facing, an obviously generic message beats a blank space.

## Test it before you trust it

Use **Send test** at the top of the template editor. It emails you a preview using placeholder data.

The catch: the test email uses **sample** order data, so it may not exercise the pickup branch at all. The sample order is usually a straightforward shipped order, which means your pickup edits can appear to do nothing.

The reliable test is a real one. Place a genuine test order on your store, choose local pickup at checkout, and read the email that arrives. Then cancel and refund it. It takes five minutes and it is the only way to see the exact template branch your customers will hit.

Check it on a phone too. These templates use table-based layouts and inline styles precisely because email clients are unpredictable, and a `<br>` stack that looks tidy on desktop can wrap oddly in a narrow mobile client.

## What else you can and cannot change here

Since you are in the file already, a sense of the boundaries.

**You can** change any wording, add HTML, pull in any order data Shopify exposes to the template (`{{ order.name }}`, line items, shipping address, custom attributes), restyle with inline CSS, and add conditional content with Liquid.

**You cannot** run JavaScript. Email clients strip it. Anything interactive is out, and that is a property of email, not a Shopify limitation.

**Be careful with** images and external CSS. Many clients block remote images by default, so a design that depends on them will look broken for a meaningful share of recipients. Keep the important information as text.

**Each notification is its own template.** Order confirmation, shipping confirmation, order cancelled and the rest are edited separately. A change here does not propagate. If you want the pickup address in the "ready for pickup" email too, you have to make the same edit there.

**You cannot change the sender address from inside the template.** That lives one screen up, in `Settings > Notifications > Sender email`. If yours is a free Gmail or Yahoo address, Shopify rewrites the visible sender to `store+<shop id>@shopifyemail.com`, which is [why some customers ask whether the email is a scam](/blog/is-shopifyemail-com-legit).

## The data you can pull in

Half the work in these templates is knowing what is available to print. The order confirmation gets a fairly rich set:

- `{{ order.name }}` is the order number as customers see it, `#1001`. `{{ order.order_number }}` is the bare number.
- `{{ customer.first_name }}` and `{{ customer.last_name }}`, already used in the stock template's greeting.
- `{{ order.line_items }}` is loopable, with `line.title`, `line.quantity`, `line.variant_title` and `line.final_price` on each.
- `{{ shipping_address }}` and `{{ billing_address }}` expose `.name`, `.street`, `.city`, `.zip` and the rest.
- `{{ order.note }}` and `{{ order.attributes }}` carry anything your cart collected, which is where gift messages and delivery instructions usually live.
- `{{ shop.name }}`, `{{ shop.email }}` and `{{ shop.url }}` for your own details.

Money needs formatting. A bare price prints in cents, so use `{{ line.final_price | money }}` to get the customer's currency and format.

A worked example, showing delivery instructions only when the customer left some:

```liquid
{% if order.note != blank %}
  <p><b>Order notes</b><br>{{ order.note }}</p>
{% endif %}
```

That `!= blank` guard matters. Without it, orders with no note render an empty labelled block, which looks like a bug to the customer.

## When to stop editing and use an app

Template edits are the right tool for wording, layout and conditional content. There are jobs they cannot do.

**Attachments.** You cannot attach a PDF invoice from the template. Liquid produces the email body and nothing else.

**Sending to extra recipients.** There is no way to CC a second address from here. That needs Shopify Flow or an app, and it comes up often enough to be worth its own section below.

**Different emails to different customer segments.** You can branch on order data with Liquid, and on tags with `{% if customer.tags contains 'wholesale' %}`, but anything more involved gets unreadable fast inside an email template.

**Design-heavy templates.** If you want drag-and-drop layout and brand theming across every notification, a dedicated email app will be faster than hand-editing a dozen templates.

The dividing line is roughly: changing what the email *says* is a template job, changing where it *goes* or what it *carries* is not.

## CC a second address, such as a customer's accountant

This is the most common "where it goes" request, and it is worth walking through because the obvious approach fails.

A B2B merchant asked how to automatically copy their customer's accounts department on the order confirmation. The buyer places the order, but the invoice needs to reach a different person. Doing it by hand means saving a PDF and forwarding it every time.

**You cannot do this from the template.** Liquid renders the email *body*. The recipient is part of the envelope, set by Shopify from the order's contact email, and nothing you write inside the template can change it. No amount of editing gets you a CC field, which is why searching the template for one is time wasted.

The recipient is a workflow concern, so it needs Shopify Flow.

### For a handful of customers: a tag and one flow each

Tag the customer, for example `cc-acme`, then build a flow:

- **Trigger**: Order created
- **Condition**: Tags is equal to `cc-acme`
- **Action**: Send internal email to `accountant@acme.com`, subject `New CC ACME Order: {{ order.name }}`

![A Shopify Flow workflow: order created, condition on the customer tag, then send internal email](/images/blog/shopify-edit-order-confirmation-email/05-flow-cc-accountant.png)

**One honest caveat.** "Send internal email" sends an email that Flow composes. It is **not a copy of your actual order confirmation**, so the accountant gets a plain notification rather than the branded template you just spent an afternoon editing. You compose that body yourself inside the Flow action, with access to the order data.

For most accounting use cases that is fine, and arguably better, since an accounts team wants the order number and total rather than your hero image. But if you need them to receive the *identical* customer-facing email, Flow's internal email will not do it, and you are into app territory.

This approach does not scale. It is one flow per customer, so it is right for three or four and unmanageable at thirty.

### For many customers: a metafield and an HTTP request

Store the accountant's address on the customer record instead of encoding it in the flow.

Create a customer metafield, `custom.accountant_email`, exactly as described in [how to add metafields in Shopify](/blog/shopify-add-metafields). Then one flow serves every customer: trigger on Order created, check the metafield is not empty, and use the **Send HTTP request** action to pass the order and that address to an email service that accepts a dynamic To.

Send HTTP request rather than Send internal email, because the internal email action needs a fixed recipient typed into the action. The HTTP request lets the destination come from data, which is the whole point.

### The plan limits, which decide this for you

Check these before designing anything, because they are the real constraint:

- **Send HTTP request** is available on **Grow, Advanced and Plus** only.
- **Shopify Flow** is not available on **Starter** at all.
- On **Basic**, you have Flow but not Send HTTP request, so the tag-per-customer method works and the metafield method does not. An app such as Mechanic covers the gap.

So the honest answer to "which method" is usually settled by your plan rather than your preference.

## If it is not working

**The change appears on some orders only.** You edited one of the two `{% when 'pick-up' %}` copies. Go back and do both.

**Nothing changed at all.** Confirm you saved, and confirm you edited **Order confirmation** rather than one of the similarly named templates. Shipping confirmation and Order ready for pickup are separate files.

**The estimate is still showing.** There is a second per-line-item copy, covered above.

**Your `{% case %}` for multiple locations prints nothing.** The location name does not match exactly. Copy it straight from `Settings > Locations` rather than retyping it.

**You have made a mess.** Click **Revert to default**. You lose your customisations to that one template and nothing else.

## What I confirmed on the test store

- The pickup address is **not available by default** in the order confirmation email. It genuinely is not in the template, which is why no setting turns it on.
- Adding it takes **plain HTML under the `pick-up` case**, in **both** copies.
- The estimated delivery line is removed by **one extra condition** on the existing `unless`, with no effect on shipped orders.
- **Revert to default** restores the stock template cleanly, so the whole job is reversible.

The thing worth taking away: Shopify splits store text across three editors that do not talk to each other, and emails are the one people look for last. Once you know the confirmation email is Liquid sitting in `Settings > Notifications`, it stops being a limitation and becomes an ordinary template edit.


---

---
title: How to Edit the Shopify Thank You Page (No Plus Needed)
description: The Thank You page is not in your theme, which is why searching theme code never finds the text on it. Here is where it actually lives and how to edit or delete blocks on it.
---

## The problem: you cannot find the text anywhere in your theme

There is a note on your order confirmation page. You added it a year ago following some forum instructions, and now you want it gone.

So you open the theme code editor and search. Nothing. You check the order status settings in the admin, and the page there looks nothing like what your customer sees. You place a test order to look at the real thing, and there it is, plain as day, in a page you apparently cannot edit.

A merchant hit exactly this. They had searched every block in their theme, could not find the text, and had been told the answer was Shopify Plus.

It is not Plus. **The Thank You page is not part of your online store theme at all**, and that single fact is why every search you have run has come up empty.

I reproduced this on a test store and worked out where the text actually lives.

## Why your theme search finds nothing

Shopify has two separate surfaces and they are edited in two completely different places.

**Your online store** is the theme. Home page, collections, products, cart. Liquid files, the theme editor, `Online Store > Themes`.

**Checkout and post-purchase** is not. Checkout, the Thank You page and the Order status page are rendered by Shopify, not by your theme. They have their own editor, reached from `Settings > Checkout`, and their own block system.

That split is why:

- Searching theme code finds nothing. The text is not in your theme.
- The order status settings in the admin look different from what customers see. Those are two different things with confusingly similar names.
- Older forum posts tell you to paste Liquid into "Additional scripts". That field existed under the legacy checkout and is being retired. If you followed one of those guides years ago, the content may have been migrated into a block, which is what you are looking at now.

There is one more wrinkle worth knowing, because it explains a symptom that confuses people: the merchant noticed the note appeared on **desktop but not mobile**. Blocks in the checkout editor can render differently by device, so a block that looks absent on a phone is not necessarily absent.

## What that note usually is

Nine times out of ten it is an **app block**. Something like Checkout Blocks, or a similar checkout-extensibility app, adds a "Static content" block that renders a heading and a paragraph.

It looks like theme content. It is not. It was added through the checkout editor, and that is the only place it can be removed.

You do not need Plus for any of this. The checkout editor is available on Basic. What Plus adds is the ability to edit the checkout **steps** themselves. Editing the Thank You page and the Order status page is available on every plan.

## Step 1: open the checkout editor

Go to **Settings > Checkout**.

Find your active configuration and click **Edit**, or **Customize** depending on your admin version.

![Settings then Checkout, then click Edit on the active configuration](/images/blog/shopify-edit-thank-you-page/01-settings-checkout-click-edit.jpeg)

If you have more than one configuration, edit the one marked **Active**. Editing an inactive configuration changes nothing that customers see, and this is an easy hour to lose.

## Step 2: switch to the Thank You page

This is the step people miss, because the editor opens on Checkout and the page switcher is not obvious.

In the top bar there is a dropdown showing the current page. Open it. Under **Post purchase**, choose **Thank you**.

![The page switcher dropdown with Thank you under Post purchase](/images/blog/shopify-edit-thank-you-page/02-page-switcher-thank-you.jpeg)

Note what else is in that dropdown, because you will need it in step 5: **Checkout**, **Thank you**, and under Customer accounts, **Sign-in**, **Orders**, **Order status** and **Profile**.

Thank you and Order status are **separate pages**. That matters more than it sounds.

## Step 3: find the block

The canvas now shows the Thank You page as customers see it, with your note on it.

In the left sidebar under **Main**, you will see the blocks that make up the page: Confirmation, Order status, Order details, Customer information, Action, and any app blocks. The one you are looking for is usually called **Static content**.

![The Static content block in the left sidebar under Main](/images/blog/shopify-edit-thank-you-page/03-static-content-block-under-main.jpeg)

Click it. The matching content highlights on the canvas, which is how you confirm you have the right one before deleting anything.

If you have several app blocks, click each in turn and watch the canvas. Do not delete on the strength of the name alone.

## Step 4: delete it

With the block selected, a small floating toolbar appears over it on the canvas: up arrow, down arrow, an eye, and a trash icon.

![The block selected with the floating toolbar and the trash icon](/images/blog/shopify-edit-thank-you-page/04-select-block-click-trash.jpeg)

Click the **trash** icon.

Worth knowing about the **eye** icon next to it: that hides the block without deleting it. If the note is seasonal, a store closure notice or a holiday shipping cutoff, hide it instead. It comes back with one click next year and you do not have to rebuild it.

The block disappears from the canvas. **It is not saved yet.**

![The block gone from the canvas, with Save still to click](/images/blog/shopify-edit-thank-you-page/05-block-gone-click-save.jpeg)

Click **Save** in the top right.

## Step 5: repeat on the Order status page

Here is the part that is easy to get wrong.

**Thank you** and **Order status** are two separate pages in the same editor. A block added to both has to be deleted from both. Delete it from Thank you only, and it still appears when a customer later revisits their order status link, which is the page they get from the confirmation email.

Open the page switcher again and choose **Order status** under Customer accounts.

![The page switcher, choosing Order status to repeat the deletion](/images/blog/shopify-edit-thank-you-page/06-repeat-on-order-status-page.jpeg)

If the block is there, delete it the same way and save again.

This is also why the note seemed to appear in some places and not others. Two pages, two copies, deleted one at a time.

## Editing instead of deleting

The same route handles changing the text rather than removing it.

Select the block and the settings panel on the right shows its fields, typically a heading and a body. Edit them, then save. The canvas previews as you type.

To **add** a note rather than remove one, click **Add block** in the sidebar section where you want it. What is available depends on which apps you have installed: with no checkout apps you will see Shopify's own blocks, and app blocks appear once an app that provides them is installed.

To **reorder** blocks, use the up and down arrows in the floating toolbar, or drag them in the sidebar.

## Which page is which

The naming here is genuinely confusing, so it is worth pinning down.

| Page | When the customer sees it | Where you edit it |
| --- | --- | --- |
| **Checkout** | Entering shipping and payment | Checkout editor. Editing the steps needs Plus |
| **Thank you** | Immediately after paying | Checkout editor, Post purchase |
| **Order status** | Any later visit via the email link | Checkout editor, Customer accounts |
| **Order confirmation email** | In their inbox | Settings > Notifications |

The last row is a different thing entirely and gets confused with the first three constantly. If the text you want to change arrives in an **email**, no amount of work in the checkout editor will touch it. That lives in **Settings > Notifications**, and it is edited as an email template with its own Liquid.

A quick test: is the text on a web page the customer had to click to, or in a message that landed in their inbox? Web page means checkout editor. Inbox means Notifications.

## If you still cannot find the block

**You are in the wrong configuration.** Check you clicked Edit on the one marked Active.

**You are on the wrong page.** Confirm the top bar reads "Thank you" and not "Checkout".

**The block is in Header or Footer, not Main.** The sidebar has several sections. Scroll the whole list.

**It is an app block from an uninstalled app.** If the app was removed, its block may linger as an empty or orphaned entry. Reinstalling the app long enough to remove the block cleanly is sometimes the fastest route.

**It is genuinely in the theme after all.** If the text appears on your *cart* page rather than after payment, that is your theme, and `sections/main-cart-footer.liquid` or the cart template is where to look. The cart is online store, the checkout is not, and the boundary is the moment they click Checkout.

**It came from Additional scripts.** On older stores, check **Settings > Checkout** for an Additional scripts field. It is being retired but may still hold content on stores that have not migrated.

## What I confirmed on the test store

- The note was an **app block on the Thank You page**, added through the checkout editor, not the theme. No amount of theme searching would ever have found it.
- Deleting it took a **selection, a trash click and a save**, on **Shopify Basic**, with no Plus involved.
- The block existed **separately on Thank you and Order status**, and had to be removed from both.

The thing worth remembering: if you cannot find text in your theme, it is often because the page is not part of your theme. Checkout, Thank you and Order status are Shopify's, edited from `Settings > Checkout`. Once you know that boundary exists, this stops being a search problem and becomes a two-minute job.


---

---
title: "Shopify: Exclude Products From a Discount (Tested)"
description: "There is no exclude field on a Shopify discount. You exclude by pointing it at a collection that already leaves those items out. Two ways to build that, both tested."
---

## The problem

You want 20% off the store. You do not want 20% off the clearance rail, the gift cards, or the one product that already sits on a wafer-thin margin.

You open the discount, look for a way to say "except these", and there is nothing. Applies to: All products, Specific collections, Specific products. No exclusions anywhere.

I reproduced this on a test store and worked out the two ways to do it. Neither is on the discount page, which is why it is hard to find.

## What "All products" actually does

Start with what goes wrong. I made a 20% automatic discount set to **All products** and put two things in a cart: a \$40 cotton tee and a \$60 clearance rain jacket.

![Shopify checkout showing a 100 subtotal with a 20.00 order discount applied across the whole cart](/images/blog/shopify-exclude-products-from-discount/01-all-products-discounts-everything.png)

Subtotal \$100. Discount \$20.00. Total savings \$20.00.

The clearance jacket got its 20% along with everything else. That is \$12 off an item that had no margin left.

There is a second problem visible in that screenshot. Choosing "All products" turned the discount into an **order** discount, so it shows as one line against the whole cart. You cannot see which items it hit, because in Shopify's model it did not hit items at all, it hit the order.

That matters for the fix: to exclude anything, the discount has to target products rather than the order.

## The idea: exclude in the collection, not in the discount

Shopify has no exclusion field on a discount. What it has is **Specific collections**.

So you make a collection that already excludes what you want to leave out, and point the discount at that. The discount does not need to know anything about exclusions. The collection does the work.

The current collection builder gives you two ways to build that collection, and both work. Use whichever fits.

## Route A: exclude by tag, so it looks after itself

Best when the exclusion is a rule rather than a list. New clearance items should drop out on their own.

Tag every product that must not be discounted. I used `no-discount`.

Then go to **Products → Collections → Create collection**, name it something like "Discount eligible", and choose **Automated** so products match by condition. Set the condition to:

**Tag** - **does not include** - `no-discount`

![The collection conditions panel showing Tag does not include no-discount, with 194 collection items](/images/blog/shopify-exclude-products-from-discount/02-tag-does-not-include-condition.png)

That is it. My store has 195 products; the collection picked up 194 and left out the tagged jacket.

Because it is automated, a product you tag next month falls out of the collection by itself, and so falls out of every discount pointed at it. Nothing to remember, nothing to maintain.

A note on wording, since older guides say something different: the API calls this relation `NOT_EQUALS`, and the current admin words it **"does not include"**. Same rule.

## Route B: exclude specific products by hand

Best when the exclusion is a short, fixed list and you do not want to manage tags.

The collection editor now has a dedicated **Exclude** block. On the collection page, under the conditions, click **+ Exclude** and choose **Products** (you can also exclude whole collections).

![The Select products to exclude dialog with Canvas Tote Bag ticked](/images/blog/shopify-exclude-products-from-discount/03-select-products-to-exclude.png)

Pick the products and click Add.

![The collection panel showing an Include block with the tag condition and an Exclude block with a count of 1, and the item count down to 193](/images/blog/shopify-exclude-products-from-discount/04-include-and-exclude-blocks.png)

The panel now has two blocks, **Include** and **Exclude**, and the Exclude block shows a count. My collection went from 194 items to 193 the moment I excluded the tote.

The two routes combine, which is what that screenshot shows: a tag condition doing the general rule, plus a hand-picked exclusion on top. Remember to press **Save**. The Exclude picker closes as if it saved itself, but the collection has unsaved changes until you hit Save in the top bar.

## Point the discount at the collection

Now open the discount and change **Applies to** from All products to **Specific collections**, then pick the collection you just built.

![The discount page showing Applies to Specific collections with Discount eligible selected, 193 products, and Type Product discount](/images/blog/shopify-exclude-products-from-discount/05-discount-applies-to-the-collection.png)

Two things to notice in the sidebar. The **Type** now reads "Amount off products - Product discount" rather than an order discount, which is what makes per-item exclusion possible at all. And the Details list summarises it as "20% off Discount eligible".

The collection does **not** need to be published to the Online Store for this to work. Mine shows "0 channels" and the discount uses it perfectly well. Keeping it unpublished is usually what you want, since it is a plumbing collection and not something shoppers should browse.

## Proving it at checkout

Same 20% discount, now pointed at the collection. Cart: the \$40 tee, the \$25 tote excluded by hand, and the \$60 clearance jacket excluded by tag.

![Checkout showing the rain jacket at 60.00 and the tote at 25.00 with no discount, and the tee reduced from 40.00 to 32.00 by the 20 percent discount](/images/blog/shopify-exclude-products-from-discount/06-excluded-items-untouched-at-checkout.png)

- **Clearance Rain Jacket \$60.00** - untouched, excluded by the tag rule
- **Canvas Tote Bag \$25.00** - untouched, excluded by the product picker
- **Harbour Cotton Tee \$40.00 → \$32.00** - "STOREWIDE 20% OFF (-\$8.00)"

Subtotal \$117.00, total savings **\$8.00**.

Compare with the first screenshot on this page, where the same style of cart gave away \$20.00. Both exclusion routes hold at checkout, in the same order, at the same time.

## Excluding gift cards from a discount

Gift cards are the exclusion almost every store needs and almost every store forgets. A 20% discount that applies to gift cards lets someone buy \$100 of store credit for \$80, which is a straightforward loss.

Gift cards are not excluded automatically. Handle them like anything else:

- Tag them `no-discount` if you are using Route A, or
- Add them to the Exclude block if you are using Route B

If you already have discounts running on All products, check right now whether you sell gift cards. This is the cheapest thing on the page to fix.

## Excluding sale items from a discount code

The usual ask is "20% off, but not on things already reduced". There is no condition for "has a compare-at price" in the collection builder, so you cannot express it directly.

Two workable versions:

**Tag as you discount.** When you put something on sale, add the `no-discount` tag in the same edit. It is one extra field in a bulk edit, and the automated collection does the rest.

**Keep a Sale collection and exclude it.** If you already group reduced items into a Sale collection for the storefront, use **+ Exclude → Collections** and exclude that whole collection. Then your existing merchandising drives the exclusion and there is nothing new to maintain.

The second is cleaner if your sale process already runs through a collection.

## Excluding a whole brand or product type

Same shape, different condition. Instead of a tag, use:

- **Product vendor** - is not equal to - the brand
- **Product type** - is not equal to - the type

The collection builder supports several conditions at once with an "all conditions" match, so you can say "does not include tag `no-discount`" **and** "vendor is not equal to X" in the same collection.

Tags are still the more flexible tool, because a product has exactly one vendor and one type but any number of tags.

## Does this work for Buy X Get Y?

Yes, and it is worth doing. Both **Customer buys** and **Customer gets** accept collections, so you can point either at your exclusion collection.

It matters more than it looks. In [a free gift promotion](/blog/shopify-free-gift-with-purchase), excluded items also stop counting toward the spend threshold when they are outside the Customer buys collection. That is correct behaviour if the exclusion exists because the item has no margin, and a surprise if you were not expecting it.

## What to check if excluded items are still discounted

**The discount still says All products.** Changing the collection does nothing until the discount points at it. This is the most common miss.

**The product is not actually tagged.** Tags are case sensitive in some places and easy to fat-finger. Open the collection and confirm the item is absent from the list rather than assuming.

**Collection membership has not caught up.** Automated collections rebuild in the background. Give it a minute and reload the collection page; the item count is the fastest thing to watch.

**Another discount is doing it.** You fixed one discount, and a second one, possibly an automatic one you forgot, is still set to All products. Check the whole Discounts list, not just the one you were editing, and see [discount combinations](/blog/shopify-discount-combinations) for how two of them interact.

**You meant a quantity break, not an exclusion.** "Cheaper by the case" is a different tool. That is [tiered pricing](/blog/shopify-tiered-pricing).

**It is a shipping discount.** Shipping discounts do not apply to products at all, so product exclusions have no effect on them. Restrict those by shipping profile or zone instead.

## The main points
- Shopify has **no exclude field on a discount**. You exclude in the **collection** and point the discount at it.
- **Route A**, scales by itself: tag the items `no-discount`, build an automated collection with **Tag - does not include - no-discount**.
- **Route B**, fixed list: on the collection, **+ Exclude → Products** and pick them. The item count drops immediately.
- Both work together, and both were verified in the same cart.
- Set the discount's **Applies to** to **Specific collections**. That also flips it from an order discount to a product discount, which is what makes item-level exclusion possible.
- The collection does not need to be published to a sales channel.
- **Exclude your gift cards.** Nothing does it for you.
- Verified: the same cart shape gave away \$20.00 on All products and \$8.00 with the exclusions in place.


---

---
title: Export Shopify Orders by Payment Method
description: Shopify has no payment method filter in the Orders list, but the search box accepts a gateway keyword and the export honours it. Here is the no-code way to pull just your Clearpay, PayPal or Afterpay orders.
---

## The problem

A merchant asked this on the Shopify Community. They take Clearpay and their accountant wants the Clearpay orders on their own, with the totals before commission.

They had been through the Orders page looking for a way to filter by payment method and could not find one. That is not carelessness. The filter genuinely is not there.

Open the Orders list, click the filter control, and here is the complete list of what Shopify offers: Order status, Payment status, Fulfillment status, Delivery status, Return status, Label status, Chargeback and inquiry status, Order total, Delivery method, Destination, Address validation, Number of items, Total product weight, Product, Discount code, App, B2B, Payout action required, Fraud risk, Customer request, Credit card last four digits, Tagged with, Date, PO number and Fulfill by.

No payment method. No gateway. No provider.

The column picker does not have one either, so you cannot even add it as a column and sort by eye.

This is why the question keeps coming up, and why the usual answer is "export everything and filter it in Excel". You do not have to do that.

## The bit most people get wrong first

Before the filtering, there is a money question worth settling, because it often turns out to be the actual blocker.

The merchant wanted totals **before commission**. With a third party provider like Clearpay, Afterpay, Klarna or PayPal, that number is already what Shopify stores.

Shopify records the gross order value. The provider takes its cut on their side, when they pay you. That deduction never enters Shopify's order data at all.

So there is nothing to strip out. The order total in your export **is** the pre commission figure.

The flip side is that Shopify cannot give you the commission either. Outside of Shopify Payments, the per order fee fields come back empty. If your accounts want net as well as gross, that has to come from the provider's own payout report, matched back on order number.

Worth knowing before you spend an afternoon looking for a fee column that does not exist.

## The fix: the search box takes a gateway keyword

The Orders page has no payment filter, but the search box understands more than it lets on. It accepts field searches, and one of the supported fields is `gateway`.

Go to Orders, click **Search and filter**, and type:

```
gateway:clearpay
```

![Typing gateway into the Shopify Orders search and filter box to filter by payment provider](/images/blog/shopify-export-orders-payment-method/01-gateway-search-filter.png)

The list narrows to orders paid through that provider. I tested this on a store and it filters properly rather than doing a loose text match, orders on other gateways drop out of the list entirely.

### Finding the right gateway name

The one catch is that the value is the internal handle, not the pretty name shown on the order page. Clearpay and Afterpay are the same company, so a UK store might store either string.

You do not need the API to work it out. A gateway name that does not exist returns a clean "No orders found", it does not error and it does not fall back to showing everything. So trial and error is safe and instant.

Try these until one returns your orders:

```
gateway:clearpay
gateway:afterpay
```

Same approach for anything else you take:

```
gateway:paypal
gateway:klarna
gateway:shopify_payments
gateway:manual
```

If you would rather look it up properly, open one known order and read `transactions { gateway }` through the Admin API. The `gateway` field is the handle you want. `formattedGateway` is the human readable name and is usually a different string, so do not paste that one into the search box.

## Then export only those orders

This is the step that turns it from a nice filter into a finished job, and it is the part people miss.

With the filter still applied, click **Export**. The dialog offers an option for the filtered set:

![The Shopify export dialog offering to export only the orders matching your current search](/images/blog/shopify-export-orders-payment-method/02-export-matching-your-search.png)

Choose **"N orders matching your search"**, not All orders. You get a CSV of just those orders, with the gross totals your accounts asked for.

The default selection is Current page, which only gives you what is on screen. Change it.

### The second export, easy to miss

The same dialog has a separate button: **Export transaction histories**.

That is a different file. The orders export is one row per order. The transaction export is payment level, so refunds, captures and authorisations appear as their own lines.

If you are reconciling against a provider's payout statement rather than just totalling sales, that is usually the more useful file of the two. Pull both.

## Make it a monthly report

If this is a recurring job rather than a one off, do not retype the search every month.

Run the search once, then click **Save as new view**. Name it something like "Clearpay orders".

It becomes a tab along the top of the Orders page. Each month you open the tab, set the date range, and export. No syntax to remember, and your team never has to know what a gateway handle is.

## Combining it with other filters

The gateway search sits alongside the normal filters, so you can narrow further.

Add a date range from the Date filter and export a single month. Add Payment status to exclude anything unpaid or partially refunded. Add Fulfillment status if you only want shipped orders.

You can also combine terms directly in the search box:

```
gateway:clearpay financial_status:paid
```

The saved view stores the whole combination, so a month end export becomes two clicks.

## What the export actually contains

The orders CSV is wide, around eighty columns, and one row per line item rather than per order. That surprises people the first time.

An order with three products produces three rows. The order level fields, including the total, are filled in on the first row of each order and left blank on the rest. If you sum the total column naively you will get the right answer, because the blanks are genuinely empty rather than repeated, but if you count rows you will overcount your orders.

For an accounts handover, the columns that usually matter are Name, the order number, Paid at, Financial Status, Total, and the payment gateway columns near the end.

## Clearpay or Afterpay, which name does Shopify use?

They are the same company. Afterpay operates as Clearpay in the UK and most of Europe, and as Afterpay in Australia, New Zealand and the US.

Which string your store records depends on how the provider was installed and when. That is exactly why guessing once and giving up is the wrong move. Try both, and remember a miss costs you nothing because the search simply returns no orders.

Once you know which one your store uses, save the view and you never have to think about it again.

## Where do I see the payment method on a single order?

Open any order and look at the payment section under the line items. It shows the provider's display name, so "Clearpay" rather than `clearpay`.

This is the friendly name, and it is genuinely useful for checking one order by eye. It is just not the string the search box wants, and it is not available as a column or a filter, which is the whole reason this article exists.

## What if I use Shopify Payments?

Then you get more, not less.

Shopify Payments orders carry the processing fee per transaction, so the commission you cannot get from Clearpay is available for those. You will find it in the transaction export, and in Finance then Payouts, where each payout is broken down into gross, fees and net.

That is why the answer splits by provider. With Shopify Payments the reconciliation can be finished inside Shopify. With any third party gateway, Shopify holds the gross and the provider holds the fee, and the two have to be matched up outside.

## When this is not enough

The search and export route covers most cases. Two situations where it will not.

**You need per order commission.** As above, that data is not in Shopify for third party gateways. It lives in the provider's payout report.

**You need it automated on a schedule.** The admin export is manual and lands in your inbox as a file. If you want a monthly CSV pushed somewhere without a human clicking Export, that is either a reporting app or a small script against the Admin API filtering on gateway.

For most merchants asking this question, the saved view plus a monthly export is the right size of solution. It is free, it takes about two minutes to set up, and it does not add another app to the stack.

## The short version

There is no payment method filter in the Shopify Orders list and no column for it either.

Type `gateway:clearpay` into the search box instead. A wrong guess returns nothing rather than everything, so you can safely try `clearpay` then `afterpay` until one hits. Then Export, and pick "orders matching your search" rather than All orders.

Save the search as a view and next month is two clicks.

And the total in that export is already the pre commission figure, because the provider's cut never enters Shopify's data in the first place.


---

---
title: "No Shopify Flow Trigger for Cancellation Requests"
---

## The problem: a cancellation request comes in and no alert goes out

You turned on self-serve order cancellations. A customer opens their account, asks to cancel an order, and nothing happens on your side. No email. No Slack ping. No Shopify Flow workflow kicks off. The order keeps moving toward fulfilment while a cancellation request sits in the admin, unseen.

A merchant raised exactly this on the Shopify Community. Returns get a "Return requested" trigger and a staff notification. Cancellations get neither. That is the gap.

It matters because of the clock behind the feature. Shopify added self-serve cancellations to comply with EU Directive 2023/2673, live 19 June 2026, and that rule requires merchants to process a cancellation promptly, with refunds inside 14 days. A request that sits unseen for a week has already eaten half your window.

I went through Shopify's own trigger reference and the Admin API to see what is and is not exposed. Here is the honest state, and the ways to close the gap today.

## Why nothing fires

Three things people reasonably expect, none of which exist:

- No Flow trigger for a customer cancellation request.
- No staff-notification event for it.
- No field on the Order object that says a cancellation is pending.

![Shopify Flow trigger reference: orders have only Order canceled, returns have the full request lifecycle](/images/blog/shopify-flow-cancellation-request-trigger/01-flow-triggers-orders-vs-returns.png)

That is Shopify's trigger reference. Look at the two families side by side. Returns fire at every step: Return requested, approved, declined, processed, closed, cancelled, reopened. Orders get exactly one cancel-related trigger, "Order canceled," and it fires after the order is already cancelled, not when a customer asks.

So the moment you actually care about, the request, has no hook. That is the whole reason "just build a Flow" does not work here.

## It is an event, not a field

Here is the part that the "there is no way to detect it" answers miss.

A self-serve cancellation is implemented as a customer-requested order edit. Nothing new lands on the Order object, which is why merchants who go looking in the API find nothing. But it does write a timeline event.

The request shows up as a `BasicEvent` on the order, with `action: requested_edit_requested` and a message like "Jane requested cancellation of 3 items."

You can read it today with the Admin GraphQL `events` connection:

```graphql
{
  events(first: 50, query: "action:requested_edit_requested subject_type:ORDER") {
    edges {
      node {
        __typename
        ... on BasicEvent {
          id
          createdAt
          message
          subject { ... on Order { id name } }
        }
      }
    }
  }
}
```

The `message` text is what confirms the event is a cancellation. That one action covers customer edit requests in general, so either filter on the wording or treat every hit as a request that needs a human to review. To poll without re-seeing the same rows, add `created_at:>` your last run time to the query string.

I confirmed the same signal from a second angle. On a test store I applied the Orders "Customer request" filter set to "Cancellation requested," and the URL Shopify generated was `customer_request:"edit"`. Same edit-request concept, surfaced through the admin UI instead of the API. Two doors, one room.

## Do not wire up the fulfillment triggers

This is the part that catches people, so it is worth being blunt about it.

There are triggers and a webhook that look exactly right by name: the "Fulfillment order fulfillment cancellation request submitted" Flow trigger, the REST `CancellationRequest` resource, and the `fulfillment_orders/cancellation_request_submitted` webhook.

![The fulfillment order cancellation request triggers are the merchant-to-3PL flow, not customer self-serve](/images/blog/shopify-flow-cancellation-request-trigger/02-fulfillment-cancellation-red-herring.png)

They are not it. Those are the merchant-to-fulfillment-service flow: you asking a third-party logistics provider to cancel a fulfillment order it already accepted. They never fire when a customer submits a self-serve cancellation. Shopify's docs are explicit that this is the 3PL path. I checked, because the naming is close enough to cost you an afternoon.

## The zero-code stopgap: a saved Orders view

Before you build anything, there is a one-minute stopgap that closes the worst part of the risk, which is your team not knowing a request is waiting.

The Orders page has a "Customer request" filter, and one of its values is "Cancellation requested." Filter by it, save the result as a view, and your staff get a one-click tab straight to the queue.

Open the Orders search and filter bar and pick Customer request:

![Orders search and filter bar with the Customer request filter](/images/blog/shopify-flow-cancellation-request-trigger/03-orders-customer-request-filter.png)

Set it to Cancellation requested, and leave the operator on Is:

![Setting the Customer request filter to Cancellation requested](/images/blog/shopify-flow-cancellation-request-trigger/04-cancellation-requested-filter.png)

Then Save the view and give it a name, so it becomes a tab your team can open in one click:

![Saving the filtered Orders view as a one-click tab](/images/blog/shopify-flow-cancellation-request-trigger/05-save-cancellation-view.png)

It is not automation, and it will not ping anyone. But it turns "did we miss one?" into a single click, which is often enough to stay inside the 14-day window while you build the real thing. I set this up on a test store to confirm the filter exists and that "Cancellation requested" is a first-class value, not something you have to fake with tags.

## Getting an actual alert: poll, because there is no push

Since nothing pushes, the reliable pattern is a small scheduled job that pulls.

Run the `events` query every few minutes. Key it off `created_at` so you only ever act on new requests. For each new one, send your team an email or a Slack message with the order name, the request message, and a direct link to the order in admin. That is the whole shape of it.

Shopify Flow cannot run that `events` query as a step, so this is not a Flow-only build, and there is no point pretending otherwise. When I described the exact goal to Shopify's Sidekick AI, it reached the same conclusion and offered to scaffold a serverless function instead of a Flow. That is the honest answer, and it is a useful one to have on record when you file the feature request.

The job itself is about thirty lines wherever it runs: a Cloudflare Worker on a cron trigger with the last-run timestamp in KV, a Vercel cron function, or a background task inside an app you already operate. The `events` query is the engine. The rest is "diff against last run, then notify." Pick whichever platform you already pay for, because none of this needs a new server.

The good news is that this holds up even after Shopify ships a native trigger, so it is not throwaway work. If a real "cancellation requested" trigger arrives, you swap the poller's front end for it and keep the notification half untouched.

## What Shopify Flow triggers exist for orders

People search for the list, so here is the order-related set as it stands: Order canceled, Order created, Order deleted, Order fulfilled, Order paid, Order risk analyzed, and Order transaction created.

Notice what is not there. No "order edited." No "order on hold." No customer-request trigger of any kind. If your automation depends on one of those moments, you are in workaround territory, the same as this cancellation case.

Returns, by contrast, expose the full lifecycle, which is precisely why "return requested" automations are trivial to build and "cancellation requested" ones are not. The asymmetry is not a bug you are missing. It is the current state of the platform.

## Is there a webhook for order cancellation requests?

Not for the customer self-serve request. The webhook topics that mention cancellation, the `fulfillment_orders/cancellation_request_*` family, are the fulfillment-service flow described above. The `orders/cancelled` webhook fires only once the order is actually cancelled, which is downstream of the request and after you have already acted.

So if the moment you want is the request itself, the timeline event is the only signal Shopify emits, and the `events` query is how you read it. There is no webhook shortcut hiding in the docs. I looked.

## Self-serve cancellations and the EU directive, in plain terms

A little context for why this landed in 2026 and why it stings.

Shopify introduced self-serve order cancellations to meet EU Directive 2023/2673, which took effect on 19 June 2026. Customers in scope can submit a cancellation straight from their account page, and the merchant is expected to process it promptly, with refunds inside 14 days.

The deadline is the whole reason the notification gap is more than a nice-to-have. High-volume stores cannot babysit the Orders page all day, and a request that sits for a week burns most of the legal window before anyone touches it. The saved view gives you a fast manual check. The poller gives you the push notification Shopify does not. Together they keep you compliant while the platform catches up.

## If it still does not work

A few things to check when your detection comes back empty:

- You are reading events, not order fields. The request is a `BasicEvent`. Nothing on the Order object changes, so an Order query will always look blank.
- The action string is exact. It is `requested_edit_requested`, and the human-readable confirmation lives in the `message`, not in a status field.
- You are not on the fulfillment path. If the webhook or trigger name contains "fulfillment," it is the 3PL flow, not the customer one.
- Customer accounts are the newer type. Self-serve cancellations come through new customer accounts, so confirm those are enabled on your store.

## Cancellation request vs order canceled vs fulfillment cancellation

Three things share a word and get mixed up constantly. Keeping them separate makes the whole API stop feeling contradictory.

A cancellation request is the customer asking to cancel. It is a timeline event, it waits for you to review it, and it has no native Flow trigger.

An order canceled is the end state, after you accept a request or cancel an order yourself for any reason. This one does have a Flow trigger and a webhook, because it is a completed action rather than a pending ask.

A fulfillment cancellation is you asking a third-party logistics provider to stop a fulfillment it already accepted. It is a separate system with its own triggers and its own webhook, and it has nothing to do with the customer.

Once those three are straight in your head, the "why are there cancellation triggers that never fire for me" confusion disappears, and you know exactly which signal to build on.


---

---
title: "Make Your Shopify Footer Stick to the Bottom (Sticky Footer CSS)"
description: On short Shopify pages like FAQ and Contact, the footer stops halfway up the screen and leaves empty space below it. Make the footer stick to the bottom with 14 lines of CSS in Theme settings. Tested on Prestige.
---

## The problem

A merchant on the Prestige theme asked about this on the Shopify Community. Their FAQ page and their Contact page both had a band of empty space under the footer. The footer ended, and below it the page background carried on to the bottom of the browser window.

It happened on a laptop and on a phone. Longer pages, like the home page and the collection pages, looked fine.

Someone in the thread had already given them some CSS for it. They pasted it into the theme editor, clicked Save, and nothing changed. So I installed Prestige on a test store, built a short FAQ page, and reproduced the empty space. Then I found out why the first fix never worked, and wrote one that does.

![A short Prestige FAQ page with a band of empty background below the footer](/images/blog/shopify-footer-stick-to-bottom/01-before-space-below-footer.png)

## Why there is empty space below the footer

A web page is only as tall as the things on it. The header, the page content and the footer are stacked on top of each other, and the page ends where the footer ends.

On a long page that stack is taller than the browser window, so you scroll, and the footer arrives at the bottom as you would expect. On a short page the stack is shorter than the window. The footer ends partway down, and the browser fills the rest of the window with the page background.

On my test store, with a browser window 1,500 pixels tall, the Prestige FAQ page ended at 1,304 pixels. That left 196 pixels of empty background under the footer. On a bigger monitor the band gets taller. On a phone it shows up on any page with only a few lines of text.

Nothing is broken in the theme. It is how every web page behaves unless the theme asks for something different, and Prestige does not.

### Why FAQ and Contact pages are the usual ones

These two pages tend to be the shortest pages in a store. An FAQ page with its answers folded away is a heading and a few rows. A Contact page is a heading and a form. Product pages, collection pages and the home page are almost always taller than the screen, so the footer never has room to stop early.

Policy pages, a thank-you page, a search page with no results and the 404 page can show the same band for the same reason.

## What a sticky footer is

The fix has a name in web design: a **sticky footer**. It means the footer sits at the bottom of the window when the page is short, and sits after the content, as normal, when the page is long.

It is different from a footer that stays fixed on screen while you scroll. That kind floats over the page all the time and covers content. A sticky footer does not move with the scroll. It only fills the empty space on short pages, by pushing the footer down to the bottom edge.

The CSS does three things:

- It makes the body of the page at least as tall as the browser window.
- It lets the main area of the page stretch to fill any spare height.
- It moves the spare height to just above the footer, so the footer ends up at the bottom.

CSS here means the code that controls how a page looks: sizes, colours and spacing. You do not need to write any. You paste one block into your theme.

## Make the footer stick to the bottom in Prestige

These are the steps I posted in reply to the merchant. The code goes in **Theme settings > Custom CSS**, a box in the theme editor where you can add your own CSS for the whole store.

1. Go to **Online Store** > **Themes**.
2. Click **Edit theme** on your current theme, the one at the top of the page.

![The Shopify Themes page with the current theme's Edit theme button highlighted](/images/blog/shopify-footer-stick-to-bottom/03-themes-edit-theme.png)

3. Click the **Theme settings** icon, the gear, in the bar on the far left.

![The Prestige theme editor with the Theme settings gear and the settings list highlighted](/images/blog/shopify-footer-stick-to-bottom/04-theme-settings.png)

4. Click **Custom CSS** at the bottom of the list.

![Prestige Theme settings with the Custom CSS panel open](/images/blog/shopify-footer-stick-to-bottom/05-custom-css.png)

5. If you pasted footer code into this box before, delete it. Keep any other code you added.
6. Paste this code at the end of the box:

```css
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
#main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
#main > [id*="template--"] + :not([id*="template--"]) {
  margin-top: auto;
}
```

![The sticky footer CSS pasted into the Prestige Custom CSS box](/images/blog/shopify-footer-stick-to-bottom/06-paste-css.png)

7. Click **Save**.

![The Save button highlighted in the top right of the theme editor](/images/blog/shopify-footer-stick-to-bottom/07-save.png)

Open your FAQ page in a new tab. On my test store the footer moved from 1,304 pixels down to 1,500 pixels, which is the exact bottom of the window, and the empty band was removed.

![The same Prestige FAQ page with the footer at the bottom of the window](/images/blog/shopify-footer-stick-to-bottom/02-after-footer-at-bottom.png)

## What each part of the code does

You do not need this to use the fix, but it helps if you want to adjust it.

- `min-height: 100vh` makes the page at least one screen tall. The unit `vh` means a percentage of the window height, so 100 is the full window.
- `min-height: 100dvh` does the same on phones, where the address bar slides in and out and changes the height of the window. Older browsers ignore this line and use the one above it.
- `flex-grow: 1` on the main area lets it take up any spare height that is left after the header.
- The last rule points at the first footer section, the one straight after your page content, and gives it `margin-top: auto`. That tells the browser to put the spare space above it, which is what pushes the footer down.

The `#main` part is the name Prestige gives to the area that holds the page content and the footer. Most recent Shopify themes use the same name.

## Why the first fix did not save

The code the merchant had been given was close. It had the same first two parts. The third part pointed at the footer using a class name that Shopify adds to every footer section, one that starts with `shopify-section-group`.

On my test store, the theme editor would not save any Custom CSS rule that used that name. The Save button went grey as if it had worked, and no error appeared. When I reloaded the editor the box had gone back to what it held before, and the storefront had not changed.

I tested it one rule at a time. A rule naming `shopify-section-group-footer-group` would not save. The same rule for the header group would not save either. Every rule that avoided those names saved normally and showed up on the storefront.

The version above finds the footer another way. Shopify gives the sections of your page template an ID containing `template--`, and the header and footer sections a different one. The rule picks the first section after the last template section, which is the top of your footer, without naming the blocked class.

If you already pasted the older code, check your Custom CSS box. The older code might still be sitting in the box, or the box might have gone back to an earlier version. Replace it with the code above, save, and reload the editor to confirm it stayed.

## Does it change long pages?

No. On a page taller than the window there is no spare height to fill, so the footer stays straight after the content. I checked the home page, a collection page and the Contact page on the test store. On each one the footer ended at the same spot with the code and without it.

It also leaves the spacing between sections alone. Prestige puts a small space between each section on a page, and that space is the same before and after.

## What if you have more than one footer section?

Some stores have several sections in the footer area, for example a row of icons or a newsletter sign-up above the footer itself. The code keeps all of them together and moves the whole group to the bottom. The spare space goes between your page content and the first of those sections.

On my test store Prestige had a "Text with icons" section above the footer, and both moved down as one block.

If you built your footer from a **Custom Liquid** section, a box in the theme editor where you paste your own code, it works the same way. It still counts as a footer section, so it moves down with the rest.

## Using a theme other than Prestige

Some themes already keep the footer at the bottom of short pages. I loaded the same short FAQ page in Dawn and in Horizon, two of Shopify's free themes, with a window 1,500 pixels tall. In both, the footer ended at exactly 1,500 pixels without any extra code. If your store runs one of those and still shows a band under the footer, something else is adding it, such as an app or a section below the footer.

Other paid themes vary. The code above relies on two things that change from theme to theme: the main content area being called `#main`, and the footer sitting inside it. If the code has no effect on your theme, one of those is different.

To check, right-click the empty space on your page and choose **Inspect**. The panel that opens shows the page's code. Look for the `main` tag around your content and the ID next to it. If it is something other than `main`, change `#main` in both places in the code to match.

## Troubleshooting

**Nothing changed after saving.** Reload the theme editor and open Custom CSS again. If the code is not there, it did not save. Check that the box does not still hold code that names `shopify-section-group`, since that can block the save.

**The code is there but the page looks the same.** Make sure you edited your current theme, the one at the top of the Themes page. A copy under **Draft themes** is not the one shoppers see. The merchant's screenshot in the thread showed a copy of their theme open in the editor, so check the theme name at the top of the editor before you paste.

**The footer is at the bottom, but a strip of background still shows under it on a phone.** Some phones report the window height with the address bar hidden. The `100dvh` line handles this in current browsers. Update the browser on the phone and check again.

**A popup or cart drawer looks wrong afterwards.** Those float over the page and should not be affected. If one moved, remove the code, save, and let your theme developer know which one.

**Your store uses a page builder app.** Page builders often draw their own page layout. The code may still work, but if it does not, the builder's own settings for page height are the place to look.

## Empty space above the footer instead

If the band sits between your content and the footer, rather than below the footer, it is a different problem. That space usually comes from the section itself: a **Padding** or **Minimum height** setting on the last section of the page, or an empty section that is still switched on.

The settings to look at belong to the last section before the footer, in the same theme editor you used above. Its padding and height settings decide how much room it takes, and an empty section left switched on still takes up room.

This article started from a thread on the Shopify Community: <a href="https://community.shopify.com/t/remove-extra-space-below-footer-on-faq-and-contact-pages/688264" rel="nofollow">Remove Extra Space Below Footer on FAQ and Contact Pages</a>.


---

---
title: "Shopify Free Gift With Purchase: The Free Way, Tested"
description: "Shopify can make a gift free once it is in the cart, but it will not put it there. Here is the native setup, what it leaves the shopper to work out, and a cart block that fixes it. Tested on Dawn."
---

## The problem

"Spend \$50, get a free gift." Every store wants it. Shopify has no button called free gift.

It can be done for nothing, and I built it on a test store to find out exactly how far the free version gets you. The short answer: Shopify will make the gift free, but it will not add the gift to the cart for you. That one missing step is the whole reason merchants end up paying for an app.

Here is what I set up, what happened, and the cart block I wrote to finish the job.

## Build it as Buy X Get Y

There is no free gift discount type. The one you want is **Buy X Get Y**, with the Y priced at 100% off. It is the same discount type behind [an automatic bundle discount](/blog/shopify-bundle-discount-automatic), pointed at a gift instead of a set.

In your admin, go to **Discounts**, then **Create discount**, then **Buy X get Y**. Choose **Automatic discount** so shoppers do not need a code.

![The Shopify Discounts page with the Create discount button, and existing discounts showing Automatic or code in the Method column](/images/blog/shopify-free-gift-with-purchase/06-discounts-list-create-discount.png)

Fill it in like this:

- **Customer buys**: Minimum purchase amount, \$50, from a collection
- **Customer gets**: quantity 1 of your gift product
- **At a discounted value**: Free
- **Maximum number of uses per order**: 1

That last one matters. Without it, a \$150 cart earns three gifts.

I used a \$10 Enamel Pin Set as the gift and set the threshold at \$50.

### Customer buys does not accept "any product"

Shopify will not let you say "spend \$50 on anything". You have to point **Customer buys** at specific products or at a collection. The API is blunt about it and rejects the attempt with *"Items in 'customer buys' must be defined"*. The admin just does not offer an all-products option.

So before you build the discount, make a collection that holds everything you want to count toward the threshold. An automated collection with a condition as loose as "price is greater than 0" will do it, and it keeps itself up to date as you add products.

This has a real consequence. Anything **outside** that collection does not count toward the spend. In my testing I had a \$25 tote sitting outside the collection, so a \$65 cart containing it only counted \$40 of qualifying spend and the gift never triggered. If your threshold seems to be ignored, check the collection before you check the discount.

## What Shopify does, and what it refuses to do

With the discount live, I built a qualifying cart: two cotton tees, \$80. Comfortably over the \$50 threshold.

![Shopify checkout with an 80 cart and no gift line item anywhere](/images/blog/shopify-free-gift-with-purchase/01-qualifying-cart-with-no-gift.png)

No gift. No mention of a gift. Nothing.

The cart qualifies, but Shopify does not add anything to it. **Buy X Get Y makes an item free once it is in the cart. It does not put the item in the cart.**

So I added the pin set myself, the way a shopper would, and went back to checkout.

![Checkout showing the Enamel Pin Set at 10 struck through and marked FREE, labelled FREE GIFT OVER 50, with total savings of 10](/images/blog/shopify-free-gift-with-purchase/02-gift-free-at-checkout.png)

Now it works exactly as intended. The pin shows \$10.00 struck through, the word **FREE**, and the label "FREE GIFT OVER 50 (-\$10.00)". Total savings: \$10.00.

The discount is not broken. It is doing precisely what it was designed to do. What it does not do is tell the shopper any of this exists. They will never navigate to the pin set on their own, so the promotion has no effect on your average order value, which was the entire point.

## Telling the shopper, without an app

You need two things the native discount cannot give you:

1. A message in the cart telling the shopper how close they are
2. A button that adds the gift when they qualify

Both fit in one **Custom Liquid** section on the cart page. A Custom Liquid block is an empty box in the theme editor where you paste your own code. No theme file gets edited, and you can remove it by deleting the section.

Go to **Online Store**, then **Customize**, and switch the page dropdown at the top to **Cart**. Click **Add section**, choose **Custom Liquid**, and drag it to sit above the cart footer. Paste this in and press Save.

![The Shopify theme editor on the Cart page, with the section list on the left showing a Custom Liquid section and the Add section link below it](/images/blog/shopify-free-gift-with-purchase/07-theme-editor-cart-custom-liquid.png)

```liquid
{%- assign gift_variant_id = 47915308253361 -%}
{%- assign threshold = 5000 -%}

{%- assign gift_in_cart = false -%}
{%- assign qualifying = 0 -%}
{%- for item in cart.items -%}
  {%- if item.variant.id == gift_variant_id -%}
    {%- assign gift_in_cart = true -%}
  {%- else -%}
    {%- assign qualifying = qualifying | plus: item.final_line_price -%}
  {%- endif -%}
{%- endfor -%}

{%- if gift_in_cart == false -%}
  <div class="gift-bar">
    {%- if qualifying >= threshold -%}
      <p class="gift-bar__text">You have earned a free gift.</p>
      <button type="button" class="gift-bar__btn" id="AddFreeGift" data-id="{{ gift_variant_id }}">Add my free gift</button>
    {%- else -%}
      {%- assign remaining = threshold | minus: qualifying -%}
      <p class="gift-bar__text">Spend {{ remaining | money }} more to get a free gift.</p>
    {%- endif -%}
  </div>
  <style>
    .gift-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      flex-wrap: wrap; margin: 0 auto 1.5rem; max-width: 74rem; padding: 1rem 1.5rem;
      border: 1px solid rgba(var(--color-foreground), 0.15); border-radius: 0.5rem; }
    .gift-bar__text { margin: 0; font-size: 1.5rem; }
    .gift-bar__btn { cursor: pointer; padding: 0.9rem 1.8rem; font-size: 1.4rem;
      border: 1px solid rgb(var(--color-button)); border-radius: 0.4rem;
      background: rgb(var(--color-button)); color: rgb(var(--color-button-text)); }
    .gift-bar__btn[disabled] { opacity: 0.5; cursor: default; }
  </style>
  <script>
    document.getElementById('AddFreeGift')?.addEventListener('click', function (event) {
      var button = event.currentTarget;
      button.disabled = true;
      fetch(window.Shopify.routes.root + 'cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ items: [{ id: Number(button.dataset.id), quantity: 1 }] })
      }).then(function () { window.location.reload(); });
    });
  </script>
{%- endif -%}
```

Two values at the top are yours to change:

- **`gift_variant_id`** is the variant ID of the gift, not the product ID. Open the gift product in your admin and read the number at the end of the URL after `/variants/`. If the product has no options, click into the default variant to get it.
- **`threshold`** is your spend target **in cents**. \$50 is `5000`. \$75 is `7500`. Shopify stores every price in cents, and comparing against \$50 written as `50` would trigger the gift on a fifty cent cart.

The block counts the gift out of the qualifying total, so adding the free pin cannot itself keep you over the line.

## What it looks like in the cart

I tested this on Dawn. With one \$40 tee in the cart, ten dollars short:

![Dawn cart page showing a bar that reads Spend Rs. 10.00 more to get a free gift](/images/blog/shopify-free-gift-with-purchase/03-spend-more-message-in-cart.png)

The message does the arithmetic for the shopper and it uses your store's own currency formatting, so you do not hard code a symbol.

Raise the quantity to two, and the cart crosses \$50:

![The same cart at 80, now showing You have earned a free gift with an Add my free gift button](/images/blog/shopify-free-gift-with-purchase/04-add-my-free-gift-button.png)

Click the button:

![The cart with the Enamel Pin Set added, its price struck from 10.00 to 0.00 with a Free gift over 50 badge](/images/blog/shopify-free-gift-with-purchase/05-gift-added-and-free-in-cart.png)

The pin lands in the cart, the Buy X Get Y discount fires immediately, and Dawn renders the strike-through, the \$0.00 line total and the badge "Free gift over 50". The bar disappears because the gift is now in the cart.

Estimated total stays at \$80.00. The shopper paid nothing for the gift and saw that they paid nothing for it, which is the part the native setup could not do.

## Why not just auto-add it without telling the shopper?

You could make the script run on page load instead of on a click. I would not, for three reasons.

An item appearing in someone's cart without them touching anything reads as a bug. Shoppers remove it, or worse, they stop trusting the cart.

Second, if they remove the gift, an auto-add script puts it straight back. Now you have a fight.

Third, the click is doing useful work for you. A shopper who chooses the gift has engaged with the offer.

If you do want it automatic, the button click handler is the piece to move into a load event. Add a guard so it never re-adds an item the shopper removed in the same session.

## Free gift on a discount code instead of automatically

Same discount type, different trigger. In **Create discount**, pick **Buy X get Y** and choose **Discount code** instead of Automatic. Everything else is identical.

This is what you want for "use code TREAT for a free gift with any \$50 order". The catch is the same as before: the code makes the gift free, it does not add it. And the cart block above cannot see the code, since a code is not applied until checkout. For a code-based gift, spell out both steps in your marketing copy: add the gift, then enter the code.

Automatic is the better shape for a gift threshold in almost every case.

## Letting the shopper choose from several gifts

Buy X Get Y accepts more than one product in **Customer gets**. Add three, set the quantity to 1, and the shopper gets whichever one they add, free, but only one of them.

For the cart block, list the variant IDs and render a button for each. The logic is unchanged apart from checking whether **any** of the gift IDs is already in the cart.

If you want a proper "choose your gift" picker with images and a popup, that is where the free path ends and an app starts to earn its money.

## Free gift apps, if you would rather not touch code

Search the App Store for "free gift" and you will find a crowded category. The ones that come up most often are BOGOS by Secomapp, Gift Box, and EasyGift. They all do the auto-add, the gift picker and the progress bar out of the box, and most have a free tier that caps orders per month.

Before you install one, be clear about what you are actually buying, because it is not the discount. The discount is free and native. You are paying for the cart experience: automatic adding, removing the gift when the cart drops below the threshold, a picker, and a progress bar. If the block above covers what you need, you do not need the app.

## Common problems

**The gift is not going free.** Check the qualifying spend. Anything outside the collection you chose in Customer buys does not count. Also check whether another discount is already on the cart; by default two discounts refuse to run together, and one of them gets dropped, with nothing to say which. [Discount combinations](/blog/shopify-discount-combinations) covers that.

**Two gifts are being added.** Set **Maximum number of uses per order** to 1 on the discount.

**The cart shows the full price but checkout shows it free.** Some themes do not render line-level discounts on the cart page. The order is correct either way, but the shopper cannot see it, which defeats the purpose. Dawn renders it properly, as the screenshot above shows.

**The button does nothing.** Almost always a wrong variant ID. It must be the variant, not the product, and it must be a number rather than a string.

**The bar shows the wrong amount left.** The threshold is in cents. Check that \$50 is written as `5000`.

## The main points
- There is no free gift discount type. Build it as **Buy X Get Y** with the gift at 100% off.
- **Customer buys** will not accept "any product". Point it at a collection, and remember that anything outside that collection does not count toward the threshold.
- Set **maximum uses per order** to 1 or a big cart earns several gifts.
- Shopify makes the gift free but **will not add it to the cart**. That missing step is what free gift apps sell.
- One **Custom Liquid** section on the cart page closes it: a "spend \$10 more" message, then an **Add my free gift** button once they qualify.
- Verified on Dawn: \$40 cart shows the prompt, \$80 cart shows the button, one click adds the pin at \$0.00 with the discount badge attached.


---

---
title: Add a Free Shipping Progress Bar in Shopify (No App)
description: Add a free shipping progress bar to the Shopify cart that fills as items are added and shows how much more to spend, with no app. Tested on the Horizon theme.
---

## The problem

A merchant asked about this on the Shopify Community. They wanted a free shipping progress bar at the top of the cart. Not a full-width banner in the header, just a small bar inside the cart itself.

The bar they described is the one you see on a lot of stores:

- It compares the cart total to a threshold and fills up by the right percentage.
- It swaps the message as you shop. "You're \$12 away from free shipping" turns into "You've unlocked free shipping!"
- It recalculates the moment an item is added or removed, with no page reload.
- It shows the remaining amount in the store's currency.
- It sits at the top of the cart drawer and the cart page.

They were on the Horizon theme. They had followed a YouTube tutorial, but it did not work. Their words: the newer version of Horizon changed, and they could not find where to put the code.

That last part is the real issue, and it is worth understanding before you copy anything.

![Free shipping progress bar at the top of the Shopify cart drawer, showing how much more to spend](/images/blog/shopify-free-shipping-progress-bar/01-free-shipping-bar-cart-drawer.png)

I reproduced the whole thing on a Horizon store and found a version that is short, reliable, and needs no JavaScript. Here is what worked.

## Why the old tutorials break on Horizon

Most free shipping bar tutorials were written for older themes like Dawn. Horizon is Shopify's newer theme, and it builds the cart in a different way. Two things trip people up.

First, the cart drawer in Horizon does not accept a "block" you can drop in from the theme editor. On older themes you could often add a Custom Liquid block right in the cart area and paste your code there. Horizon's cart drawer has no such slot. So the point-and-click route the tutorial assumed simply is not there. That is exactly why the merchant could not "find the place to put the code."

Second, Horizon re-renders the cart by itself every time it changes. When you add or remove an item, Horizon re-fetches and repaints the cart contents. Older code that manually watched the cart and updated a bar can fight with this, or sit in the wrong spot and go stale.

Both of these sound like bad news. They are actually the key to a clean fix. If Horizon repaints the cart on every change, then a bar built the right way updates itself for free. No event listeners. No JavaScript at all.

## What you need

- Any store on the Horizon theme. This was tested on Horizon, and the same idea works on the cart page and the cart drawer at once.
- Access to Edit code on your theme. That is Online Store, then Themes, then the three dots menu, then Edit code.

You do not need an app, a paid plan, or any JavaScript knowledge. You are pasting one small file and adding one line.

## The fix: two edits

The whole thing is two edits. One new file, and one line added to an existing file.

### Step 1: add the snippet

A "snippet" is a small reusable piece of theme code. You make it once and then call it wherever you want it to appear.

- Go to Online Store, then Themes.
- On your theme, click the three dots, then Edit code.
- In the left panel, under Snippets, click Add a new snippet.
- Name it `free-shipping-bar`.
- Paste the code below, then Save. Change `100` to your free shipping amount.

```liquid
{% comment %} Free shipping progress bar. Change 100 to your free-shipping amount. {% endcomment %}
{% liquid
  assign threshold = 100
  assign threshold_cents = threshold | times: 100
  assign current = cart.total_price
  assign remaining = threshold_cents | minus: current
  assign percent = 0
  if threshold_cents > 0
    assign percent = current | times: 100.0 | divided_by: threshold_cents
  endif
  if percent > 100
    assign percent = 100
  endif
%}
{%- if cart.item_count > 0 -%}
  <div class="fsb">
    <p class="fsb__msg">
      {%- if remaining > 0 -%}
        You're <strong>{{ remaining | money }}</strong> away from free shipping
      {%- else -%}
        You've unlocked free shipping!
      {%- endif -%}
    </p>
    <div class="fsb__track">
      <div class="fsb__fill" style="width: {{ percent }}%;"></div>
    </div>
  </div>
  <style>
    .fsb {
      --fsb-fill: #1e8e3e;
      padding: 12px 4px 16px;
    }
    .fsb__msg {
      margin: 0 0 8px;
      font-size: 1.4rem;
      text-align: center;
    }
    .fsb__track {
      height: 8px;
      border-radius: 999px;
      background: rgb(var(--color-foreground-rgb) / 0.12);
      overflow: hidden;
    }
    .fsb__fill {
      height: 100%;
      border-radius: 999px;
      background: var(--fsb-fill);
      transition: width 0.35s ease;
    }
  </style>
{%- endif -%}
```

![Creating the free-shipping-bar snippet in the Shopify code editor and pasting the code](/images/blog/shopify-free-shipping-progress-bar/02-add-free-shipping-bar-snippet.png)

A few things about this code, in plain terms.

The `threshold` is your free shipping amount in whole units of your currency. Set it to 100 for a \$100 or 100 rupee threshold, 75 for 75, and so on. It is the one number you edit.

The `{{ remaining | money }}` part is what prints the amount left to spend. The `money` filter formats it in your store's own currency automatically, so a store in rupees shows rupees and a store in dollars shows dollars. You do not touch this.

The block only draws when the cart has items in it. An empty cart shows nothing, which is what you want.

### Step 2: show it in the cart

Now you tell the cart to display the bar. This is the one line.

- In the same code editor, open Snippets, then `cart-products.liquid`.
- Find the line that reads `{%- else -%}`.
- Right after it, add this single line, then Save.

```liquid
{% render 'free-shipping-bar' %}
```

![Adding the render line just after the else tag in cart-products.liquid](/images/blog/shopify-free-shipping-progress-bar/03-free-shipping-bar-render-line.png)

That is the whole job. One file called `cart-products.liquid` powers both the cart drawer and the cart page in Horizon, so this single line puts the bar in both places at once.

## Why it updates with no JavaScript

Here is the part that makes this reliable, and it is worth one plain sentence.

The file you edited, `cart-products.liquid`, is the piece Horizon repaints every time the cart changes. So when a shopper adds or removes an item, Horizon re-renders that file, your bar is inside it, and the numbers recalculate on the spot. No reload, no flicker, no custom scripts to maintain.

That is the difference from the tutorial approach. Instead of writing JavaScript to watch the cart and update a separate bar, you put the bar where Horizon already does the updating for you.

The result is the bar filling as items are added, then flipping to the unlocked message once the cart crosses your threshold.

![Cart drawer showing You've unlocked free shipping with the bar filled to 100 percent](/images/blog/shopify-free-shipping-progress-bar/04-free-shipping-bar-unlocked.png)

## Can you add a free shipping bar without an app?

Yes. The steps above do it with no app and no monthly fee. It is plain theme code that lives in your theme, so nothing extra loads on the page and there is no subscription to cancel later.

Apps exist for this and they are fine if you would rather not touch code. But for a bar that only needs a threshold and a message, a small snippet is lighter and free.

## Free shipping bar apps, if you prefer no code

If you do not want to open the code editor at all, a few well known apps build the same bar with a settings screen:

- Hextom Free Shipping Bar
- Essential Free Shipping Upsell
- Progressive Bar

They add a visual editor and extras like country targeting and countdowns. The trade-off is a recurring fee and another app loading on your storefront. For a simple threshold bar, the code route above is usually enough.

## How do I change the free shipping amount?

Open the `free-shipping-bar` snippet and change one number: `assign threshold = 100`. Set it to your free shipping value in whole units of your currency. Save, and the bar recalculates against the new number right away.

If you run promotions, you can change this whenever your free shipping threshold changes. It is a single edit each time.

## Why is my free shipping bar not updating?

Almost always one of these:

- The line went in the wrong file. It must be in `cart-products.liquid`, right after `{%- else -%}`. That is the part Horizon re-renders, which is what makes it live.
- Your theme is not Horizon. The file names here are Horizon's. On another theme the cart file has a different name, so you would add the line to that theme's cart items file instead.
- The cart is empty. The bar hides itself when there are no items, by design. Add something to see it.

## Does it count the subtotal or the total?

By default the code uses the cart total, which is the amount after any cart discounts. That is usually what you want a free shipping threshold to measure.

If you would rather measure the subtotal, so a discount code does not lower the progress, change `cart.total_price` to `cart.items_subtotal_price` in the snippet. One word, and the bar counts the pre-discount subtotal instead.

## How do I change the bar color?

The filled part of the bar uses one variable. In the snippet, find `--fsb-fill: #1e8e3e;` and change the hex value to any color you like. The empty track behind it uses your theme's text color at low opacity, so it blends with your design on its own.

You can also change the two messages. The "You're X away from free shipping" and "You've unlocked free shipping!" lines are plain text in the snippet, so edit them to match your brand voice.

## Free shipping bar versus announcement bar

People mix these up, so here is the difference in one line each.

An announcement bar is the thin strip across the very top of every page. It shows a fixed message to every visitor and does not know what is in the cart.

A free shipping progress bar lives in the cart and reacts to the cart total. It changes per shopper and per item. That is why it goes in the cart file, not the header.

The merchant here specifically wanted the second one, inside the cart, not the header strip. The code above gives you exactly that.

## The short version

Older free shipping bar tutorials break on Horizon because the cart drawer has no block slot and Horizon repaints the cart itself.

Work with that instead of against it. Add one snippet called `free-shipping-bar`, then add `{% render 'free-shipping-bar' %}` in `cart-products.liquid` right after `{%- else -%}`. Change the one threshold number to your amount.

Tested on a Horizon store: the bar sits at the top of the cart drawer and the cart page, fills as items are added, shows the amount left in the store currency, and flips to "You've unlocked free shipping!" at the threshold, with no reload and no JavaScript.


---

---
title: "How to Offer Free Shipping on Shopify (Tested)"
description: "Free shipping over a threshold is one checkbox, not two rates. Here is the setup, plus the discount rule that takes free shipping away at checkout. Tested end to end."
---

## The problem

Free shipping is the offer shoppers respond to most, and the setup is buried in a settings page most merchants only open once.

Worse, half the guides online describe an older version of the admin where you built two competing rates and hoped Shopify picked the right one. That is not how it works now.

I set the whole thing up on a test store and pushed real carts through checkout to see what actually happens. Below is the current path, the numbers at each step, and one rule that costs stores money without anybody noticing.

## Two different mechanisms, and they behave differently

Shopify can give free shipping in two unrelated ways. Choosing the wrong one is the source of most confusion.

**A shipping rate** lives in **Settings → Shipping and delivery**. It is part of your delivery pricing. Use it for a standing offer like "free delivery over \$50".

**A shipping discount** lives in **Discounts**. It is a promotion. Use it for a campaign, a code, or a customer segment, which is a saved search of your customer list that keeps itself up to date.

The important difference: a shipping **rate** with a minimum is calculated from the cart total at that moment, so a discount can pull the cart under the threshold and remove it. A shipping **discount** ignores your rates entirely and just makes delivery free.

Set up the rate first. It is the one most stores actually want.

## Free shipping over an amount is one checkbox

Go to **Settings → Shipping and delivery**, open the shipping profile that holds your products, and find the zone you want to change. Click **Add shipping option**.

You get a small dialog. Give the option a name, set a **Rate type** of Flat, put in your normal price, and pick a **Transit time**. Transit time is required now, so a missing one is why Save stays greyed out.

Then tick **Offer free shipping**. A field appears underneath.

![The Add shipping option dialog with Standard shipping at 9.00, transit time 3 to 5 business days, Offer free shipping ticked and a minimum order amount of 50.00](/images/blog/shopify-free-shipping/01-offer-free-shipping-minimum-order.png)

**Minimum order amount** is your threshold. That is the whole feature.

You do not create a second rate. You do not add price-based conditions. One shipping option carries both prices: it charges the flat rate under the threshold and nothing over it.

Once saved, the zone row summarises it in one line: *"Standard shipping - Free for orders \$50.00 and up - 3-5 business days - \$9.00"*.

Older tutorials tell you to create two rates with overlapping price conditions. That still works, but it is more to maintain and it is easy to leave a range where a cart matches neither rate and the shopper is told you do not ship to them.

## Proving it at checkout

I put one \$40 tee in a cart and entered a delivery address.

![Checkout showing Standard shipping at 9.00 and a total of 56.20 for a 40 cart](/images/blog/shopify-free-shipping/02-below-threshold-paid-shipping.png)

Under the threshold: **Standard shipping \$9.00**, total \$56.20.

Then I added a \$25 tote, taking the cart to \$65.

![The same checkout at 65, showing Standard shipping FREE and a total of 76.70](/images/blog/shopify-free-shipping/03-above-threshold-free-shipping.png)

Over the threshold: the same shipping option now reads **FREE**, and the summary line shows FREE instead of a charge. Total \$76.70.

One option, two behaviours, no second rate.

## The catch: a discount can take free shipping away

This is the part worth knowing before you launch a promotion, and I have never seen it mentioned in a setup guide.

**The minimum order amount is measured after discounts.**

Same \$65 cart, still comfortably over the \$50 threshold. Then I applied a \$20 discount code.

![Checkout showing a 65 subtotal with a 20 order discount, shipping back to 9.00, and a banner saying the shipping options have changed](/images/blog/shopify-free-shipping/04-discount-removes-free-shipping.png)

Free shipping is gone. Shipping is back to \$9.00. The subtotal after the discount is \$45, which is under \$50, so the cart no longer qualifies.

Shopify does flag it, with a small banner on the delivery step: *"The shipping options have changed for your order. Review your selection."* In practice a shopper reads that as noise, or does not read it at all. They applied a coupon and were charged for delivery.

What to do about it:

- **Set the threshold below your promotion maths.** If you plan to run \$20 off, do not put free shipping at \$50 and advertise both at once.
- **Or hand out free shipping as a discount instead of a rate**, since a shipping discount ignores the threshold completely.
- **Or make the two discounts non-combinable**, so the shopper gets one or the other. That is what Shopify does by default anyway.

If you take one thing from this article, take this one. It is invisible in the admin and only shows up in real carts.

## Free shipping as a discount

The second mechanism. Go to **Discounts → Create discount → Free shipping**.

You choose whether it is automatic or a code, which countries it covers, and optionally a minimum purchase amount of its own.

I made a code called SHIPFREE with no minimum, then applied it to a \$40 cart, which is under the rate's \$50 threshold and would normally be charged \$9.

![Checkout showing shipping 9.00 struck through and replaced with FREE, credited to the SHIPFREE code, total 47.20 with savings of 9.00](/images/blog/shopify-free-shipping/05-free-shipping-code-beats-the-rate.png)

The \$9.00 is struck through and replaced with **FREE**. Total \$47.20, savings \$9.00.

The shipping discount overrode the rate. It does not care what your minimum was.

That makes it the right tool for a limited campaign, a win-back code, or a specific customer group, and the wrong tool for a permanent policy, because every order gets a discount record attached to it.

One limit to know: **only one shipping discount can apply per order**, and Shopify picks whichever is worth more. You cannot stack "free shipping" on "\$5 off shipping".

## Free shipping on certain products only

Shipping rates belong to a **shipping profile**, and a profile holds a set of products. That is the lever.

Go to **Settings → Shipping and delivery** and click **Add custom profile**. Give it a name, add the products that should get free shipping, add a zone, and give that zone a shipping option with **Offer free shipping** ticked.

![Settings, Shipping and delivery in the Shopify admin, showing the Store default General profile and custom profiles below it, with Add custom profile underneath](/images/blog/shopify-free-shipping/05-settings-shipping-and-delivery.png)

Everything you do not move stays in the General profile with its existing rates.

This is how you offer free delivery on small light goods while still charging for a mattress. It is also how I isolated the whole test in this article: I made a profile called "Harbour apparel" with three products in it, so none of the store's other rates changed.

Two things to watch:

- A product can only be in one profile at a time. Moving it into a custom profile removes it from General coverage, so the custom profile needs a zone for every country you ship to or those customers are told delivery is unavailable.
- If a cart mixes products from two profiles, Shopify may split it into two shipments with separate charges. That is usually what you want, but it surprises shoppers, so check a mixed cart before you launch.

## Free shipping to certain countries only

That is the **zone**, not the rate.

Inside a profile, a zone is a list of countries with its own shipping options. Put the countries that get free shipping in one zone with a free option, and the rest in another zone with paid options.

For "free shipping in the contiguous US only", create a zone containing the United States but with Alaska and Hawaii unticked in the state list, then a second zone with just those two states and a paid rate.

The state list is inside the country row in the zone editor. You have to expand the country to see it.

## Should the threshold be before or after tax?

Before tax, and before shipping. Shopify compares the **subtotal after discounts** against your minimum. Tax is added after the shipping decision is made, which is why the \$65 cart in the screenshot qualified even though its total with tax was \$76.70.

## Does free shipping show in the cart?

Not by itself. The cart page does not know the delivery address, so it cannot resolve a rate. Shipping only appears at checkout.

What stores do instead is show a progress message in the cart, of the "you are \$10 away from free shipping" kind. That is separate from this setup, and it is built as [a free shipping progress bar](/blog/shopify-free-shipping-progress-bar) with no app.

Keep the two ideas apart. The bar is a display. The rate is the actual rule. Changing your threshold means changing both.

## What to check if it is not working

**Free shipping is not appearing over the threshold.** Check that the cart is over the threshold **after discounts**, and check that the products are in the profile whose rate you edited. If another discount is involved, read [discount combinations](/blog/shopify-discount-combinations) too.

**No shipping options at all at checkout.** The address is in a country with no zone in that product's profile. This is the classic side effect of creating a custom profile and forgetting a country.

**Two shipping charges on one order.** The cart contains products from two profiles. Expected, but worth confirming it is what you want.

**The rate shows the flat price even on a big cart.** Open the shipping option and check that **Offer free shipping** is ticked rather than there being a second free rate that lost. Also confirm you edited the right zone.

**Save is greyed out in the dialog.** Transit time is required. Pick one.

## The main points
- Free shipping over an amount is **one shipping option** with **Offer free shipping** ticked and a **minimum order amount**, not two competing rates.
- Transit time is now mandatory on a shipping option.
- Verified: a \$40 cart paid \$9.00, a \$65 cart paid nothing, from the same option.
- **The minimum is measured after discounts.** A \$20 code on a \$65 cart dropped it to \$45 and took the free shipping away, with only a small banner to warn the shopper.
- A **free shipping discount** ignores the rate entirely and works on any cart. Good for campaigns, wrong for a permanent policy.
- Free shipping on **certain products** is a custom shipping profile. On **certain countries** it is a zone.
- Only one shipping discount can ever apply to an order.


---

---
title: How to Edit the Shopify Gift Card Email
description: Shopify sends the same stock gift card picture to every recipient, whatever product they bought. Here is the one edit that makes each gift card email show its own product image, tested end to end.
---

## The problem

A merchant asked about this on the Shopify Community and it is one of those problems that sounds like a setting and is not.

They sell six gift cards. Birthday, Christmas, Congratulations, Patriotic, Generic and Thank You. Each one is a separate product with its own artwork, and the artwork is set as the first image on the product.

They assumed Shopify would use that image when it emails the gift card to the recipient. It does not. Every recipient gets the same stock picture of an orange and pink gift box, no matter which card was bought.

So someone buys the Christmas card, writes a message, and the person receiving it opens an email with generic Shopify artwork and a code. The whole point of designing six different cards is lost at the last step.

Here is what Shopify actually sends.

![The default Shopify gift card email showing a generic orange and pink gift box illustration](/images/blog/shopify-gift-card-email-image/01-default-gift-card-image.png)

You are not missing a checkbox. There is no setting anywhere in the Shopify admin that points this email at your product image.

## Why it happens

The gift card email is a notification template, and the picture in it is written into that template as a fixed file.

Open the template and you find this line:

```liquid
<img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="Gift card image" width="240" height="160">
```

`shopify_asset_url` points at a file on Shopify's own servers. `gift-card/card.jpg` is that orange box. It is hard coded, so it renders the same for every gift card on every store that has not changed it.

Nothing about your product is involved. The template never asks which product the card came from, so it never has the chance to use your artwork.

That is the whole bug, and it is also why no amount of re-uploading images or reordering media fixes it.

## The thing that makes one edit cover all six cards

This is the part worth understanding, because it is what stops this becoming six separate fixes.

There are two different objects in play and they are easy to confuse.

The **gift card product** is what sits in Products. "Birthday Gift Card", with a price, a title and media. That is what the customer buys.

The **gift card** is what Shopify creates after the purchase. It is the code and the balance, the thing you see under Products then Gift cards. That is what the email is about.

The link between them is a property called `gift_card.product`. Every issued card remembers which product it came from.

So the email does not have to know anything about occasions. It just asks the card "which product created you?" and uses that product's picture. Birthday card, Birthday artwork. Christmas card, Christmas artwork. Add a seventh card next year and it works with no further edits.

## Step 1: check the artwork is the product's first image

Do this before touching any code, because the fix reads the product's featured image and nothing else.

Go to Products, open your gift card product, and look at the Media section. The occasion artwork has to be the **first** image there.

![The gift card product page with the occasion artwork as the first image under Media](/images/blog/shopify-gift-card-email-image/02-product-first-media.png)

An image placed only in the product description does not count. The description is a separate field and the email never looks at it. It reads as a bug because the artwork is visibly on the product page, just not in the place the email reads.

If the artwork is second or third in Media, drag it to first.

## Step 2: open the right notification

Go to Settings, then Notifications, then Customer notifications. Scroll to the group called **Gift cards** and open **New gift card**.

![Settings, Notifications, Customer notifications, with New gift card under the Gift cards group](/images/blog/shopify-gift-card-email-image/03-new-gift-card-notification.png)

The name matters. A lot of advice online calls this "Gift card created", which is not what the admin says. In the current Shopify admin the two gift card notifications are:

- **New gift card** - sent to the customer or recipient when a gift card is fulfilled, or when you send one manually. This is the one you want.
- **Gift card receipt** - sent to the buyer when they add a recipient to a gift card. Not this one.

Click through to **Edit code**.

## Step 3: replace the image line, in both places

Now search the template for this line:

```liquid
<img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="Gift card image" width="240" height="160">
```

**It appears twice.** This is the single most common way this fix goes wrong, so it is worth being slow here.

Around line 103 there is one copy, and around line 195 there is another. They exist because the template branches:

- The first copy runs when the buyer sends the card to somebody else, so there is a recipient.
- The second copy runs when the buyer keeps the card themselves, so there is no recipient.

Replace **both**. If you only change the first one, every gift card someone buys for themselves still shows the old orange box, and you will spend an afternoon convinced the fix did not work.

Paste this over each copy:

```liquid
{% if gift_card.product.featured_image %}
  <img src="{{ gift_card.product.featured_image | image_url: width: 480 }}" alt="{{ gift_card.product.title }}" width="240">
{% else %}
  <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="Gift card image" width="240" height="160">
{% endif %}
```

![The replacement Liquid block in the New gift card notification template](/images/blog/shopify-gift-card-email-image/04-replacement-liquid-block.png)

Then hit Save.

### What the code does, in plain words

Line by line, because you should not paste code you cannot read.

`{% if gift_card.product.featured_image %}` asks whether this gift card came from a product that has a picture.

If it does, the next line renders that picture. `image_url: width: 480` asks Shopify for a 480 pixel wide copy, which keeps the email light while still looking sharp on a phone. `width="240"` displays it at 240 points, so it stays crisp on high resolution screens.

`alt="{{ gift_card.product.title }}"` puts the product name in the alt text, so a recipient with images turned off sees "Birthday Gift Card" instead of "Gift card image".

`{% else %}` covers the case where there is no product, and falls back to Shopify's original picture. Keep this branch. More on why below.

## What it looks like afterwards

I set this up on a test store with two gift card products, each with completely different artwork, and bought both.

The Birthday card email:

![The gift card email showing the Birthday artwork instead of the default box](/images/blog/shopify-gift-card-email-image/05-birthday-card-email.png)

The Thank You card email, from the same block of code with no extra changes:

![The gift card email showing the Thank You artwork, produced by the same code](/images/blog/shopify-gift-card-email-image/06-thank-you-card-email.png)

To confirm it was really working rather than just looking right, I checked the raw source of the delivered email. Before the edit the image tag pointed at Shopify's asset server:

```
themes_support/gift-card/card-fd4b15dd...jpg
```

After the edit, the same email carried the product image from the store's own files, with the product name as alt text:

```
/files/birthday.png?v=...&width=480   alt="Birthday Gift Card"
```

That is the proof the change is live rather than cached.

## Why you should keep the else branch

It is tempting to delete the fallback and leave only your product image. Do not.

Gift cards created by hand in the admin, under Products then Gift cards then Create gift card, are not attached to any product. They have a balance and a code but `gift_card.product` is empty.

Without the `{% else %}`, those emails render a broken image. With it, they fall back to Shopify's default picture and still look fine.

The same applies to gift cards issued by some apps, and to any refund or store credit flow that mints a card directly.

## How to test without buying anything

You do not need to place a real order to check your work.

Go to Products, then Gift cards, open any existing card, and click **Send gift card**. The dialog shows a live preview of the actual email, rendered from the template you just edited, using that specific card.

If the card came from a product, you should see the product artwork. If it was created by hand, you should see the default box, which confirms your fallback works too.

This is much faster than test purchases, and it is the same rendering path the real email uses.

## If it still shows the old image

A short checklist, in the order worth checking.

**You only replaced one copy.** By far the most common cause. Search the template again and confirm there is no remaining `gift-card/card.jpg` line outside an `{% else %}`.

**The artwork is not the first media item.** Reorder it in the product's Media section.

**The artwork is only in the description.** Upload it to Media as well.

**You edited Gift card receipt instead of New gift card.** Different template, different email.

**You are looking at an email sent before the edit.** Templates are applied at send time. Old emails keep the old picture forever. Resend from the gift card page to check.

**The gift card was created manually.** No product, so the fallback is correct behaviour rather than a failure.

## Does this affect anything else?

No. This template is only used for the gift card email.

Your order confirmation, shipping confirmation and every other notification are separate templates and are untouched. The gift card page on your storefront, the one behind the "View gift card balance" link, is part of your theme and is also unaffected.

If you want to undo it later, the notification editor has a Revert to default option that restores Shopify's original template.

## Apps, if you would rather not touch code

The edit above is free and takes five minutes, but if you want designed gift card emails, scheduling, balance reminders and multi-currency handling without editing Liquid, these are the established options: Rise Gift Cards & Store Credit, Gift Card Hero and Vify Professional Gift Cards.

They replace the gift card email entirely rather than editing Shopify's, so do not run one of these and the code edit at the same time.

## The short version

Shopify hard codes its own picture into the gift card email, twice. Point both copies at `gift_card.product.featured_image`, keep a fallback for cards with no product, and make sure the artwork is the first image on the product.

One edit, and every gift card you sell now and every one you add later sends its own artwork.


---

---
title: Shopify Header: Hamburger Menu on Desktop (Horizon)
description: Horizon shows a full menu bar on desktop and a hamburger icon only on phones. Here is how to show the hamburger menu on desktop too, and how to move the search icon to the right, with screenshots.
---

## The problem

A merchant on the Shopify Community asked how to get the hamburger menu on their desktop header. The hamburger is the small icon made of two or three lines that opens a slide-out list of links. Their store, on the Horizon theme version 4.2.0, showed it on phones. On a laptop it showed the full row of links instead: Home, Shop, Contact.

They wanted the phone layout everywhere. Logo in the middle, a clean header, and every link tucked behind the icon.

I rebuilt their setup on a test store running Horizon 4.2.0 and tested the fix on a desktop screen and a phone-sized screen. The two screenshots below show the starting point and the result.

![Horizon 4.2.0 header on desktop showing the full menu links Home, Shop and Contact](/images/blog/shopify-hamburger-menu-desktop-header/01-horizon-header-full-menu-on-desktop.png)

![The same header after the change, with a hamburger icon on the left and no menu links](/images/blog/shopify-hamburger-menu-desktop-header/02-horizon-hamburger-menu-on-desktop.png)

## Why Horizon only shows the hamburger on phones

Horizon 4.2.0 has no setting for this. I went through the header settings in the theme editor and none of them switches the menu style.

The theme decides on its own, each time the page loads. It shows the hamburger drawer in two cases:

- The visitor uses a touch screen, such as a phone or tablet.
- The menu links do not fit in the header, so the theme runs out of room and folds them away.

On a normal desktop window neither case is true, so you get the full menu bar.

That is why the usual advice of "shrink the logo" or "add more links until they overflow" is a poor fix. It works by accident and breaks as soon as someone opens the store on a wider monitor.

The reliable fix is to tell the theme to always use the drawer. You do that with a small piece of code, and you do not have to edit any theme file.

## What you need

- A store on Horizon 4.2.0. I tested only on that version.
- About ten minutes.
- Access to the theme editor (Online Store, then Themes, then Customize).

Horizon has relatives built on the same code, such as Atelier. I did not test them, so check the result on your own store before you publish anything. Preview the theme from the editor first.

## Step 1: Add a Custom Liquid section to the header

Liquid is the code Shopify themes are written in. A Custom Liquid section is a box in the theme editor where you paste your own code. Nothing in the theme's files changes, and you can delete the section later to undo everything.

1. Go to **Online Store** and then **Themes**.
2. Click **Customize** on your current theme.
3. In the **Header** group on the left, click **Add section**.

![The theme editor with the Header group open and the Add section button highlighted](/images/blog/shopify-hamburger-menu-desktop-header/03-add-section-in-header-group.png)

The Header group is the block at the top of the left sidebar. It holds the announcement bar and the header itself. Put the new section in this group, so that it loads on every page.

4. Choose **Custom Liquid** from the list.

## Step 2: Paste the code that forces the hamburger menu

5. Click inside the **Liquid code** box and paste this:

```html
<script>
(function () {
  var header = document.querySelector('#header-component');
  if (!header) return;
  var force = function () {
    if (header.dataset.menuStyle !== 'drawer') header.dataset.menuStyle = 'drawer';
  };
  force();
  new MutationObserver(force).observe(header, { attributes: true, attributeFilter: ['data-menu-style'] });
})();
</script>
```

![The Custom Liquid box in the theme editor with the code pasted in](/images/blog/shopify-hamburger-menu-desktop-header/04-paste-hamburger-menu-code.png)

6. Click **Save** at the top right of the editor.

![The Save button at the top right of the theme editor](/images/blog/shopify-hamburger-menu-desktop-header/05-save-button.png)

Here is what the code does. The theme stores its menu style on the header as a label, either "menu" or "drawer". The first part of the code sets that label to "drawer". The second part watches the label. If the theme tries to switch it back to "menu" when the window is resized, the code changes it to "drawer" again.

You need the watching part. Without it the full menu comes back whenever the window is resized, and a test on a desktop browser looks fine only until you drag the window edge.

## What you get on desktop

After saving, reload the store preview on a desktop screen. The menu links are gone and the hamburger icon sits at the left. Clicking it opens the same slide-out panel that phone visitors already see, with your menu links, the currency picker and a row of products.

![The slide-out menu panel open on a desktop screen after the change](/images/blog/shopify-hamburger-menu-desktop-header/10-hamburger-drawer-open-on-desktop.png)

I opened the menu, closed it with the Escape key and scrolled the page. The page scrolled normally afterwards.

## Problem two: the search icon moves to the left

The merchant came back with a second request. The hamburger worked, but the search icon now sat on the left, right next to the hamburger. They wanted it on the right with the Account and Cart icons.

This follows from how Horizon lays out its phone header. The phone layout has two slots on the left, one for the hamburger and one for search. It has two slots on the right, which Account and Cart already fill. When you force the phone layout onto desktop, search lands in the second left slot.

Here is the header after the first fix, with search on the left.

![The desktop header after the first fix with the search icon next to the hamburger on the left](/images/blog/shopify-hamburger-menu-desktop-header/06-search-icon-on-the-left.png)

The fix is to give the header one more slot on the right and move search into it. I added a short block of style rules to the same Custom Liquid section. The rules go above the script.

## Step 3: Replace the code with the updated version

1. Go to **Online Store**, then **Themes**, then **Customize**.
2. In the **Header** group on the left, click the **Custom Liquid** section you added earlier.

![The Header group in the theme editor with the Custom Liquid section highlighted](/images/blog/shopify-hamburger-menu-desktop-header/08-open-custom-liquid-section.png)

3. Click inside the **Liquid code** box and delete the old code.
4. Paste this updated code instead:

```html
<style>
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: 44px 44px 1fr 44px 44px 44px;
    grid-template-areas: 'leftA leftB center rightS rightA rightB';
  }
  #header-component[data-menu-style='drawer'] .header__columns .search-action {
    grid-area: rightS !important;
  }
</style>
<script>
(function () {
  var header = document.querySelector('#header-component');
  if (!header) return;
  var force = function () {
    if (header.dataset.menuStyle !== 'drawer') header.dataset.menuStyle = 'drawer';
  };
  force();
  new MutationObserver(force).observe(header, { attributes: true, attributeFilter: ['data-menu-style'] });
})();
</script>
```

![The Custom Liquid box showing the updated code with the style rules at the top](/images/blog/shopify-hamburger-menu-desktop-header/09-replace-code-in-custom-liquid.png)

5. Click **Save**.

The style block redraws the header grid in drawer mode. It adds a sixth column and puts the search button in it, next to Account and Cart. The script is the same as before.

Here is the result. Search now sits with Account and Cart on the right, and the hamburger stays on the left.

![The desktop header after the second fix with the search icon on the right next to Account and Cart](/images/blog/shopify-hamburger-menu-desktop-header/07-search-icon-on-the-right.png)

## Check it on a phone

The new layout also applies on phones, because phones already use the drawer. I loaded the preview at a phone width of 390 pixels. The hamburger sat on the left and search, Account and Cart sat in a row on the right.

My test store's name is long, so it wrapped onto two lines in the middle of the header. If your store name is long too, expect the same wrap, because the center column now has one fewer slot of space. A short name or a logo image fits.

![The phone-width header with the hamburger on the left and the search, account and cart icons on the right](/images/blog/shopify-hamburger-menu-desktop-header/11-mobile-header-after-the-change.png)

## If something does not look right

**The full menu is still showing on desktop.** Check that the Custom Liquid section is inside the Header group, not in the page template below it. Then reload the store with the browser cache cleared. I saw an old copy of the page once on my own test, right after saving, and a reload fixed it.

**The search icon is still on the left.** Make sure the style block is above the script and that you deleted the old code first. Two copies of the script do no harm, but a half-pasted style block breaks the rules.

**The page freezes when you open the menu.** The merchant mentioned a freeze early on. I could not reproduce it on Horizon 4.2.0. The page scrolled after I opened and closed the menu, and the merchant later said the menu was working. If your store still freezes, test it in a private window with apps turned off. A pop-up or chat app that locks page scrolling is a common cause.

**You want to undo it.** Delete the Custom Liquid section from the Header group and save. The theme goes back to its normal behavior, since nothing in the theme files was edited.

## Two other ways to get the same result

**Edit the theme files.** Another answer on the same thread changes one line in the theme's main layout file and one line in its script file, so the theme always picks the drawer. It works too. The drawback is that a theme update overwrites those files, and you have to repeat the edits after every update. The Custom Liquid section is a separate piece of the header group, so it is easier to find and remove.

**Use an app.** Header and mega menu apps in the Shopify App Store change the menu style without code. They cost a monthly fee, and you now have another app loading on every page. For one layout change I would use the code.

## Related questions about the Shopify header

**How do I edit the header in Shopify?** The Header group at the top of the editor sidebar holds the header and the announcement bar. Click Header to change the logo, menu, colors and icons. On Horizon, the Header section also has the search settings: whether to show search, and where to place it.

**How do I add a search bar to the Shopify header?** Turn on the search option in the Header section settings. The icon opens a search box when a visitor clicks it. The code in this article only moves the icon. It does not add search to a header that has it switched off.

**Can I have different header menus on different pages?** Shopify lets you assign a different menu to a single page by using a template, and a community thread covers it. That is a separate change from the menu style.

## Words used in this article

**Hamburger menu.** The icon made of two or three horizontal lines that opens a hidden list of links.

**Drawer.** The panel that slides in from the side when you click the hamburger.

**Header group.** The top block of the theme editor sidebar, which holds the announcement bar and the header.

**Custom Liquid.** A section where you paste your own code, without touching the theme's files.

## Summary

- Horizon 4.2.0 has no setting for a desktop hamburger menu. It picks the drawer on touch screens and when the links run out of room.
- A Custom Liquid section in the Header group forces the drawer on every screen size.
- A short style block moves the search icon to the right, next to Account and Cart.
- I tested both changes on Horizon 4.2.0 on a desktop and a 390 pixel wide phone preview, and the menu opened, closed and scrolled normally.


---

---
title: Shopify Header Covering the Announcement Bar on Mobile
description: On a phone, your Shopify header sits on top of the announcement bar and hides half of it. The fix is a few lines of Custom CSS in Theme settings. Tested on a Nordic store, with the exact numbers.
---

## The problem

A merchant on the Nordic theme asked about this on the Shopify Community. They added an announcement bar above their header. On a computer it looked fine. On a phone, the header and the announcement bar ran into each other, and the layout looked cluttered.

I reproduced it on a test store running Nordic 1.5.1, the same version the merchant runs. I added an announcement bar with the text "Free shipping on all orders above Rs. 999" and a **View More** button. I also turned on **Header overlay** and set **Sticky header** to **Always**, which matches the merchant's setup.

On a 390px wide phone screen, the announcement bar is 70px tall. The header starts 40px from the top of the page. So the header covers the bottom 30px of the bar, which is where the View More button sits.

![Before: on a phone, the Nordic header covers the bottom of the announcement bar](/images/blog/shopify-header-covering-announcement-bar/01-before.png)

## Why the header lands on the announcement bar

Two Nordic settings work together here.

**Header overlay** is a setting on the Header section. It makes the header float over the first section of your home page instead of pushing it down. The theme editor notes that it only works when the first section is a slideshow. It is the setting that gives you a see-through header over a big hero image.

When the header floats like that, the theme has to know how tall the announcement bar is, so it can place the header just below it. Nordic takes that number from the announcement bar's **Height** setting. The default is 40.

The theme editor shows a small note under that Height setting: "Only on desktop devices." On a computer, the bar is held at that height, so the number and the real bar agree.

On a phone, the bar is not held at 40. It grows to fit its content. A line of text plus a button does not fit across a narrow screen, so the button drops to a second line and the bar grows to 70px. The header is still placed 40px from the top, so it lands 30px inside the bar.

That is why the problem shows up "especially on mobile," as the merchant put it. The longer your announcement, the worse it gets.

## The fix: tell Nordic how tall the bar really is on a phone

The fix changes the number Nordic uses for phone screens only. Once the theme uses the bar's real height, the header sits right below it. You paste the code into **Custom CSS**, a box in the theme editor where you can add your own styling code without editing any theme files.

These are the exact steps from my reply on the forum.

### Step 1 and 2: open the theme editor

In your Shopify admin, go to **Online Store**. Then click **Edit theme** on your Nordic theme.

![Go to Online Store, then click Edit theme on your Nordic theme](/images/blog/shopify-header-covering-announcement-bar/02-themes.png)

### Step 3: open Theme settings

Click the **Theme settings** icon at the top of the left panel. It sits next to the icon that shows your page sections.

![Click the Theme settings icon at the top of the left panel](/images/blog/shopify-header-covering-announcement-bar/03-theme-settings-icon.png)

### Step 4: open Custom CSS

Theme settings shows a list of groups: Colors, Typography, Cart and more. Click **Custom CSS** near the bottom of the list.

![Click Custom CSS in the Theme settings list](/images/blog/shopify-header-covering-announcement-bar/04-custom-css.png)

### Step 5: paste the code

Paste this code at the end of the box. If there is already code in the box, leave it there and add this below it.

```css
@media screen and (max-width: 749px) {
  html {
    --announcement-height: 70px !important;
  }
  .announcement-bar {
    min-height: var(--announcement-height);
  }
}
```

![Paste the code at the end of the Custom CSS box](/images/blog/shopify-header-covering-announcement-bar/05-paste-code.png)

The first line limits the code to screens narrower than 750px, which is where Nordic switches to its phone layout. The part inside sets the announcement bar's height for phones to 70px. The theme uses that number to place the header, and the bar is kept at least that tall, so the two can never disagree.

### Step 6: save

Click **Save** in the top right corner.

![Click Save in the top right of the theme editor](/images/blog/shopify-header-covering-announcement-bar/06-save.png)

## The result

After saving, I reloaded the store on the same 390px phone screen. The announcement bar runs from the top of the page down to 70px. The header now starts at 70px, directly below it, instead of at 40px. The View More button is fully visible.

![After: the header sits below the announcement bar on a phone](/images/blog/shopify-header-covering-announcement-bar/07-after.png)

I also scrolled down the page and back to the top. The header came back to 70px, right under the bar.

On a computer, nothing changes. The code only applies to phone-sized screens, and the header stays exactly where it was on desktop.

## If your announcement is longer

70px fits one line of text plus the button on a second line. If your announcement is longer, the bar grows again on a phone.

I tested a longer message on the same store: "Free shipping on all orders above Rs. 999 and easy 7 day returns across India." The bar grew to 85px. For a message like that, change `70px` to `90px` in the code.

To find the right number for your store, open your store on your phone after saving. If the header still covers part of the bar, raise the number by 10 or 20 and save again. A slightly larger number only adds a little space above the header, so it is safer to go over than under.

## Why not just move the header down?

Another reply in the thread suggested adding `top: 70px !important;` to the header itself. That places the header correctly when the page first loads.

That fixes the header's position, but it adds a second number to keep in sync. The bar's height and the header's position then live in two places, and if you change your announcement you have to update both.

The code above changes the one number Nordic already uses for both. It also holds the bar at least that tall on a phone, so the bar and the header always agree.

## Another option: keep the announcement on one line

If you would rather not add code, keep the announcement short enough to fit on one line on a phone. Another reply in the thread suggested hiding the View More button on phones for the same reason.

That works when your announcement is short. It does not work when the text itself wraps. A button that links to a sale or a collection is also worth keeping, so the Custom CSS fix is the one I recommend.

## Header terms that are easy to mix up

**Announcement bar.** The thin strip at the very top of the page, used for shipping offers, sales and short notices. In Nordic it is its own section in the Header group of the theme editor, with its own Height setting and slides.

**Header.** The row with your logo, menu, search, account and cart icons.

**Header overlay.** A Nordic Header setting that floats the header over the first section of the home page. This is the see-through header look, and it is the setting that makes this overlap possible.

**Sticky header.** A Nordic Header setting with three options: None, On scroll up and Always. It decides whether the header stays on screen while a shopper scrolls. It changes how the header moves, not where it starts.

If your header covers your slideshow rather than your announcement bar, that is a different problem, caused by the transparent header setting itself. The [Shopify transparent header guide](/blog/shopify-transparent-header) covers that one.

## If it did not work

**Is the code in the right box?** Paste it in **Theme settings > Custom CSS**. The Announcement bar section and the Header section each have their own Custom CSS box too, but this code belongs in the Theme settings one.

**Did you check on a phone?** The code only applies to screens narrower than 750px. On a computer you will see no change, which is expected. To check from a computer, make your browser window narrow, or open your store on your phone.

**Does the header still cover part of the bar?** Your announcement is taller than 70px on a phone. Raise the number in the code, for example to 90px, and save.

**Is there empty space between the bar and the header now?** The number is larger than your bar needs. Lower it by 10 and save again.

**Did Shopify change your code after saving?** Shopify tidies the Custom CSS box when you save. On my test store it spread a one-line rule over three lines and removed a blank line. That is only formatting, and the code works the same.

## What to do

- Follow steps 1 to 4 above to reach the Custom CSS box.
- Paste the code at the end of the box and save.
- If your announcement is long, change `70px` to `90px`.
- Your desktop layout does not change.

I tested every step of this on a Nordic store before writing it.


---

---
title: "Shopify Hero Image: Fix Mobile LCP with fetchpriority"
---

## The problem

A merchant asked this on the Shopify Community. They run the Heritage theme, and they wanted to add `fetchpriority="high"` and `loading="eager"` to the hero image in their homepage banner, to improve their mobile LCP score.

It is a good instinct. The homepage banner is almost always the slowest thing to paint on mobile, and those two attributes are exactly what browsers use to prioritise an image.

But there is a catch that trips people up, and it is the reason a store can add all the "right" code and still see a slow score.

Here is what actually controls the banner's priority in Heritage, how to check what your store is really sending, and the smallest change that fixes it. I reproduced all of it on a test store.

## What LCP is, in plain words

LCP stands for Largest Contentful Paint. It is one of Google's Core Web Vitals, and it measures how long the biggest thing on screen takes to appear.

On a typical Shopify homepage, that biggest thing is the hero banner image. So "improving LCP" almost always means "getting the banner image to load and paint sooner".

A good LCP is 2.5 seconds or less on mobile. Between 2.5 and 4 seconds is "needs improvement". Over 4 seconds is poor. Google uses this number as a ranking signal, so a slow banner is not just a feel problem, it can hold back your search visibility.

Two browser attributes decide how urgently an image loads:

- `fetchpriority="high"` tells the browser to fetch this image before other images. For a hero, that is what you want.
- `loading="eager"` tells the browser to load the image right away instead of waiting until it is near the viewport. The opposite is `loading="lazy"`.

The merchant wanted both on their banner. Reasonable. But on Heritage, one of them is already handled, and the other is set in a way most people miss.

## Heritage is a Horizon theme, and it already sets fetchpriority

Heritage is part of Shopify's Horizon theme family. The whole family shares a lot of code, including the file that renders the homepage banner: `sections/hero.liquid`.

Open that file and you find this near the top:

    assign fetch_priority = 'auto'

    if section.index == 1
      assign fetch_priority = 'high'
    endif

Then, further down, the banner image is output with `fetchpriority: fetch_priority`.

So Heritage does try to do the right thing. If the banner is the first section on the page, it sends `fetchpriority="high"` on its own. You do not need an app or a custom snippet for that part.

The problem is that one line: `if section.index == 1`.

## Why the banner still loads at "auto"

`section.index` is the position of a section on the page. The very first section under the header is index 1. The next one is index 2, and so on.

Read the code again. The banner only gets `fetchpriority="high"` when it is section number 1. If anything sits above your banner, the banner is no longer first, and it falls back to `fetchpriority="auto"`.

Plenty of common things push the banner down to second place:

- An announcement bar built as its own section
- A small text or "rich text" row above the banner
- A spacer or divider section
- A promo strip you added months ago and forgot about

In every one of those cases, the banner is section 2, `section.index == 1` is false, and the browser is told nothing special about the image. That is usually why LCP stays slow even though "the code is there".

On my test store I put a small text section above the banner. The banner image loaded as `fetchpriority="auto"`, exactly as the code says it should.

![Banner not first: fetchpriority falls back to auto](/images/blog/shopify-hero-image-lcp/01-banner-fetchpriority-auto.jpeg)

## Check what your store is actually sending

Do this before you change any code. It takes ten seconds and it tells you whether you even have a problem.

1. Open your homepage in a desktop browser.
2. Right-click the banner image and choose Inspect.
3. Find the `<img>` tag in the panel that opens.
4. Look at its `fetchpriority` value.

Now you know which case you are in:

- If it says `fetchpriority="high"`, you are already optimised for this. Your banner is the first section and there is nothing to change. Move on to other LCP work.
- If it says `fetchpriority="auto"` (or the attribute is missing), your banner is not the first section, and the fix below applies.

This check matters because half the advice online tells people to "add fetchpriority to the hero", when their theme already adds it and the real issue is section order.

## Fix A: reorder, no code

The simplest fix does not touch any files.

Open the theme editor. In the section list on the left, drag your banner so it is the very first section under the header. Move the announcement bar, text row, or spacer below it, or into the header group where announcements usually belong.

Save. Because the banner is now section 1, Heritage sets `fetchpriority="high"` on it automatically. No code, no risk, and it survives theme updates.

Choose this option if the section above your banner can reasonably move. It is the cleanest fix by far.

## Fix B: one small code change

Sometimes the section above the banner has to stay where it is. In that case, make Heritage treat the first two sections as high priority instead of only the first.

Go to Online Store, then Themes. On the Heritage theme, open the three-dot menu and choose Edit code. In the file list, open `sections/hero.liquid`.

![Online Store, Themes, Edit code, sections/hero.liquid](/images/blog/shopify-hero-image-lcp/02-edit-hero-liquid.jpeg)

Find this line:

    if section.index == 1

Change it to:

    if section.index <= 2

Save. Now the banner keeps `fetchpriority="high"` even when one section sits above it. If you have two or more sections above the banner, raise the number to match, for example `<= 3`.

After the change, the same banner image on my test store loaded with `fetchpriority="high"`.

![After section.index is less than or equal to 2, the banner loads fetchpriority high](/images/blog/shopify-hero-image-lcp/03-banner-fetchpriority-high.jpeg)

One caution. This is a theme file edit, so keep a note of it. A future Heritage update can overwrite `hero.liquid` and undo the change, and you would reapply it. Fix A never has that problem, which is why it is the first choice when it is possible.

## Do you need loading="eager"?

No, and this is worth understanding rather than just cargo-culting.

Shopify's image rendering only adds `loading="lazy"` to images that are lower down the page. The hero banner is at the top, so the theme does not lazy-load it. It already loads eagerly.

Adding `loading="eager"` to something that is not lazy changes nothing. The browser was going to load it right away regardless. So for the Heritage banner, `fetchpriority` is the real lever, and `loading` is a no-op.

If you want to confirm this on your own store, inspect the banner `<img>` again. You will not see `loading="lazy"` on it. That absence is the theme telling the browser to load it now.

## fetchpriority vs loading vs preload

These three get mixed up constantly, so here is the plain-English version.

- `fetchpriority` sets the order the browser fetches things in. `high` means "fetch this before other images". `low` means "fetch this after". `auto` means "you decide, browser". This is the one that helps a hero.
- `loading` sets when the browser starts loading an image. `eager` means now. `lazy` means wait until it is near the screen. Lazy is great for images far down the page and wrong for a hero.
- `preload` is a separate tag you put in the page head to start downloading a file even earlier, before the browser has found it in the HTML. Themes sometimes preload the hero for a further speed gain.

For most Heritage stores, getting `fetchpriority="high"` onto the banner is the whole job. Preload is an advanced extra, and it can backfire if you preload the wrong image, so leave it alone unless you are measuring carefully.

## What is a good LCP score on mobile?

Aim for 2.5 seconds or less. That is the "good" band Google uses.

Measure it on mobile, not desktop, because mobile is slower and it is the number Google weights most for most stores. Use PageSpeed Insights or the Core Web Vitals report in Search Console. Both give you the real number, and PageSpeed also lists the exact element it measured as the LCP.

If PageSpeed says your LCP element is the banner image, the fix in this post is directly relevant. If it says the LCP element is a block of text or a different image, then prioritising the banner will not move your score, and you should optimise whatever element PageSpeed actually named.

## Does fetchpriority really improve LCP?

Yes, when the LCP element is an image that was not already the top priority.

The browser has a limited number of connections and it guesses which resources matter most. Left to guess, it often treats a large hero image as just another image and fetches it a little late. `fetchpriority="high"` removes the guess and pulls the hero to the front of the queue, so it starts downloading sooner and paints sooner.

The size of the win depends on how much else is competing on the page. On a heavy homepage with lots of images and scripts, moving the hero to high priority can shave a noticeable chunk off LCP. On a light page it may be small. Either way it is a safe change with no downside for a genuine hero image.

## What about the mobile banner image?

Heritage lets you set a separate image for mobile. If you use that, the same `fetch_priority` value is applied to the mobile image too, so the fix above covers both. You do not need a second edit for mobile.

If your banner uses a video instead of an image, `fetchpriority` and `loading` do not apply the same way, and LCP is measured differently. That is a separate topic, but the section-order principle still holds: keep the banner high on the page.

## What to check if your score did not move

If you applied the fix and LCP is still slow, work through these.

- **Confirm the attribute changed.** Inspect the banner `<img>` again and check it now reads `fetchpriority="high"`. If it still says `auto`, the banner is lower than you think, and you need a higher number in the `section.index` check, or Fix A.
- **Confirm the banner is the LCP element.** Run PageSpeed Insights and read which element it names as LCP. If it is not the banner, this fix is not your bottleneck.
- **Check the image size.** A hero exported at 4000 pixels wide and several megabytes will be slow no matter its priority. Upload a reasonably sized image and let Shopify's responsive `srcset` serve the right size.
- **Check for a heavy app or script.** Chat widgets, review apps, and pop-up tools can delay the whole page. Priority helps the image start sooner, but a blocked main thread can still hold up the paint.
- **Give the CDN a moment.** Right after a theme change the first load can be slower while caches warm up. Measure a second time.

## The short version

Heritage already sets `fetchpriority="high"` on the banner, but only when the banner is the first section on the page. If anything sits above it, the banner drops to `fetchpriority="auto"` and your mobile LCP suffers.

Check with Inspect. If it says `auto`, either move the banner to the top (Fix A) or change `section.index == 1` to `section.index <= 2` in `sections/hero.liquid` (Fix B). Skip `loading="eager"`, because the hero is not lazy-loaded to begin with.


---

---
title: Shrink or Hide the Image Zoom Button in Shopify
description: The product-photo zoom button too big or distracting? Shrink, fade or hide it in Shopify with a little Custom CSS.
---

## The problem

A merchant asked about this on the Shopify Community.

They had a white circle with a magnifying glass inside it, sitting on top of their product photos. It is the image zoom button. Tap or click it and the photo opens larger.

Their complaint was simple. The button was too big. It covered part of the product image. It looked clumsy on the photo.

They did not want to turn zoom off. They liked the feature. They just wanted the button smaller, or the white circle gone, or the whole thing more see-through.

This is a very common ask. The zoom button is helpful. The default size is not.

I reproduced it on a test store on the Eclipse (Fluorescent) theme, the exact theme and version the merchant was running. Here is the button, big and white, sitting over the photo on a phone.

![Big white zoom button sitting on the product photo on mobile in the Eclipse theme](/images/blog/shopify-hide-image-zoom-button/01-before-zoom-button-mobile.png)

The good news is you do not need an app for this. You do not need to edit any theme files. A few lines of Custom CSS shrink the button, fade the circle, or remove it, and the zoom keeps working.

This is the fix for anyone searching for how to shopify hide zoom button, or how to shrink the shopify image zoom button without losing the feature.

## Why it happens

The zoom button is built into the theme. It is not something you added.

On Eclipse the button is a round element with a class name of `product-media__lightbox-zoom`. The white circle you see is not the button itself. It is a pseudo-element, a decorative shape the theme draws behind the icon using CSS. In the code it is the `:before` part of that button.

The magnifying glass on top is a separate icon. It has its own width and height, set with CSS variables the theme calls `--icon-width` and `--icon-height`.

So on screen you are really looking at three things stacked together.

- A round button, sized by a `--size` variable.
- A white circle behind it, drawn by the `:before` pseudo-element.
- A magnifier icon on top, sized by the icon variables.

That is the mechanism most forum answers skip. They tell you to make "the button" smaller, but the white circle and the icon are separate pieces. If you only shrink one, the button still looks off. You have to touch all three.

There is one more detail that matters. On Eclipse the button behaves differently by screen size. On phones (anything under 1024px wide) the button is always visible on the photo. On desktop it only appears when you hover over the image. That is why the button feels most intrusive on mobile. It is on screen the whole time.

## Before you start

This fix is written for Eclipse (the Fluorescent theme). The class names above are Eclipse's.

If you are on a different theme, the idea is identical but the class name changes. Dawn, Horizon, and other themes name the zoom button something else. Later in this post I show you how to find the correct name for any theme, so the same steps work for you.

To check your theme and version, go to Online Store, then Themes. Your theme name is at the top of the current theme card. Click the three dots, then Edit code, and the version shows in the theme information. I tested on Eclipse 5.3.1.

## The fix

Here are the steps. It is all done in one place, the theme's Custom CSS box. No code files, no app.

**Step 1. Open your theme editor.**

In your Shopify admin, go to Online Store, then Themes. Find your live theme and click Customize, or Edit theme.

![Online Store Themes page with the Edit theme button on the Eclipse theme](/images/blog/shopify-hide-image-zoom-button/02-edit-theme.png)

**Step 2. Open Theme settings and find Custom CSS.**

Inside the editor, click the gear icon on the left. That opens Theme settings. Scroll down the list until you see Custom CSS. This is a box where you can add styles that apply to your whole store.

![Eclipse theme editor open on Theme settings with Custom CSS highlighted in the sidebar](/images/blog/shopify-hide-image-zoom-button/03-custom-css-paste.png)

**Step 3. Paste this code, then Save.**

Paste the following into the Custom CSS box and click Save in the top right.

```
.product-media__lightbox-zoom{ --size: 30px; }
.product-media__lightbox-zoom .product-media__zoom-icon{
  --icon-width: 15px !important;
  --icon-height: 15px !important;
}
.product-media__lightbox-zoom:before{ opacity: .5; }
```

Here is what each line does, in plain words.

- The first line sets the button size to 30px. Eclipse's default is 44px, so this makes it smaller.
- The middle block shrinks the magnifier icon to 15px wide and tall, so the icon matches the smaller button.
- The last line fades the white circle to half visible, so it stops covering the photo so hard.

Save, then look at a product page. The button is smaller and softer, and zoom still works when you tap or click it.

![Smaller, see-through zoom button on the product photo after the CSS fix on mobile](/images/blog/shopify-hide-image-zoom-button/04-after-zoom-button-mobile.png)

**Adjust it to taste.**

The three values are yours to change.

- Bigger or smaller button: change `--size`. Try 26px for tiny, or 40px if 30px feels too small.
- More see-through: lower the `opacity`. Use `.3` for very faint, `.7` for barely faded.
- Icon size: change the `--icon-width` and `--icon-height` numbers together so the magnifier stays in proportion.

This is the whole of the shopify image zoom button css most stores need. Small, clean, and the feature stays.

## Remove the white circle completely

Some merchants do not want a circle at all. They want just the plain magnifier icon floating on the photo.

To do that, swap the last line of the code for this one.

```
.product-media__lightbox-zoom:before{ display: none; }
```

That hides the white circle entirely and leaves only the magnifying glass icon. Keep the first two blocks from the main fix if you also want the icon smaller.

This is the answer for the shopify remove zoom icon circle question. You are not removing the icon, you are removing the white disc behind it.

## An alternative: turn the zoom off entirely

Maybe you decide you do not want the button at all, not even a faint one.

Eclipse and most modern themes have a built-in setting for this. You do not need CSS for it.

- In the theme editor, open a product page in the preview.
- Click the product media or gallery section in the left sidebar.
- Look for an image zoom or "Enable image zoom" setting.
- Set it to off, or "No zoom", and Save.

That removes the whole button, circle and icon together. The trade-off is you lose the zoom feature. The merchant in the original thread did not want that. They liked zoom. So the CSS route above is the better fit if you want to keep the feature but tame the button. Use the theme setting only if you are happy to drop zoom.

There is a middle option too. Some themes let you choose the zoom style, like open in a lightbox versus hover-to-magnify. Changing the style sometimes changes or removes the on-image button. It is worth a look before you write any CSS.

## How do I hide the zoom button in Shopify?

To fully hide the button while keeping the rest of the page, add one rule to Custom CSS.

```
.product-media__lightbox-zoom{ display: none; }
```

That hides the whole button, circle and icon, using the theme's own class. The image itself is untouched. On Eclipse the zoom still works if the theme allows tap-to-zoom on the image directly, but on most setups hiding the button removes the obvious way to trigger zoom. So hide it only if you truly do not want people zooming, or if you plan to turn zoom off in theme settings anyway.

If your goal is to keep zoom but make the button subtle, use the shrink-and-fade fix higher up instead. Hiding and shrinking are different goals. Pick the one that matches what you want.

## What is the CSS class for the Shopify zoom button?

It depends on the theme. There is no single class every Shopify theme uses.

On Eclipse the button is `.product-media__lightbox-zoom` and the white circle is its `:before`. Other themes use names like `.product__media-icon`, `.product__media-toggle`, or `.zoom-button`. The name is set by whoever built the theme.

To find yours, open a product page in a desktop browser. Right-click the zoom button and choose Inspect. That opens the browser developer tools. The highlighted element in the code is your button. Read its `class` value, and that is the selector to use in your Custom CSS.

Then reuse the same fix, just replace `.product-media__lightbox-zoom` with your theme's class name. The approach carries over to any theme.

If you cannot right-click the button because it only shows on hover, hover the image first, then right-click, or use the developer tools element picker and move your mouse over the button.

## Does this fix change the desktop zoom button too?

Yes, it does. The CSS applies everywhere.

One thing tripped up the original merchant, and it is worth flagging. After they saved the code, they thought it only worked on mobile and not on desktop. They came back and corrected themselves. The fix had worked on desktop too. They had been looking at a preview mode that was not applying the saved styles.

So if the change looks like it only worked on phones, do not assume desktop is broken. Open your live store in a normal browser tab, not the theme editor preview, and check again. Custom CSS applies to both screen sizes at once.

Remember the desktop behavior difference from earlier. On desktop the button only appears when you hover the photo, so it feels less intrusive there anyway. The mobile view is where most people notice the button, because it is always on screen.

## Will this break the image zoom?

No. Shrinking, fading, or removing the white circle does not touch the zoom function.

The zoom is triggered by clicking or tapping the button, and the button is still there and still clickable. You are only changing how it looks, its size, its opacity, and the circle behind it. The click target still works.

The only version that stops zoom is hiding the whole button with `display: none`, or switching the theme's zoom setting off. Those remove the way to trigger zoom on purpose. The shrink-and-fade fix keeps everything working.

I tested this on Eclipse 5.3.1, the same version the merchant ran. The smaller, faded button still opened the enlarged photo on both phone and desktop.

## If it did not work

A few things to check if the button did not change after you saved.

- **You are looking at a cached or preview page.** Open your live store in a fresh tab and hard refresh. This is the exact thing that confused the original merchant.
- **Wrong class name.** If you are not on Eclipse, `.product-media__lightbox-zoom` is not your button. Inspect the button and use your theme's real class, as shown above.
- **Custom CSS box has a character limit.** If you already have a lot of CSS in there, some themes cap the length. Remove old unused rules to make room.
- **An app added its own gallery.** Some product-gallery or image-zoom apps replace the theme's gallery entirely. If yours does, the button belongs to the app, not the theme, and you style it from the app's settings or its own class.
- **The rule is being overridden.** If another style wins, add `!important` to the size and opacity lines, the same way the icon lines already use it.

## Terms people confuse

A few of these words get mixed up, so here is the plain-English version.

**Zoom button vs zoom feature.** The button is the little control on the photo. The feature is the enlarge-on-click behavior. You can style the button without touching the feature. You can also keep the feature and hide the button, though then people have fewer ways to trigger it.

**The circle vs the icon.** The white round shape and the magnifying glass are two separate pieces. On Eclipse the circle is the `:before` pseudo-element and the icon is a small SVG. Removing the circle leaves the icon, and shrinking the icon does not remove the circle.

**Custom CSS vs Edit code.** Custom CSS is a safe box in Theme settings for adding styles. Edit code opens the raw theme files. For this fix you only need Custom CSS. You never edit a file, so there is nothing to break and it is easy to undo, just delete the lines.

**Theme settings vs section settings.** Theme settings apply to the whole store, which is where Custom CSS lives. Section settings apply to one part of one page. The zoom toggle, if your theme has one, is usually a section or block setting on the product page, not in theme settings.

That is the full picture. Shrink it, fade it, drop the circle, or hide it completely. The Eclipse selectors are above, and the same steps work on any theme once you find its class name.


---

---
title: How to Hide Out of Stock Variants in Shopify
description: Filter a collection by Medium and Shopify still shows products where Medium is sold out. That is the filter engine, not your theme. Here is why, and the Liquid fix, tested on a live store.
---

## The problem: the size filter shows sizes that are sold out

A customer filters your collection page by Medium. The grid fills with products. They click one, and Medium is greyed out.

The filter matched the product, not the size.

A merchant hit this on the Impulse theme running Shopify's Search & Discovery app and asked whether there was a setting they had missed. There is not, and it is worth understanding why before you go looking for one.

I tested this on a live store and worked out both what causes it and what actually fixes it.

## Why it happens: Shopify's filters are product-level

This is the part that saves you hours of hunting through settings.

Shopify's native storefront filtering has a hard limit:

- **A size filter matches any product that has that size**, regardless of whether that size is in stock.
- **The only stock-aware filter, Availability, is product-level.** A product counts as in stock if any one variant is in stock.

Put those together and the consequence is unavoidable. Ticking **Medium** and **In stock** cannot mean "Medium is in stock." It means "this product has a Medium" and "something on this product is in stock." A shirt with Medium sold out but Large available satisfies both.

That is the engine, not your theme.

Impulse, Dawn, Horizon, Refresh and every other Theme Store theme are required to use Shopify's filtering engine, which the Search & Discovery app configures. So switching themes will not fix it, and neither will any toggle in Search & Discovery.

Worth knowing: you can tick both **Available** and **Unavailable** and a partially stocked product still shows. Counter-intuitive, but consistent with product-level matching.

## Things that look like a fix but are not

Before the two real options, here is what people try first. None of these solve variant-level filtering:

- **Search & Discovery settings.** It configures which filters appear, not how matching works.
- **Theme settings.** No Theme Store theme can override the engine.
- **The collection sort "hide out of stock" style options.** These act on whole products, not variants.
- **Continue selling when out of stock.** This makes the variant purchasable, so it hides the symptom by removing the sold-out state entirely.
- **Switching themes.** Same engine underneath.

If you have already tried these and nothing changed, you were not doing it wrong.

## Option 1: a variant-level filter app

This is the reliable route, and it is the right answer for most stores.

Apps like **Boost AI Search & Filter** or **Globo Smart Product Filter** build their own index at the variant level rather than using Shopify's. In their settings, look for **show variants as separate products** or **hide out-of-stock variants**.

The reason to prefer an app over the code below is not reliability of the filtering itself. It is that an app keeps your **product counts and pagination correct**, because the filtering happens before the page is built.

Trade-offs: a monthly cost, another app rendering your collection page, and filter markup that no longer comes from your theme.

If you run a large catalog, or filtering is central to how people shop your store, use an app.

## Option 2: hide the mismatched cards in Liquid

If you would rather not add an app, you can hide the cards in the theme.

Be clear about what this does. It **hides cards after Shopify has already selected them**. The filtering itself is unchanged, so the counts do not change. More on that limitation below, because it matters.

### Where the code goes

Find the product loop in your collection template. The file differs by theme generation:

- **Dawn, Refresh, Craft and other Online Store 2.0 themes**: `sections/main-collection-product-grid.liquid`, just after `{%- for product in collection.products -%}`
- **Impulse, Debut and other vintage themes**: `sections/collection-template.liquid`, inside the product loop, right before the card renders

Duplicate your theme before editing. **Online Store > Themes > ... > Duplicate.** That copy is your rollback.

### The code

```liquid
{%- assign size_option_name = 'Size' -%}
{%- assign size_param = 'filter.v.option.' | append: size_option_name | handleize -%}

{%- assign active_sizes = '' -%}
{%- for f in collection.filters -%}
  {%- if f.param_name == size_param -%}
    {%- for v in f.active_values -%}
      {%- assign active_sizes = active_sizes | append: '|' | append: v.value | append: '|' -%}
    {%- endfor -%}
  {%- endif -%}
{%- endfor -%}

{%- if active_sizes != '' -%}
  {%- assign size_pos = 0 -%}
  {%- for opt in product.options_with_values -%}
    {%- if opt.name == size_option_name -%}{%- assign size_pos = opt.position -%}{%- endif -%}
  {%- endfor -%}

  {%- if size_pos > 0 -%}
    {%- assign match_in_stock = false -%}
    {%- for v in product.variants -%}
      {%- if v.available -%}
        {%- assign vsize = '' -%}
        {%- if size_pos == 1 -%}{%- assign vsize = v.option1 -%}
        {%- elsif size_pos == 2 -%}{%- assign vsize = v.option2 -%}
        {%- elsif size_pos == 3 -%}{%- assign vsize = v.option3 -%}{%- endif -%}
        {%- assign needle = '|' | append: vsize | append: '|' -%}
        {%- if active_sizes contains needle -%}{%- assign match_in_stock = true -%}{%- endif -%}
      {%- endif -%}
    {%- endfor -%}

    {%- unless match_in_stock -%}{%- continue -%}{%- endunless -%}
  {%- endif -%}
{%- endif -%}
```

### What it actually does

Read in plain English, it:

1. Works out which sizes the customer has currently ticked, from `collection.filters`.
2. Does nothing at all if no size filter is active, so unfiltered pages are untouched.
3. Finds which option position Size occupies on this product, because Size is not always Option 1.
4. Loops the variants and asks whether any **available** variant matches a ticked size.
5. Skips the card if none does.

That third step is the one hand-written versions usually get wrong. On one product Size might be Option 1, on another Option 2 behind Colour. Hard-coding `option1` breaks with no error half your catalog.

### Before and after

Filtered by a size, without the fix. The third product has that size sold out and is still listed:

![Collection filtered by size, still showing a product whose filtered size is sold out](/images/blog/shopify-hide-out-of-stock-variants/01-before-sold-out-size-still-listed.jpeg)

Same filter with the fix applied. The third product is gone:

![The same filtered collection after the fix, with the sold-out-size product removed](/images/blog/shopify-hide-out-of-stock-variants/02-after-sold-out-size-hidden.jpeg)

I confirmed both directions on a Dawn test store with Search & Discovery installed: it hides the product whose filtered size is sold out, and it does not hide products that still have that size in stock. The second half matters more than the first, because an over-eager version of this hides inventory you could have sold.

### The limitations, stated plainly

This is a display-level patch, so:

- **The product count does not update.** It may say 12 products while showing 9.
- **Pagination does not update.** With 24 products per page, hiding 5 leaves 19 on that page, and page 2 still starts where it always did.
- **It only handles Size.** For Colour or another option, change `size_option_name`, or run the block once per option.
- **A page can look empty.** If every product on page 2 is filtered out, the customer sees a blank grid with pagination beneath.

If those matter to your store, that is the argument for the app route. There is no way around them in Liquid, because Shopify has already chosen the page's products before your theme runs.

## The related job: hiding out-of-stock products entirely

People often arrive at the variant problem when what they actually want is simpler: stop showing products that are completely sold out. That has proper built-in support.

**Automated collections.** Add the condition **Inventory stock is greater than 0**. Products drop out of the collection when they sell out and return when restocked, with counts and pagination correct because it happens at collection level.

**Collection sort.** Most themes offer a sort that pushes sold-out products to the end. They still appear, just last.

**Search & Discovery.** Enable the **Availability** filter so customers can hide sold-out products themselves.

The distinction is worth holding onto:

| What you want | Use |
| --- | --- |
| Hide products where every variant is sold out | Automated collection condition |
| Push sold-out products to the bottom | Collection sort setting |
| Let customers filter sold-out products out | Availability filter |
| Hide products whose *filtered size* is sold out | Filter app, or the Liquid above |

Only the last row needs any of the work in this article.

One caution before you hide everything: a sold-out product page still holds its rankings, backlinks and reviews. Removing it from collections is fine, but deleting it or returning a 404 throws that away. Keep the page live with a back-in-stock signup.

## If it did not work, check these

**Nothing changed.** Confirm the option is actually named `Size`. The comparison is exact, so `size` or `Sizes` will not match. Check on the product page under Variants.

**Every product disappeared.** `size_option_name` does not match any option, or the code landed outside the product loop. Check it sits after `{%- for product in collection.products -%}`.

**It works on some products, not others.** Those products have Size in a different option position. The code handles that already, so confirm you pasted the whole block including the `options_with_values` loop.

**Correct products, wrong count.** Expected. See the limitations above.

**Nothing changed on the live site.** You edited a different theme, or edited the duplicate you made as a backup. Check which theme is published.

**Broke after a theme update.** Updates replace section files. Re-apply, or move to an app if you update often.

## The honest summary

Shopify's storefront filtering is product-level, and no theme setting changes that.

If variant-accurate filtering matters commercially, a variant-level filter app is the correct answer and the Liquid is a stopgap.

If you just want customers to stop clicking through to sold-out sizes, the code above does that today, for free. You only have to live with the count being wrong.

Both are legitimate. Choose based on whether the number next to your collection title is something customers actually read.


---

---
title: Keep Products Out of Shopify Search Results
description: Stop sample or hidden products showing in your Shopify storefront search and backend search, without deleting them.
---

## The problem

A merchant asked about this on the Shopify Community. Their store sells a lot of material samples. Almost every real product has a matching sample product for each variant. That adds up to hundreds of extra sample records.

The pain is the search bar. Type any product name into the search box at the top of the Shopify admin, and the samples flood the list. The real product gets buried under six or seven sample rows. It slows the whole team down.

The question was simple. How do you shopify hide product from search so the samples stop showing, without deleting them?

I reproduced it on a test store on the admin/search view. I created a real product line called Marmoleum, then added a sample product for each colour: Sample - Marmoleum Clay, Sample - Marmoleum Pine, and so on. Then I searched "Marmoleum" in the admin top bar.

![The admin top search bar floods with sample products and buries the real ones](/images/blog/shopify-hide-product-from-search/01-admin-search-flooded-with-samples.png)

The result matched the merchant exactly. The samples listed first. The real Marmoleum products were pushed to the bottom of the list. So the problem is real and easy to trigger.

This post covers both sides of the request. First, how to keep samples out of the backend admin search. Then, how to shopify hide products storefront search too, so customers never see them either.

## Why it happens

Here is the part most forum answers skip. There are two different search boxes in Shopify, and they behave in different ways.

The first is the global search bar at the very top of the admin. It sits in the purple header on every page. That bar always searches everything. Products, orders, customers, and more. There is no setting to exclude a product from it. So a sample product will always turn up there. You cannot filter it out.

The second is the search and filter box on the Products page itself. That one respects filters. You can tell it to hide anything with a certain tag. This is the box you actually control.

So when people say they want to shopify exclude product from search, the honest answer depends on which box they mean. The top global bar cannot be filtered. The Products list search can. The trick is to stop working from the top bar and work from the Products list instead.

The storefront search is a third, separate thing. That is the search box customers use on your live website. It follows different rules again, which I cover further down.

## Before you start: tag your samples

The whole fix rests on one label. Every sample needs a shared tag so Shopify can tell them apart from real products. A tag is just a keyword you attach to a product.

Here is the fast way to tag them all at once.

- Go to the Products page in your admin.
- Search your sample word, for example "sample", in the Products list search box.
- Tick the checkbox at the very top of the list. That selects every product on the page.
- In the action bar that appears, click **Add tags**, type **sample**, and apply it.

Now every sample carries the tag "sample". If your samples already share a product type or a naming word, you can filter on that instead. But a clean tag is the most reliable.

## The fix: a saved "No samples" view

This is the quick win. You build a filtered view of the Products page that never shows samples, then you search inside that view.

**Step 1. Add a Tag filter and switch it to Is not.**

On the Products page, click the search and filter box. Choose **Tag**. By default the filter means "is". You need the opposite. Switch the operator to **Is not**, then pick **sample**.

![On the Products page, set the Tag filter to Is not sample](/images/blog/shopify-hide-product-from-search/02-tag-is-not-sample-filter.png)

That one switch is what does the work. "Tag is not sample" tells the list to show everything except your samples.

**Step 2. Save it as a view.**

Once the list looks right, click **Save**. Name the view something clear, like **No samples**.

![Save the filtered list as a view named No samples](/images/blog/shopify-hide-product-from-search/03-save-view-no-samples.png)

A view is a saved tab across the top of the Products page. It remembers the filter, so you never have to set it up again.

**Step 3. Search inside the view.**

Open your No samples view and use its search box. Now the samples never appear.

![The filtered view shows only the real Marmoleum products](/images/blog/shopify-hide-product-from-search/04-filtered-view-real-products-only.png)

I tested this on the store. Searching "Marmoleum" in the No samples view returned only the four real products. The six sample rows were gone. This is the reliable way to shopify search hide product from your own team's daily work.

**The typed shortcut.**

You can skip the filter menu entirely. Type this straight into the Products search box:

```
-tag:"sample"
```

The minus sign means "not this tag". Put the product name in front to search within the real products only:

```
Marmoleum -tag:"sample"
```

Same result, no menu clicking. This is handy once you know the tag.

## An alternative: collapse samples into variants

The saved view is a workaround. It hides samples from one list, but they still exist, and they still flood the global top bar. If you want the clutter gone everywhere, fix the structure instead.

Hundreds of standalone sample products is the real cause. So collapse them.

- Make one product called **Samples**, with a variant for each material or colour. A variant is an option of a single product, like a size or a colour, instead of a separate product.
- Or add the sample as an extra variant on the parent product itself.

Either way, hundreds of separate records drop to a handful. The noise disappears from every search at once, including the global top bar, not just the saved view.

This takes more work up front. But if samples are choking your admin every day, it pays back fast. If you must keep samples separate for fulfilment or reporting, at least lead the title with the word "Sample". Prefix matches rank higher, so your real products surface first.

## How to hide a product from Shopify storefront search

Everything above is about your admin. Customers never see that. But the merchant also asked to keep samples out of the storefront, which is the live website. That is a different job.

Storefront search only shows products that are published to the Online Store sales channel. A sales channel is a place your products can sell, like your Online Store, Point of Sale, or a marketplace. If a product is not published to the Online Store, customers cannot find it in storefront search, on collection pages, or by its direct link.

So to shopify hide products storefront search:

- Open the sample product in your admin.
- Find the **Publishing** box on the right.
- Untick **Online Store**.

The product stays in your admin. You can still order it internally. But it vanishes from the customer-facing search and the whole live site. This is the clean way to keep a product out of search for shoppers while keeping it alive for your team.

To do this in bulk, select all your samples on the Products page, then use **Remove from Online Store** in the action bar. Same idea, hundreds at a time.

## How do I exclude a product from search but keep it orderable?

This is a common follow-up. You want the sample gone from search, but staff still need to add it to an order.

Unpublishing from the Online Store does exactly that. The product is hidden from customers and from storefront search. But it still exists in the admin. Your team can add it to a draft order or a point-of-sale cart. Inventory still tracks. Nothing is deleted.

So the answer is: unpublish from the Online Store, do not archive or delete. Archiving pulls the product out of your active Products list too, which you may not want. Unpublishing is the lighter touch.

## Does a search app hide products from search?

Many stores run a search app, like Shopify's own Search & Discovery, or a paid one like Searchanise or Boost. These improve the storefront search box. Some let you boost or bury certain products in the customer results.

They can help fine-tune ranking. But they sit on top of your Online Store publishing. If a product is unpublished, it is already gone from search, with no app needed. So try the free publishing method first. Reach for a search app only when you want more control over ranking or synonyms, not just plain hiding.

None of these apps touch the admin global search bar. That bar is Shopify's own internal tool. No app or setting filters it.

## If it did not work

A few things trip people up.

- **You searched the top bar again.** The global bar at the top of the admin cannot be filtered. Make sure you are searching inside your saved Products view, not the purple header bar.
- **The tag has a typo.** "Sample" and "sample " with a trailing space are different tags. Re-check the exact tag on a sample product.
- **New samples are not tagged.** The filter only hides what carries the tag. Tag each new sample as you create it, or the view leaks.
- **Storefront still shows it.** Publishing changes can take a minute to clear the storefront cache. Re-check the product's Publishing box shows Online Store unticked.

## Definitions people confuse

**Admin global search vs Products list search.** The global bar is the box in the top header on every admin page. It searches everything and cannot be filtered. The Products list search is the box on the Products page. It respects filters and saved views. Almost every "cannot hide from search" complaint is really about the global bar.

**Unpublish vs archive vs delete.** Unpublish removes a product from a sales channel, like the Online Store, but keeps it in your active list. Archive removes it from the active list but keeps the record. Delete destroys it. To hide from customers while keeping it usable, unpublish.

**Tag vs product type vs collection.** A tag is a free-form keyword for filtering. A product type is one category label per product. A collection is a customer-facing group of products. For a "No samples" view, a tag is the simplest lever.

**Backend search vs storefront search.** Backend search is what you and your staff use inside the admin. Storefront search is what customers use on your live site. They are separate systems with separate rules. Keeping samples out of one does not automatically keep them out of the other, which is why the full fix covers both.


---

---
title: Hide Shipping Calculated at Checkout on One Shopify Product
description: The line under Add to cart that says shipping is calculated at checkout shows on every product, including gift cards. Here is how to hide it on one product only, with the code, screenshots and the Eclipse theme steps.
---

## The problem

Under the Add to cart button, many Shopify themes show a short line such as "Shipping calculated at checkout." It is useful on a pair of boots. It is out of place on a gift card that is delivered by email.

A merchant on the Shopify Community asked about exactly this. Their store runs the Eclipse theme. The line under their gift card read "Shipping calculated at checkout. Free shipping on 2+ pairs." They wanted it gone from the gift card and left in place on every other product. They said they would also accept different wording on the gift card.

Shopify has no checkbox for this. The setting that controls the line is not per product. This article shows how to remove "shipping calculated at checkout" in Shopify for one product, using a few lines of code and your product's ID number.

## Before and after

This is the merchant's gift card page before the change. The line sits right under Add to cart:

![The iB Underwear gift card page with the line Shipping calculated at checkout under the Add to cart button](/images/blog/shopify-hide-shipping-text-product-page/01-before-shipping-text-under-add-to-cart.png)

This is the same page after. The button is the last thing in the buy box and the line is gone:

![The same gift card page with the shipping line removed from under the Add to cart button](/images/blog/shopify-hide-shipping-text-product-page/02-after-shipping-text-hidden-gift-card.png)

I tried the code on the merchant's real page in my own browser before posting it. Nothing was saved to their store. On the gift card page the line went from visible to hidden. On their boxer briefs page, which I opened in a second tab with the same code applied, the line was still shown.

## Why you cannot just switch it off

The line is part of the product page layout in your theme. A theme is the set of files that controls how your store looks. In Eclipse, the line belongs to the same block as the Add to cart button, and every product page uses that block.

That is why the usual options do not fit a single product:

- **The theme editor** lets you change a setting for a page template, which affects every product that uses the template. It does not let you pick one product.
- **Editing the theme text** changes the wording everywhere. If you reword "Shipping calculated at checkout" in the theme's default content, every product page shows the new wording.
- **Removing your shipping policy page** is not worth it. It is a legal page, and you would lose it for the whole store.

What does work is a rule that says "hide this line, but only on the product with this ID". That rule is written in CSS, the code that controls how things look on a page. It does not change anything in your checkout.

## Check that hiding the line is the right fix

Hiding the line does not change how Shopify charges for shipping. It only removes the words from the product page.

A gift card like the merchant's is set up so that its variants do not need shipping. A variant is one version of a product, such as one gift card amount. Because shipping is off for those variants, the checkout does not ask for a delivery address when only a gift card is in the cart.

If your product is physical, do not hide the line just to make the page look cleaner. Shoppers expect to see something about shipping before they pay.

## How to hide the shipping line on one product

You need two things: your product's ID and a place to paste the code. The place is the Custom CSS box in the theme settings.

### Step 1: Find your product ID

The product ID is the long number Shopify uses to identify the product. You can read it in the admin's web address.

1. In your Shopify admin, go to **Products**.
2. Click your gift card, or whichever product should lose the line.
3. Look at the web address in your browser. It ends with a number, for example `.../products/8316607496381`. Copy that number.

![The admin page of a gift card product, with a note that the number at the end of the web address is the product ID](/images/blog/shopify-hide-shipping-text-product-page/07-find-product-id.png)

The product in this screenshot is from a test store, so your number will be different.

### Step 2: Open the Custom CSS box

1. Go to **Online Store** > **Themes**. The Themes page lists your current theme at the top, with an **Edit theme** button.

![The Online Store Themes page with the Edit theme button on the current theme highlighted](/images/blog/shopify-hide-shipping-text-product-page/03-online-store-edit-theme.png)

2. Click **Edit theme** on your current theme.

3. In the editor, click the **gear icon** on the left. It opens **Theme settings**.
4. Scroll down the list and click **Custom CSS**.

![The Eclipse theme editor with the gear icon and the Custom CSS entry highlighted](/images/blog/shopify-hide-shipping-text-product-page/04-theme-settings-custom-css.png)

### Step 3: Paste the code

Paste this into the Custom CSS box. If the box already has code in it, paste this on a new line below it and leave the old code alone.

```
product-block-buy-buttons:has(input[name="product-id"][value="PASTE-YOUR-PRODUCT-ID-HERE"]) .product__policies { display: none; }
```

Replace `PASTE-YOUR-PRODUCT-ID-HERE` with the number from step 1. Keep the quotation marks around it.

The screenshot shows the merchant's gift card ID. Yours will be different.

![The Custom CSS box in the Eclipse theme settings with the code pasted in](/images/blog/shopify-hide-shipping-text-product-page/05-paste-css-code.png)

### Step 4: Save

Click **Save** in the top right corner of the editor.

![The Save button in the top right corner of the theme editor](/images/blog/shopify-hide-shipping-text-product-page/06-save.png)

Open your gift card page in a new tab and reload it. The line under Add to cart is gone. Open any other product and check that its shipping line is still there.

## How the code works, in plain words

You do not need this to use the fix, but it helps if you want to change the code later.

The code has two halves. The first half finds the right page. Every product page has a hidden form field that holds the product's ID, and the code looks for the buy box that contains your ID. The second half, `.product__policies`, names the shipping line itself. The last part, `display: none`, tells the browser not to show it.

Because the code only matches your ID, no other product page is affected.

## Hide the line on more than one product

Add a second block of the same code, or join two product IDs with a comma. This version hides the line on two products:

```
product-block-buy-buttons:has(input[name="product-id"][value="FIRST-ID"]) .product__policies,
product-block-buy-buttons:has(input[name="product-id"][value="SECOND-ID"]) .product__policies { display: none; }
```

I tried this form on the merchant's store with the gift card ID and the ID of a second product. The line was hidden on both.

If you have many digital products, such as ten gift card amounts that are each their own product, list each ID. Past a handful of products, a separate product template for digital items is a tidier setup, but it needs more theme work than this article covers.

## What if you want different wording instead of no line

The merchant said they would accept different text on the gift card. CSS can hide the line, but it cannot reliably swap the words for different ones on a single product.

The options are:

- **Hide the line**, then add your own sentence in the product description. A gift card description that says "Delivered by email within minutes" does the job.
- **Change the theme's default text.** On the Themes page from step 2, click the three dots on your theme and choose **Edit default theme content**. This changes the wording on every product page, so it only fits if you want the same new text everywhere.

## Troubleshooting: the line is still showing

**Check the product ID.** This is the most common cause. The code does nothing if the number does not match the product exactly. Copy it again from the admin address, with no spaces.

**Check the quotation marks.** If you pasted the code from a page that turns straight quotation marks into curly ones, the code stops working. Retype the quotation marks in the Custom CSS box.

**Check that you saved.** The Save button stays grey until the editor sees a change. If it is grey after you paste, type a space at the end of the code and delete it. The button turns black.

**Check your theme.** I tested this code on Eclipse, version 5.3.2. Other themes use different names for the shipping line, so the code will not match. If you use another theme, the idea is the same, but the part before `.product__policies` has to name your theme's buy box.

**Reload the page.** Open the product page in a private window to rule out your browser holding an older copy.

## Undo it

Go back to the Custom CSS box from step 2, delete the line you added, and click **Save**. The shipping line comes back on the gift card straight away.

## Related reading

If you use Eclipse, the same Custom CSS box is where the [image zoom button fix](/blog/shopify-hide-image-zoom-button) goes. For a plain-language walkthrough of the box itself, see [how to add custom CSS in Shopify](/blog/how-to-add-custom-css-in-shopify).


---

---
title: "Hide Unavailable Variants in a Shopify Dropdown"
description: Green has no 3XL, so Shopify prints "3XL - Unavailable" in the size dropdown anyway. Here is how to remove combinations that do not exist, without the bug that breaks the picker.
---

## The problem, in the words a merchant would use

You sell a t-shirt in Green and Blue, sizes S to 3XL. Green never came in 3XL, so that variant does not exist in your catalogue.

Open the product page, choose Green, and the size dropdown still lists it:

> 3XL - Unavailable

The shopper has to read a dead option to work out it is dead. Pick it and the Add to cart button greys out and says "Unavailable".

A merchant running the Studio theme asked about this on the Shopify Community. Their wording was exact: "I'd prefer the theme not to show these variants at all."

There is no setting for it. Studio, Dawn, and every free theme built on the same code render every option value and label the impossible ones. This post is the code change that removes them, plus the mistake that catches most attempts at it.

![Green has no 3XL, but Studio lists it anyway](/images/blog/shopify-hide-unavailable-variants/01-before-unavailable-in-dropdown.png)

## Two different things get called "unavailable"

This distinction is the whole reason the naive fix goes wrong, so it is worth thirty seconds.

Shopify shows the same "- Unavailable" label for two situations that are not the same:

1. **The combination does not exist.** You never created a Green 3XL. There is no variant, no SKU, no price. Nothing will ever come back in stock, because there is nothing there.
2. **The variant exists but is sold out.** Blue M is a real product with a real SKU that happens to be at zero.

Merchants almost always want the first one gone and the second one visible. A sold-out size is information a shopper wants: it tells them the size normally exists and might return. A combination that was never made is just noise.

Most advice you will find online hides both, because the obvious test in Liquid, `value.available`, is false in both cases.

There is a better test. Each option value can tell you whether a variant is attached to it. When I checked this on a live product, the difference was clean:

- Green + 3XL, the combination that does not exist: no variant attached at all.
- Blue + M, sold out: a real variant attached, marked as not available.

So the condition to skip on is "not available **and** no variant attached". That hides the impossible ones and leaves the sold-out ones alone.

## Where the code lives

Two files, both in **Online Store** > **Themes** > your theme > **...** > **Edit code**.

![Online Store, Themes, the three dot menu, Edit code](/images/blog/shopify-hide-unavailable-variants/02-themes-edit-code.png)

- `snippets/product-variant-options.liquid` renders every option value, and is where the hiding happens.
- `snippets/product-variant-picker.liquid` wraps the whole picker, and is where a small script goes.

Duplicate the theme before you start. A theme version update replaces these files, so make a note to redo this after upgrading. Shopify documents that behaviour in [updating themes](https://help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes).

## Edit 1: keep track of the selected value

Near the top of `product-variant-options.liquid` there is a small Liquid block. Replace it with this:

```liquid
{%- liquid
  assign product_form_id = 'product-form-' | append: section.id

  assign keep_selected = false
  for v in option.values
    if v.selected
      if v.available or v.variant.id
        assign keep_selected = true
      endif
    endif
  endfor
  assign forced_selected = false
-%}
```

![The keep_selected block added at the top of the file](/images/blog/shopify-hide-unavailable-variants/03-keep-selected-block.png)

This does not hide anything yet. It records whether the value currently selected is one you are about to keep. Skip this and you will hit the bug described below.

## Edit 2: skip the values that do not exist

Further down the same file there is a branch that starts with `elsif picker_type == 'dropdown'`. Add the skip and the selection fallback just after it:

```liquid
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
  {%- unless value.available or value.variant.id -%}
    {%- continue -%}
  {%- endunless -%}
  {%- liquid
    assign is_selected = value.selected
    unless keep_selected
      unless forced_selected
        assign is_selected = true
        assign forced_selected = true
      endunless
    endunless
  -%}
```

Then change the line that marks the selected option so it uses `is_selected` instead of `value.selected`.

![The dropdown branch with the skip added](/images/blog/shopify-hide-unavailable-variants/04-dropdown-branch-edit.png)

Save.

## The bug this avoids

Here is why the extra bookkeeping is not optional, and why the one line answer you will find elsewhere breaks stores.

The theme's own JavaScript, when you change a dropdown, does roughly this: find the option that currently carries the `selected` attribute, and remove that attribute from it.

There is no check for the option not being there.

If you hide the option that was selected, nothing carries `selected` any more. The script looks for it, gets nothing back, and throws an error on the next line. The whole change handler dies with it, which means the variant picker stops working completely. No price updates, no image changes, no add to cart.

That is what `keep_selected` and `forced_selected` prevent. If the value that was selected has been hidden, the first surviving option takes the `selected` attribute instead, so the script always finds one.

If you have tried hiding unavailable options before and your picker went dead, this is almost certainly why.

## Edit 3: the colour switch problem

There is a second problem, and it is subtler. It is the reason a Liquid-only fix is incomplete.

Shopify evaluates option availability left to right. The **first** dropdown always lists every value. Only the later dropdowns are filtered against what you have already chosen.

Follow the consequence:

1. Shopper picks Blue, then 3XL. Fine, Blue 3XL exists.
2. Shopper changes the colour to Green.
3. Green 3XL does not exist. The page reloads the picker, and now the size list has no 3XL in it.

The dropdown looks correct. It says Green and S. But the page underneath is still sitting on a combination with no variant, so the price is wrong and the button says "Unavailable".

The theme cannot recover on its own. When there is no matching variant it takes an early exit that skips the event other code listens for, so a normal event hook never fires.

A small script fixes it. Paste this into `snippets/product-variant-picker.liquid`, straight after the closing `</variant-selects>` tag and before the last line of the file:

```html
<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.variantAutoFix) return;
    window.variantAutoFix = true;
    var allow = true;
    document.addEventListener('change', function (event) {
      if (event.isTrusted) allow = true;
    }, true);
    new MutationObserver(function () {
      if (!allow) return;
      var picker = document.querySelector('variant-selects');
      var data = picker && picker.querySelector('[data-selected-variant]');
      if (!data) return;
      var variant = null;
      try { variant = JSON.parse(data.textContent); } catch (error) { return; }
      if (variant) return;
      allow = false;
      var selects = picker.querySelectorAll('select.select__select');
      if (selects.length) selects[selects.length - 1].dispatchEvent(new Event('change', { bubbles: true }));
    });
  });
</script>
```

![The script pasted into the variant picker snippet](/images/blog/shopify-hide-unavailable-variants/05-snapback-script.png)

In plain terms: it watches the picker, and when the page ends up on a combination with no variant, it re-selects the last dropdown so the theme fetches a real one. The `isTrusted` check makes sure it only corrects once per real click, so it cannot loop.

## The result

Choose Green and the size list contains only the sizes Green actually has. Add to cart is live and the price is right.

![Green now lists only the sizes it has](/images/blog/shopify-hide-unavailable-variants/06-after-sizes-that-exist.png)

Choose Blue and the sold-out M is still there, still labelled, because it is a real size that a shopper might want to know about.

![A sold out size is still listed](/images/blog/shopify-hide-unavailable-variants/07-sold-out-size-still-listed.png)

On the test store the sizes went from S, M, 3XL down to S, M under Green, and switching colour from a 3XL selection landed on Green S with Add to cart enabled instead of a dead button.

## If you want sold-out sizes hidden too

Some merchants do want both gone. That is one word.

Change:

```liquid
{%- unless value.available or value.variant.id -%}
```

to:

```liquid
{%- unless value.available -%}
```

Everything else stays. Now anything the theme would label unavailable disappears, sold out included.

Think about it before you do it. A size that vanishes when it sells out and reappears later confuses returning shoppers, and you lose the chance to capture a back-in-stock signup. Shopify's own guidance on [hiding out of stock products](/blog/shopify-hide-out-of-stock-variants) is worth reading first, because collection filters behave differently from the product page.

## Buttons and swatches are not affected

Both edits sit inside the dropdown branch of the file. If your theme is set to buttons or swatches, nothing changes.

That is deliberate. Buttons behave differently: an unavailable size still occupies a slot in the row, and hiding it re-flows the layout, which merchants generally like less. If you want that too, the same test can be applied in the button branch, but check the spacing afterwards.

You can see which mode you are in under **Theme editor** > product template > **Variant picker** > **Picker type**. There is a separate post on [switching from buttons to dropdowns](/blog/shopify-variant-dropdown-instead-of-buttons) if you want to change it.

## What to check if it did not work

- **The picker stopped responding entirely.** You applied the skip without Edit 1. Add the `keep_selected` block.
- **Nothing changed.** Your picker is on buttons or swatches, not dropdowns. Check the Picker type setting.
- **Sold-out sizes vanished too.** You used `unless value.available` rather than the two-part test.
- **The size list is right but the button says Unavailable.** Edit 3 is missing, or the script went in the wrong place. It has to sit outside `</variant-selects>`, not inside it.
- **It worked, then stopped after a theme update.** Expected. Theme updates replace these files. Reapply both edits.

## Words that get used for different things

- **Unavailable** in the picker covers both "never existed" and "sold out". The point of this fix is to tell them apart.
- **Sold out** means a real variant at zero stock. It comes back.
- **Option value** is Green, or 3XL. **Variant** is the combination, Green 3XL, with its own price and SKU. A value can exist while the variant that would use it does not.
- **Combination** is what shoppers are actually picking. Shopify only creates the ones you tell it to.

## What I tested

On a Studio 15.5.0 store, on a product with Colour (Green, Blue) and Size (S, M, 3XL), where Green 3XL was deliberately never created and Blue M was set to zero stock:

- Reproduced the exact "3XL - Unavailable" label under Green, with a disabled Add to cart button.
- Confirmed that the option value for a combination that does not exist has no variant attached, while a sold-out one does.
- Applied all three edits and confirmed Green then lists only S and M, and Blue still lists the sold-out M.
- Walked the failure path in a real browser: Blue, then 3XL, then back to Green, and confirmed it lands on Green S with the correct price and a live Add to cart button.


---

---
title: "How to Hide a Variant in Shopify Without Deleting It"
description: A colour is temporarily unavailable and you want it off every product page, but you do not want to delete it and rebuild it later. Shopify can now unpublish a single variant. Here is the fast way to do it, tested on a live store.
---

## The problem, in the words a merchant would use

A merchant asked about this on the Shopify Community. They run a made to order business, so they do not track inventory at all. Every product is available with the same set of sizes and colours.

When one colour runs out at their supplier, they want that colour gone from the storefront for a while. Not deleted. Just hidden until they can make it again.

Their only method was to open each product and remove the colour by hand. With ten products that is ten edits, and every edit destroys variant data they will have to type back in later.

That is the job: **hide a variant, do not delete it, put it back later.**

## Deleting the variant is the wrong tool

It is worth saying why, because deleting is the first thing most people reach for.

When you delete a variant you lose its price, its SKU, its barcode, its image link and its position in the option order. Recreating it means retyping all of that on every product.

Deleting also breaks history. Reports that referenced that variant lose their link to it. If a customer ever asks about an old order, the variant they bought is no longer there.

And there is a smaller annoyance worth knowing about. Removing an option value re-sorts the ones that are left. Merchants who spent time arranging their colours in a sensible order find that order scrambled when they add the colour back.

## Shopify can now unpublish a single variant

This is the part that has changed recently and that most guides have not caught up with.

For years, publishing was a product-level thing. A product was either on your Online Store or it was not. Individual variants came along for the ride.

That is no longer true. You can now switch one variant off your Online Store and leave the rest of the product exactly as it is. Nothing is deleted. Inventory is not touched, which matters a lot if, like this merchant, you do not track inventory in the first place.

The setting is called **publishing**, and it lives on the variant.

## The fast way to do it

The reason people give up on this is not the setting. It is finding the variants.

A product with 5 sizes and 5 colours has 25 rows. Ten of those products is 250 rows, and Shopify's bulk editor gives you no way to filter or sort by colour. Scrolling that list looking for every red row is miserable, and it is easy to miss one.

There is a control on the product page itself that solves this, and it is easy to miss.

### Step 1: group the variants by the option you care about

Open the product and scroll down to the **Variants** card. Just under the option list there is a small **Group by** dropdown. It is set to your first option, usually Size.

Change it to **Colour**.

![Group by dropdown on the Shopify product page switched from Size to Colour](/images/blog/shopify-hide-variant-without-deleting/01-group-by-colour.jpeg)

The variant table redraws. Every colour is now a single row that says how many variants sit inside it. Red is one row instead of five.

### Step 2: select the whole colour

Tick the checkbox on that row. That selects every size in that colour at once.

On my test product the Red row said "3 variants", and ticking it showed "3 selected" straight away.

### Step 3: open Manage publishing

With the row still ticked, click the **...** button next to Bulk edit and choose **Manage publishing**.

![The Manage publishing option in the Shopify variant actions menu](/images/blog/shopify-hide-variant-without-deleting/02-manage-publishing-menu.jpeg)

### Step 4: turn Online Store off

A dialog opens headed "Manage publishing for 3 variants". Every sales channel is listed with a toggle.

Turn **Online Store** off and click Done.

![Manage publishing dialog with the Online Store toggle switched off](/images/blog/shopify-hide-variant-without-deleting/03-online-store-toggle-off.png)

Leave the other channels alone unless you want the colour gone from those too. This is useful: you can hide a colour from your website while still selling it in person through Point of Sale.

### Step 5: save

Click **Save** at the top of the product page. The change is not live until you do.

A new **Publishing** column then appears on the variant table. The colour you unpublished shows a channel count instead of the word "All".

![The Publishing column on the Shopify variant table showing one colour excluded](/images/blog/shopify-hide-variant-without-deleting/04-publishing-column.jpeg)

The product's Publishing card in the sidebar also changes. Instead of just "Online Store" it now reads "Online Store, excludes some variants". That is a useful reminder months later when you have forgotten what you did.

## What it looks like on the storefront

Here is the product page before, with four colours.

![Shopify product page showing four colour swatches before the change](/images/blog/shopify-hide-variant-without-deleting/05-before-four-colours.png)

And after unpublishing the whole Red row.

![The same Shopify product page with the red swatch completely gone](/images/blog/shopify-hide-variant-without-deleting/06-after-colour-gone.png)

Red is not greyed out. It is not crossed out. It is not in the picker at all. As far as the storefront is concerned that option value does not exist on this product.

That is the behaviour you want for a colour you cannot make right now. A struck-through swatch invites the shopper to click it and be disappointed. A missing swatch does not.

## The mistake that makes it look broken

This is the single thing to get right, and it is where most people conclude the feature does not work.

**You have to unpublish every size in that colour.**

If you unpublish only some of them, the colour does not disappear. It moves to the end of the swatch row and gets a line through it, and it is still clickable on the sizes you left published.

![A red swatch struck through because only one size was unpublished](/images/blog/shopify-hide-variant-without-deleting/07-struck-through-swatch.png)

I tested both on a live store. Unpublishing all three sizes in Red removed Red from the picker completely. Unpublishing only the small left Red visible, struck through, and still selectable on medium and large.

The reason is how themes decide whether an option value is available. The theme looks at the variants it can actually see. If even one red variant is still published, red is still a real option, so the theme draws it and marks it partly unavailable.

Grouping by colour is what protects you from this. When the whole colour is one row, you cannot accidentally select four sizes out of five.

## Putting the colour back

Exactly the same route. Group by Colour, tick the row, **...**, Manage publishing, Online Store back on, Done, Save.

Nothing was deleted, so nothing has to be recreated. The price, SKU, barcode and image link are all still attached to those variants, and the colour returns in its original position in the option order.

This is the whole argument for unpublishing over deleting. It is reversible in about ten seconds.

## One switch for every product at once

The method above is per product. For ten products that is fine. For a hundred it is not.

If you want a single place to control it, you can hide the colour in your theme instead. This is a display-only change, so read the caveats at the end of this section before you use it.

In the theme editor, open a product page, then go to **Product information**, then **Details**, then **Add block**, and choose **Custom Liquid**.

![Adding a Custom Liquid block under Product information in the Shopify theme editor](/images/blog/shopify-hide-variant-without-deleting/08-add-custom-liquid-block.jpeg)

Paste this into the block and put your colour names on the first line:

```liquid
{% assign hidden_colours = 'Red' | split: ',' %}
<style>
  {%- for c in hidden_colours %}{% assign c = c | strip %}
  .variant-option__button-label:has(input[value="{{ c }}"]),
  .variant-option__swatch:has(input[value="{{ c }}"]) { display: none !important; }
  {%- endfor %}
</style>
<script>
  (function () {
    var hidden = {{ hidden_colours | json }}.map(function (c) { return c.trim(); });
    function pick() {
      document.querySelectorAll('.variant-option').forEach(function (fs) {
        var inputs = Array.prototype.slice.call(fs.querySelectorAll('input[type=radio]'));
        var on = inputs.filter(function (i) { return i.checked && hidden.indexOf(i.value) > -1; })[0];
        if (!on) return;
        var next = inputs.filter(function (i) { return hidden.indexOf(i.value) === -1; })[0];
        if (next) next.closest('label').click();
      });
    }
    document.addEventListener('DOMContentLoaded', pick);
    pick();
  })();
</script>
```

![Shopify product page with a colour hidden by the Custom Liquid block](/images/blog/shopify-hide-variant-without-deleting/09-hidden-by-custom-liquid.png)

A few things worth knowing:

- **One edit covers every product** that uses that product template. Change `'Red'` to `'Red, Mustard'` to hide more than one.
- **The second half matters.** Without it, a product whose first colour is the hidden one still opens on that colour, with no swatch showing to explain it. The script moves the selection to the next visible colour instead.
- **The colour name has to match your option value exactly**, including capital letters and spaces.
- **It hides, it does not block.** Someone with an old link straight to that variant could still order it. Unpublishing actually blocks the sale. Use the theme block as a quick lever and unpublish when you want it properly gone.

## Hiding a variant when it is out of stock instead

If your reason for hiding is stock rather than a temporary supply gap, that is a different job with a different answer. You do not want to unpublish anything by hand, you want it to happen automatically as stock hits zero.

That includes making sure your collection filters do not show sizes that are sold out, which is a separate quirk of how Shopify filters work. I covered that case in detail here: [how to hide out of stock variants in Shopify](/blog/shopify-hide-out-of-stock-variants).

The short version: unpublishing is for things you choose to hide, and stock-based hiding is for things that hide themselves.

## Hiding the whole product instead of one variant

Sometimes the right answer is bigger. If every colour of a product is unavailable, hide the product rather than every variant inside it.

You have three ways to do that, and they are not the same:

- **Set the status to Draft.** The product disappears from the storefront and from search. It stays in your admin and keeps all its data. This is the usual choice for a temporary pause.
- **Archive it.** Also removes it from the storefront, but it moves out of your active product list too. Better for things you are not planning to sell again soon.
- **Remove it from the Online Store channel.** Keeps the status Active, but takes it off your website while leaving it available in other channels such as Point of Sale.

All three are reversible, and none of them deletes anything.

## Doing it across a large catalogue

If you have a lot of products, the per-product route stops being reasonable.

Shopify's bulk editor does have a Sales channels column at the variant level, so you can edit publishing there. The catch is that it lists every variant in one flat table with no way to filter by option value, which is exactly the 250 row problem that started this.

For real scale, the Admin API can unpublish variants directly. Variant level publishing arrived in the 2026-07 version of the API, so a short script can clear one colour across an entire catalogue in a single run. That is a developer job, but it is a small one.

There are also apps built for this. If you go that route, check carefully whether the app hides by stock level or lets you pick the variant yourself. Most of that category is stock driven, which is no help at all on a made to order store where nothing is ever technically out of stock.

If bulk variant editing is your wider problem, this walkthrough covers the editor properly: [how to bulk edit variants in Shopify](/blog/shopify-bulk-edit-variants).

## Hide, delete, archive and deactivate are four different things

These get used interchangeably in forum posts and they are not the same. Getting them straight saves a lot of wasted effort.

- **Hide a variant** means unpublish it from a sales channel. The variant still exists with all its data. Reversible in seconds.
- **Delete a variant** removes it and its data permanently. Not reversible. Old orders lose their link to it.
- **Archive a product** hides the whole product and files it away. Reversible, product level only.
- **Deactivate inventory at a location** is about where stock is counted, not about whether anything is visible. It does not hide anything by itself.

The merchant who asked this question wanted the first one and was reaching for the second.

## What to check if it did not work

- **You did not click Save.** The Manage publishing dialog stages the change; the Save button at the top of the product page commits it.
- **You missed a size.** Group by the colour again and confirm the row shows the count you expect. One published variant is enough to keep the colour visible.
- **You are looking at a cached page.** Shopify's storefront caches aggressively. Reload with a fresh query string on the end of the URL, or check in a private window.
- **You unpublished the wrong channel.** Confirm it was Online Store and not Point of Sale or a market catalog.
- **Your theme is very old.** Themes read the variants Shopify gives them, so this should work anywhere, but a heavily customised variant picker that builds its own option list from stored data can behave differently.

## The short version

Do not delete a variant to hide it. Open the product, set **Group by** to the option you want, tick the whole row, then **...** then **Manage publishing**, turn **Online Store** off, and Save.

Unpublish every variant in that group, or the theme will show the option struck through instead of hiding it.

To bring it back, do the same thing and turn the toggle on. Nothing was lost.


---

---
title: "Shopify Horizon: Carousel Blank Until You Drag It"
description: A Horizon carousel that shows an empty strip until you drag it, then fills in, is usually the theme skipping the painting of slides it thinks nobody is looking at. Here is how to tell that apart from a genuinely broken carousel, and the one line of CSS that covers it.
---

## The problem

You open your Shopify store, scroll to a product carousel, and the row is empty. The heading above it is there. The arrows might be there. The products are not.

Then you click and drag the strip sideways, and every product appears at once, exactly as it should have.

It shows up in the theme editor too, so it does not look like a caching problem. Switching the section from carousel to grid seems to help, except some products still arrive late.

A merchant running **Horizon** described precisely this on the Shopify Community in September 2026. The answers they got split into two theories, and the two need different fixes, so the first job is telling them apart rather than pasting CSS.

![A Horizon carousel showing an empty strip below the section heading](/images/blog/shopify-horizon-carousel-blank/01-horizon-carousel-blank-first-slide.png)

## Why a Horizon slide can be blank

Horizon uses a browser feature called **content-visibility**. It lets a theme tell the browser "do not bother drawing this part yet", so a long page loads faster by skipping work for anything still off screen.

Horizon applies it to every carousel slide. Pulled from the theme's own compiled stylesheet:

```css
slideshow-slide {
  content-visibility: auto;
  contain-intrinsic-size: auto none;
}
```

Two settings, and both matter.

`content-visibility: auto` is the skip itself. The browser is free to leave that slide undrawn until it decides the slide matters to the person reading the page.

`contain-intrinsic-size: auto none` is the size the slide claims while it is undrawn. **None** means no size at all. A slide that has never been drawn takes up zero height, so a row of them collapses to nothing, which is why you get an empty strip rather than empty boxes.

### What makes them appear again

The same stylesheet hands the drawing back in three situations:

```css
slideshow-slide[aria-hidden="false"] { content-visibility: visible }
slideshow-component[actioned] slideshow-slide { content-visibility: visible }
slideshow-component:is([dragging],[transitioning],:hover)
  > slideshow-container > slideshow-slides > slideshow-slide { content-visibility: visible }
```

Read the third one and the drag makes sense. `[dragging]` is an attribute Horizon puts on the carousel while you are dragging it, and the moment it is there, every slide is drawn.

`:hover` sits in that same rule. So **moving your mouse over the row should fill it in too**, with no click and no drag. That is a free test and it takes two seconds.

## Step 1: check the first card before anything else

The first card decides which of the two problems you have, and it is the check most people skip.

Look at the very first card in the row, not the whole strip.

Shopify sends the first slide to the browser with `aria-hidden="false"` already set on it. That means the first of those three rules applies to it immediately, from plain CSS, with no JavaScript involved and no app able to interfere.

So:

- **The first card shows, the rest are blank until you hover or drag.** That is the skip doing exactly what it was designed to do, more aggressively than anyone wanted. The CSS below covers it.
- **The first card is blank as well.** Skipped drawing is not your cause, because the rule that paints it needs nothing to run. Something else is emptying the row, and the CSS below will not fix it. Skip to the last section.

Worth being strict here. Pasting the CSS when the first card is blank leaves you with the same empty row plus a line of code you will forget you added.

## Step 2: the CSS, if it is the skip

Go to **Online Store > Themes > Customize**, then click the gear for **Theme settings**.

![The Theme settings panel in the Horizon theme editor](/images/blog/shopify-horizon-carousel-blank/02-horizon-theme-settings.png)

Scroll that panel to the bottom, where you will find **Custom CSS**.

![The Custom CSS box at the bottom of Horizon theme settings](/images/blog/shopify-horizon-carousel-blank/03-horizon-custom-css-box.png)

Paste this in and save:

```css
.resource-list__carousel > slideshow-container > slideshow-slides > slideshow-slide {
  content-visibility: visible !important;
}
```

### What each part of that is doing

`.resource-list__carousel` is the class Horizon puts on the product-list carousels, the ones used by sections like a featured collection. It leaves your image slideshows and banner carousels alone.

The `>` symbols mean "direct child of". That chain matters more than it looks. Product cards contain their own little image carousels, so a page with four product cards in a carousel has four slides at the top level and another eight nested inside the cards. Matching only the direct chain hits the four and leaves the eight alone, so the cards' own galleries keep the performance saving. The chain of names is the selector, the part of the code that points at which elements on the page the styling applies to.

`!important` is needed because the theme's own rule would otherwise win.

### Treat it as a workaround

That line hands back drawing work Horizon skips on purpose. On a short row you will not notice. On a page with several long carousels you are asking the browser to draw everything up front, which is the cost the theme was avoiding. Use it because the alternative is an empty row, not because it is free.

## What not to use instead

The obvious-looking alternative is to fix the size rather than the skip, since `contain-intrinsic-size: auto none` is what makes the row collapse:

```css
/* do not use this */
slideshow-slide { contain-intrinsic-size: auto 420px; }
```

The theory is sound: give an undrawn slide a placeholder height and the row cannot collapse. Tested on a real Horizon store, it does something you will not want. Every slide ends up exactly 420px tall, including the ones already drawing correctly, so your product cards get locked to a height you picked out of the air rather than the height their content needs.

Leave `contain-intrinsic-size` alone and change the skip instead.

## Common questions

### Does this only happen on desktop?

The report was desktop only, and loading the same store in a 900px-wide window did not reproduce it: the row drew all four cards with no drag and no hover, and measured 379px tall. That does not prove it is width-dependent, but it does mean window width is worth recording when you report it. Note the browser too.

### Why does switching to grid help?

Grid mode does not use `slideshow-slide` elements, so the skip does not apply. It is a reasonable temporary answer if the section offers the choice and you are happy with the look.

### Is this a Horizon bug or a browser bug?

`content-visibility` is a standard browser feature and Horizon is using it the way it is meant to be used. The trouble comes from `contain-intrinsic-size: auto none`, which means an undrawn slide reserves no space. That combination is what turns "drawn a moment later" into "an empty row until you touch it".

### Will the fix survive a theme update?

Yes. Custom CSS lives in your theme settings, not in a theme file, so an update does not overwrite it. That also means it carries over if you duplicate the theme, and it stays behind if you switch to a different theme.

### Does it affect what Google sees?

Skipped slides are still in the page's HTML. `content-visibility` changes what gets drawn, not what exists, so the products are there for crawlers either way.

## If the first card is blank too

Then the skip is not your cause, and the useful move is to work backwards through what changed.

- **Remove any code you pasted in recently.** Custom CSS, and any Custom Liquid block (a box in the theme editor where you paste your own code), are the first suspects, especially anything added to fix this same problem. Take it out and look at the theme clean before adding anything else.
- **Check apps installed around the time it started.** Speed and lazy-loading apps change how and when images load, which is the sort of thing that can leave a carousel with no measurable content.
- **Open the page with a browser extension disabled.** Ad and script blockers occasionally take out a theme's own script.
- **Look at the browser console for errors.** If the theme's carousel script fails, no slide ever gets marked as the visible one, and the whole row stays undrawn.

For reference, here is the same carousel drawing properly, with no drag and no hover, so you know what you are aiming at.

![A Horizon product carousel drawing all four product cards correctly](/images/blog/shopify-horizon-carousel-blank/04-horizon-carousel-painting.png)

## Words that get mixed up

- **Carousel**: a row you scroll sideways through. Horizon builds them from `slideshow-slide` elements.
- **content-visibility**: a browser setting that lets a page skip drawing something until it matters.
- **contain-intrinsic-size**: the size a skipped element claims while it is undrawn. Horizon sets it so that an undrawn slide claims nothing.
- **Custom CSS**: a box in your theme settings where you add your own styling, kept separate from the theme's files.
- **Theme settings**: the gear icon in the theme editor, holding the settings that apply across the whole store rather than to one section.

## Tested on

Checked against a live Horizon 4.1.5 store in September 2026. The three rules quoted above come from that store's own compiled stylesheet. On its homepage the product carousel held four top-level slides plus eight more inside the product cards, and the direct-child selector matched the four and none of the eight. Injecting it moved all four from `auto` to `visible`. The `contain-intrinsic-size: auto 420px` alternative was tried on the same page and set every slide to 420px, including the one already drawing. The editor screenshots are Horizon 4.1.5 on a test store, the same version. The empty row itself did not reproduce at a 900px viewport, so the width at which it appears is not established here.


---

---
title: "Shopify Horizon Theme: Product Hotspot Not Clickable"
---

## The problem

A merchant posted this on the Shopify Community. They run the Shopify Horizon theme, they added the hotspot section to their homepage, and the product cards will not open.

The dot works. You hover it and the little product card appears exactly like it should.

Then you move your mouse toward the card to click the product, and the card vanishes before you get there. Your click lands on the background image instead of the product link.

They called the section "Spotlight". The theme calls it "Product hotspots". Same thing, and the same bug.

This is not an app conflict, not a z-index overlay, and not anything you did to your store. It is a bug in the theme's own JavaScript, and it affects the whole Horizon family. I reproduced it on a clean Horizon 4.1.1 install with no apps and no customisation at all.

Here is what actually goes wrong, and the fix that does not involve editing theme files.

## What the Shopify Horizon theme is

Horizon is Shopify's flagship free theme, introduced in 2025 as the successor generation to Dawn. It is the default theme on new stores and it is free.

The important difference for this problem is architectural. Dawn is built from Liquid sections with jQuery-free vanilla JS bolted on. Horizon is built from **web components**: custom HTML elements like `<product-hotspot-component>` that own their own behaviour in a matching JavaScript file.

That matters here because the bug lives inside one of those components, not in your theme settings. There is no toggle to fix it.

Several paid themes are built on Horizon's architecture, which is why this reaches further than one theme. The merchant who posted the thread believed they were on Horizon. Their store's source actually reported **Atelier 3.4.0**, a different theme built on the same foundation, shipping the same component with the same defect.

## Check which theme you are actually on

Do this before anything else, because "I am on Horizon" is often wrong and the fix below is specific.

Open your storefront, view source, and search for `Shopify.theme`. You get something like:

    Shopify.theme = {"name":"My Store","schema_name":"Horizon","schema_version":"4.1.1",...}

`schema_name` is the real theme. `schema_version` is the version. Write both down.

The merchant in the thread had `"schema_name":"Atelier","schema_version":"3.4.0"`. The thread had not spotted it, and it changes which fix path is available to you.

## Why the card disappears

The hotspot is two elements. There is the **trigger**, the dot you hover. And there is the **dialog**, the product card that appears.

The theme has to keep the card open while your pointer travels from the dot to the card, and close it when you leave properly. It does that in a `pointerleave` handler in `assets/product-hotspot.js`.

Here is the logic, from Horizon's own source:

```js
const isLeavingTrigger = e.target === trigger;
const isLeavingDialog = e.target === dialog;

const isGoingToDialog =
  e.relatedTarget === dialog ||
  (e.relatedTarget instanceof Element && e.relatedTarget.closest('dialog') === dialog);

const isGoingToTrigger = e.relatedTarget === trigger;

if ((isLeavingTrigger && !isGoingToDialog) || (isLeavingDialog && !isGoingToTrigger)) {
  this.closeDialog();
}
```

Look carefully at the two checks, because the whole bug is the difference between them.

When you leave the **dot**, the code asks whether you are heading into the card. It does that properly, with `closest('dialog')`, which walks up the ancestor chain. So it correctly recognises the card and anything inside the card.

When you leave the **card**, it only asks whether you are heading back to the dot, using strict identity. It never checks for something inside the card.

Now here is what makes that fatal. The card contains a stretched product link, positioned absolutely across the whole card so that clicking anywhere on the card opens the product. The moment your cursor crosses onto the card, the first thing it touches is that link.

So the browser fires `pointerleave` on the dialog with `relatedTarget` set to the link. The link is a child of the dialog, but the code only compares against the trigger. The comparison fails, and the theme closes the card.

The card closes because you moved onto it. That is why it feels like the product link "does not work" rather than like the card is flickering.

I measured this on a real page with a real mouse rather than trusting the reasoning. The trace is unambiguous:

    LEAVE  related=a.hotspot-dialog__link  isDescendant=true
    OPEN=false                             (13ms later)

Two separate hovers, same signature, thirteen and fourteen milliseconds from the boundary event to the card closing.

![Hover the dot and the card appears](/images/blog/shopify-horizon-hotspot-not-clickable/01-hover-dot-card-appears.jpeg)

Move onto the card, and it is gone, with the cursor still sitting where the card was:

![Move onto the card and it vanishes](/images/blog/shopify-horizon-hotspot-not-clickable/02-card-vanishes-on-hover.jpeg)

## This is desktop only

Do not waste time trying to reproduce this on your phone.

The theme attaches the hover listeners only above the 751px breakpoint. On a touch device, tapping a hotspot opens the quick add modal instead of the hover card, which is an entirely different code path. The failing code never runs.

So if a customer reports it and you cannot repeat it on mobile, that is expected, not evidence that it is fixed.

## The fix, without editing theme files

Add a Custom Liquid section to the same template as your hotspots section and paste this in.

```html
<script>
  document.addEventListener('pointerleave', function (event) {
    var dialog = event.target;
    if (!(dialog instanceof HTMLDialogElement)) return;
    if (!dialog.classList.contains('hotspot-dialog')) return;
    // moving onto the card's own child is not "leaving the card"
    if (event.relatedTarget instanceof Node && dialog.contains(event.relatedTarget)) {
      event.stopImmediatePropagation();
    }
  }, true);
</script>
```

`pointerleave` does not bubble, but it does capture. Running the listener in the capture phase on `document` means it runs **before** the theme's own handler and can stop that handler from ever seeing the event.

It only ever blocks the one wrong event, the case where you moved onto a child of the card. Leaving the card outward still closes it normally, so you are not trading one bug for a card that sticks open forever.

Nothing in the theme is overridden or edited, so a theme update will not wipe it.

### Where to put it

In the theme editor, under Template, click Add section.

![Under Template, click Add section](/images/blog/shopify-horizon-hotspot-not-clickable/04-add-section-under-template.jpeg)

Type "custom" and choose Custom Liquid. There is a "Custom section" directly below it in the list, which is a different thing.

![Search custom and pick Custom Liquid](/images/blog/shopify-horizon-hotspot-not-clickable/05-pick-custom-liquid.jpeg)

Paste the snippet into the Liquid code box and hit Save.

![Paste the snippet into Liquid code, then Save](/images/blog/shopify-horizon-hotspot-not-clickable/06-paste-into-liquid-code.jpeg)

Same movement afterwards, and the card holds still long enough to click:

![With the snippet the card stays open and the link is clickable](/images/blog/shopify-horizon-hotspot-not-clickable/03-card-stays-open-after-fix.jpeg)

## The alternative: update the theme

Another responder in the thread said Shopify addressed this in **Horizon 4.1.3**, so updating may resolve it without any snippet at all.

I could not verify that version claim independently. There is no public Horizon repository to check a changelog against, and my test store is on 4.1.1. What I did verify first hand is that 4.1.1 has the bug and that the snippet fixes it. Treat 4.1.3 as a strong lead rather than a promise, and test it on an unpublished copy first.

Two caveats before you reach for the update button.

Updating Horizon across that range also migrates colour schemes to colour palettes, which can disturb styling you have already tuned. Always duplicate your live theme and update the copy.

And if you are on a theme built on Horizon rather than Horizon itself, like Atelier, you are waiting on that theme's developer to pick up the upstream fix. The snippet works today regardless.

## The one line version, if you do edit theme code

If you would rather patch the theme directly, the fix in `assets/product-hotspot.js` is to make the trigger check mirror the dialog check that already exists:

```js
const isGoingToTrigger =
  e.relatedTarget === trigger ||
  (e.relatedTarget instanceof Node && dialog.contains(e.relatedTarget));
```

That is the whole defect. One check walks the ancestor chain, the other does not.

I would still use the snippet. Edited theme JavaScript is overwritten the next time you update the theme, and this is exactly the kind of one line change that is easy to forget to reapply.

## If it still does not work

**Check the section is on the right template.** The Custom Liquid section has to be on the same template as your hotspots. If your hotspots are on the homepage, the snippet goes on the homepage template.

**Check you are on desktop.** Below 751px the hover path does not run at all, so there is nothing for the snippet to fix.

**Check the class name.** The snippet targets `hotspot-dialog`. If a theme built on Horizon renamed that class, inspect the card in dev tools and swap the name in.

**Check it is really this bug.** Open the card, then move the pointer onto it slowly. If the card survives the journey and the click still does nothing, you have a different problem, most likely a genuine overlay. Right click the card: if you get the browser's link menu with a real product URL, the link is fine and reachable.

## Spotlight, hotspots, shop the look

These names all describe the same pattern and merchants use them interchangeably, which makes searching for help harder than it should be.

**Product hotspots** is Horizon's own name for the section, and the one you will find in the Add section list.

**Spotlight** is what several themes call their version, and what the merchant in this thread called it.

**Shop the look** is the general ecommerce term for the pattern: one lifestyle photo, several products marked on it, each opening a card.

If you are searching for a fix, try all three. The underlying section is the same.

## When was Horizon released

Horizon arrived in 2025 and became the default theme for new Shopify stores, replacing Dawn in that role. Dawn is still supported and still free.

The practical difference for a store owner is that Horizon leans on blocks and web components, so more of the behaviour lives in JavaScript files rather than in Liquid you can read at a glance. That is faster and more flexible, and it also means bugs like this one are harder to diagnose from the theme editor, because there is no setting involved anywhere.


---

---
title: "Shopify Horizon: Show Only Selected Variant Images"
description: Show only the selected variant's images in Shopify Horizon, several photos per colour, with alt text and one free Custom Liquid block. No app or Plus needed.
---

## The problem: you pick a colour in Horizon and the other photos stay

A merchant asked about this on the Shopify Community. They run the Horizon theme, and they wanted the product gallery to react to the colour a shopper picks.

The goal is simple to describe. Click Black, see only the Black photos. Click White, see only the White photos. No paid app. No Shopify Plus. A free solution that works on Horizon.

What actually happens on Horizon out of the box is different. You assign a photo to the Black variant, and clicking Black jumps to that one photo. But the White photos are still sitting in the gallery. So a shopper on Black scrolls straight into White images, which looks broken and costs you the sale.

I reproduced it on a Horizon test store. Here the Black variant is selected, yet the White images are still in the gallery.

![Horizon product gallery with Black selected but White images still showing](/images/blog/shopify-horizon-show-only-variant-images/01-before-wrong-images.png)

Horizon has no setting that filters a colour's full set of images. To understand why, and to fix it, it helps to know what Horizon is actually doing when you click a variant.

## Why Horizon does not hide the other images

Every variant in Shopify can have exactly one assigned image. That is the image Shopify swaps to when the variant is selected.

Horizon respects that. Click a colour and the gallery moves the single image you assigned to that variant to the front. That part works as designed.

The problem is everything else in the gallery. A product page usually has more than one photo per colour. A second angle. A lifestyle shot. A close-up of the fabric. A size chart. Shopify has no concept of "these five images belong to Black." It only knows about the one assigned image.

So every image that is not a variant's assigned image is treated as shared. Shared images show for every colour, all the time. That is why your White photos still appear when Black is selected. To Shopify they are not White photos. They are just photos on the product.

Once you see it that way, the fix becomes obvious. You cannot ask Shopify to filter by colour, because Shopify does not know which colour most images belong to. You have to tell it, and then hide the ones that do not match.

## The built-in toggle, and exactly where it stops

Before the code, there is a native setting worth knowing about, because for some stores it is all you need.

Open the theme editor on a product page, select the **Product media** block, and check that **Hide unselected variant media** is switched on. A fresh Horizon 4.3.0 install has it on in the default product template, but a template you made earlier may have it off. With it on, Horizon removes the images assigned to the other variants. Click Black and White's assigned image is gone from the gallery.

![Horizon theme editor with the Product media block selected and the Hide unselected variant media toggle switched on](/images/blog/shopify-horizon-show-only-variant-images/06-hide-unselected-variant-media.png)

That toggle only hides the one image assigned to each other variant. Every unassigned image, the second angle, the lifestyle shot, the size chart, still counts as shared and still shows for every colour.

So the built-in toggle gets you one clean image per colour. If that is your setup, you are done and you do not need any code. If you have several images per colour, the toggle is not enough, and you need the small block further down.

## How to add variant images on Shopify

Both the toggle and the fix below work best when each colour has its photo assigned in the admin. These are the steps from Shopify's Help Center:

- Go to **Products** and click the product.
- In the **Variants** section, click the image icon next to the variant.
- Select one of the product's images, or click **Add image** to upload a new one.
- Click **Done**, then **Save**.

![Shopify admin product page, Variants section, with the image icon next to the Black variant highlighted and the image picker open](/images/blog/shopify-horizon-show-only-variant-images/07-variant-image-picker.png)

To do several variants at once, tick their boxes in the **Variants** section, open the menu with the three dots, and choose **Add images**. When the ticked variants already have images, the same menu shows **Edit images** instead, next to **Remove images**.

![Variants section with several variants ticked and the three-dot menu open on Edit images](/images/blog/shopify-horizon-show-only-variant-images/08-bulk-add-images.png)

On Horizon, the assigned image is the one the gallery puts first when that variant is picked. If a swatch does not switch the photo at all, start with our guide on [how to add variant images in Shopify](/blog/shopify-variant-images), which covers getting a single photo to switch cleanly per colour.

## Multiple variant images on Horizon

Shopify's Help Center says it plainly: each variant supports only one assigned image. That is a Shopify limit, not a Horizon one. There is no field where you attach five photos to the Black variant, on Horizon or any other theme.

Shopify's own advice is to use the product's media gallery for the extra photos. That is what the fix below does. You are not giving the variant five images. You are labelling five product images with the word Black, and hiding the ones that are not Black when Black is selected. To the shopper it looks like several images per variant, which is the part that matters.

## When you actually need the code

Use the free block below if any of these is true.

- You have more than one image per colour.
- You keep shared images, like a size chart, that should show on every colour.
- You want the gallery to filter, not just swap the single assigned image.

The approach has two parts. First you label every image with the colour it belongs to, using the Alt text field you already have. Then you add one Custom Liquid block, a box in the theme editor where you paste your own code, and that code reads those labels and hides the images that do not match the selected colour.

Nothing is hardcoded to your colour names. The block finds the colour option on its own by matching your option values against the Alt text, so you never type colour names into the code, and it keeps working when you add or remove images and colours later.

## Step 1: tag every image with its colour

This is the label step. You are telling the theme which colour each photo belongs to, and Alt text is the field to do it in. Alt text is the short description used for accessibility and SEO, and it is editable on every image.

- Go to Products, open your product, and click an image.
- In the **Alt text** field, type the colour that image belongs to. Black, White, and so on.
- Save the change, then do the next image.
- Do this for every colour photo.
- Leave shared images untagged. A size chart, or anything you want on all colours, gets no colour word.

![Typing the colour name into each image's Alt text field in Shopify admin](/images/blog/shopify-horizon-show-only-variant-images/02-alt-text.png)

You are not changing the images. You are just naming them so the next step can tell them apart. Alt text is also good for SEO, so this is not wasted effort even beyond the gallery.

## Step 2: add the Custom Liquid block

Now add the small block that does the filtering.

- Go to Online Store, then click **Edit theme** on your live theme, the one at the top of the page.
- Open the product template.
- In the product section, click **Add block** and choose **Custom Liquid**.
- Paste the code below and Save.

![Horizon theme editor on the product template with the Add block menu open and Custom Liquid highlighted](/images/blog/shopify-horizon-show-only-variant-images/09-add-block-custom-liquid.png)

```liquid
{%- liquid
  assign vf_options = closest.product.options_with_values
-%}
<script>
(function () {
  if (window.__variantMediaFilter) return;
  window.__variantMediaFilter = true;

  var OPTIONS = [
    {%- for o in vf_options -%}
      { "values": [ {%- for v in o.values -%}{%- assign vn = v.name | default: v -%}{{ vn | json }}{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%} ] }{%- unless forloop.last -%},{%- endunless -%}
    {%- endfor -%}
  ];
  if (!OPTIONS.length) return;

  var norm = function (s) { return (s || '').toLowerCase().trim(); };

  function gallerySection() {
    var g = document.querySelector('media-gallery');
    return (g && g.closest('.shopify-section')) || document.body;
  }

  function pickOption(section) {
    var alts = [].map.call(section.querySelectorAll('.product-media img'), function (i) {
      return norm(i.getAttribute('alt'));
    });
    var best = null, bestScore = 0;
    OPTIONS.forEach(function (o) {
      var score = o.values.filter(function (v) {
        var lv = norm(v);
        return lv && alts.some(function (a) { return a.indexOf(lv) > -1; });
      }).length;
      if (score > bestScore) { bestScore = score; best = o; }
    });
    return best;
  }

  function selectedValue(section, values) {
    var vals = values.map(norm);
    var r = [].filter.call(section.querySelectorAll('input:checked'), function (i) {
      return vals.indexOf(norm(i.value)) > -1;
    })[0];
    if (r) return norm(r.value);
    var s = [].filter.call(section.querySelectorAll('select'), function (el) {
      return vals.indexOf(norm(el.value)) > -1;
    })[0];
    return s ? norm(s.value) : null;
  }

  function box(m) { return m.closest('slideshow-slide') || m.closest('li') || m; }

  function apply() {
    var section = gallerySection();
    var opt = pickOption(section);
    if (!opt) return;
    var values = opt.values.map(norm);
    var selected = selectedValue(section, opt.values);
    if (!selected) return;

    var medias = section.querySelectorAll('.product-media');
    var visible = 0;
    [].forEach.call(medias, function (m) {
      var img = m.querySelector('img');
      var alt = norm(img && img.getAttribute('alt'));
      var mentions = values.filter(function (v) { return v && alt.indexOf(v) > -1; });
      var show = mentions.length === 0 || mentions.indexOf(selected) > -1;
      var el = box(m);
      el.style.display = show ? '' : 'none';
      el.hidden = !show;
      if (show) visible++;
    });
    if (!visible) {
      [].forEach.call(medias, function (m) { var el = box(m); el.style.display = ''; el.hidden = false; });
    }
  }

  function boot() {
    var section = gallerySection();
    apply();
    section.addEventListener('change', function () { setTimeout(apply, 60); });
    new MutationObserver(function (muts) {
      for (var i = 0; i < muts.length; i++) {
        if (muts[i].addedNodes && muts[i].addedNodes.length) { apply(); return; }
      }
    }).observe(section, { childList: true, subtree: true });
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
  else boot();
})();
</script>
```

![Adding a Custom Liquid block in the Horizon theme editor and pasting the filter code](/images/blog/shopify-horizon-show-only-variant-images/03-custom-liquid-block.jpeg)

One detail matters here, and it is the reason a simpler script does not work on Horizon. When a shopper changes the variant, Horizon does not just tweak the gallery. It replaces the whole gallery with a fresh block of HTML from the server. Any filter you applied to the old gallery is gone the instant the new one arrives.

The block above handles that. It watches the gallery for the new HTML and re-applies the filter every time Horizon rebuilds it. That is what the MutationObserver in the code is doing. You do not need to touch that. It just means the fix keeps holding after every colour change, which is exactly where the naive versions fall apart.

## The result on a test store

With both steps in place, the gallery finally behaves. On my Horizon test store, selecting Black now shows only the Black images plus the shared size chart. The White images are gone.

![Horizon gallery after the fix, Black selected showing only Black images plus the shared size chart](/images/blog/shopify-horizon-show-only-variant-images/04-after-black.png)

Switch to White and the gallery swaps to the White set. Same shared size chart, different colour photos.

![Horizon gallery switching to White, now showing only the White images](/images/blog/shopify-horizon-show-only-variant-images/05-after-white.png)

The behaviour matches the shorthand from the reply. Pick Black, see Black. Pick White, see White. Untagged images stay for every colour. Nothing is hardcoded, so it keeps working when you add or remove images.

## Can Shopify hide variant images until a variant is selected?

Not on Horizon, with or without the block, because a Horizon product page never opens with no variant chosen. If the link has a variant number in it (the `?variant=` part at the end of a product URL), that variant is picked. Otherwise Shopify picks the first variant that is available to buy, or the first variant if every one is sold out. Horizon ticks that variant's swatch before the shopper touches anything.

The block reads that ticked swatch as soon as the page loads. So the gallery opens already filtered to that colour, plus your untagged photos, and the shopper never sees the full mixed gallery. The built-in toggle behaves the same way for assigned images: the page opens with that variant's assigned image at the front and the other variants' assigned images removed.

To control which colour a page opens on, link to the product with that variant in the URL. Without a variant in the link, the first variant that is available to buy decides it.

## Does this work on mobile and with the grid gallery?

Yes for the photos themselves. Horizon's default product layout is a grid gallery on desktop, and the **Product media** block's own note says the carousel is always used on mobile. The block hides grid items and carousel slides alike, so a shopper on a phone who taps Black sees the Black images and the shared ones.

The controls under a carousel are a different matter. The dots, the counter and the thumbnail strip are drawn by Horizon from the full list of images, and the block does not change them. So they can still count or show the hidden photos. If that bothers you, keep **Type** on Grid for desktop, and set **Mobile pagination** to Hint, which shows no dots on phones.

## If it did not work

These are the causes the block's code and Horizon's code point to, each with the check that rules it out.

I checked the block against Horizon 4.3.0, the version Shopify released on 9 October 2026, in Shopify's public Horizon code on GitHub (updated to 4.3.0 on 13 October 2026). Everything the block relies on is still there: the `media-gallery` element that holds the gallery, the `.product-media` wrapper around each image, the slide and list item that wrap it, the swatches and dropdowns in the variant picker, and Horizon swapping in a new gallery on every colour change. If your theme is a newer Horizon release, those parts are the first place to look.

- **You edited a theme that is not live.** The block only exists in the theme where you added it. Your published theme is the one at the top of the Online Store page. Click **Edit theme** on that one and check the block is in the product template.
- **The product uses a different template.** Changes in the theme editor apply to one template. Open the product in your admin and look at the **Theme template** field. If it names another template, add the block to that template too.
- **An app replaces the gallery.** If a gallery or variant-image app draws its own gallery, Horizon's `media-gallery` element and `.product-media` wrappers are not on the page, and the block finds nothing to hide. Turn off the app's embed (the piece an app adds to your theme, listed under **App embeds** in the theme editor), reload, and see whether the block works.
- **Your theme is not Horizon.** The block looks for Horizon's gallery markup. On another theme it can do nothing at all. Check the theme name on the Online Store page.

![Shopify Online Store page with the published theme at the top and its Edit theme button highlighted](/images/blog/shopify-horizon-show-only-variant-images/10-live-theme-customize.png)

- **Alt text typos.** The block matches the colour word inside the Alt text. If the option value is Navy but a photo's Alt text says Navi, that photo will not match. Keep the spelling identical to the colour as it is written in the product's Variants section.
- **A colour name sits inside another word or colour.** The match looks for the colour's letters anywhere in the Alt text, ignoring capitals. A photo tagged Light Blue also mentions Blue, so it shows on both. Red also matches inside a word like "shredded". Keep the Alt text to the colour name alone, and avoid colour names that contain each other.
- **A shared photo mentions a colour.** A size chart whose Alt text says "fits black and white tees" counts as a Black and White photo and is hidden on every other colour. Leave colour words out of shared photos.
- **A photo has no Alt text.** Horizon fills an empty Alt text with the product title. On my Horizon 4.3.0 test store, a size chart with blank Alt text came out as "Cotton Tee". If your product title holds a colour word, such as Black Cotton Tee, the block counts that photo as a Black photo and hides it on every other colour. Give shared photos their own Alt text, such as Size chart, or keep colour words out of the product title.
- **The colour is not a real option.** The block picks the option with the most values found in your Alt text. If two options tie, it takes the one listed first on the product. If your colours are baked into product titles rather than a proper Colour option, there is nothing for it to match. Set colours up as a variant option.
- **Size letters match inside words.** Size values like S, M and L are single letters, so Alt text such as "Black tee side view" also matches sizes. If that gives Size as many matches as Colour, and Size is listed before Colour on the product, the block filters by size instead. Keep the Alt text to the colour name alone.
- **A colour shows only your shared photos, or every photo.** If no photo's Alt text names that colour, the block hides the other colours' photos and leaves the untagged ones. If the product has no untagged photos either, the block shows everything rather than a blank gallery. Either way, that colour has no tagged photos yet.
- **It reverted after clicking a colour.** That is the re-render issue. Make sure you pasted the full block, including the part that watches the gallery, not just the filtering function.

## Variant image, shared image, and swatch: three different things

Mixing these up is usually why the gallery misbehaves.

A **variant image** is the single assigned image Shopify swaps to when a variant is selected. One per variant.

A **shared image** is any other image on the product. It has no variant attached, so it shows for every option. Your extra angles and your size chart are shared images until you label and filter them.

A **swatch** is the little colour dot or thumbnail a shopper clicks. It is part of the variant picker, not the gallery. A swatch changing does not, on its own, filter the gallery. For the swatch side of this, see [how to add variant images in Shopify](/blog/shopify-variant-images).

This article is the next step up from that. Once your variant images switch, the block here makes the entire gallery filter by colour, multiple images and all, for free, on Horizon.

## Frequently asked questions

### Is there a free app that shows only the selected variant's images?

Yes. I make Ploqo Variant & Cover Images, a free app on the Shopify App Store that does this without alt text or code. On the product page in your admin you tick the photos for each colour, and the Horizon gallery shows only those plus the photos you keep for every colour. The setup is in the [Ploqo Horizon guide](/ploqo/help/horizon-theme-variant-images).

### How many images can a Shopify variant have?

One assigned image. Shopify's Help Center says each variant supports only one assigned image, and suggests using the product's media gallery for the extra photos. The alt-text tagging in this article is how the gallery knows which of those extra photos belong to which colour.

### Does the block change my products or images?

No. It only hides photos on the product page while a shopper views it. The one change to your product data is the alt text you type in Step 1. Delete the block and the full gallery comes back.

### Does this need Shopify Plus or a paid app?

No. Horizon is a free theme made by Shopify, and the Custom Liquid block and the Alt text field are part of the theme editor and the product page.


---

---
title: "Shopify iframe Not Showing Properly? The One-Line Cause"
description: "A Shopify iframe that renders as a thin strip, stuck to the left edge, is almost never the embed's fault. Here is the theme rule that collapses it to 150px, and the Custom Liquid block that fixes it."
---

## The problem

A merchant asked about this on the Shopify Community and it is one of the better puzzles I have seen.

She had embedded an Excel table from OneDrive on her homepage. Microsoft gives you an iframe, you paste it into a Custom Liquid section, and it should just work.

It did not. Her exact words: "It only shows the top of the table and is not centered."

Her embed code was fine. It had a sensible width and height on it:

```html
<iframe width="621" height="410" frameborder="0" scrolling="no"
  src="https://1drv.ms/x/c/.../..."></iframe>
```

But on the live page the table rendered as a thin horizontal strip stretched right across the screen. You could see the header row and about two rows of data. Everything below was cut off.

Here is what that looks like. I reproduced it exactly on a test store.

![A Shopify iframe collapsed to a thin strip showing only the top rows of an embedded table](/images/blog/shopify-iframe-not-showing/01-embed-only-top-rows-showing.png)

Two symptoms, one cause. And the cause is not in the embed code at all.

## Why a Shopify iframe collapses to a thin strip

Somewhere in her theme, someone had pasted this line:

```html
<style> iframe {width: 100% !important; max-width: 100% !important; height: auto !important;} </style>
```

That line looks helpful. It reads like "make embeds responsive". It is the single most common piece of advice handed out for iframes that overflow on mobile.

It is also wrong, and here is why.

An iframe is a replaced element. It does not size itself to its contents the way a `div` does, because the browser cannot see inside a cross-origin frame to measure it. When you tell a replaced element `height: auto`, the browser cannot compute a real height, so it falls back to the CSS default for the element.

For an iframe, that default is **150 pixels**. Always.

So `height: auto !important` does not mean "fit the content". It means "be 150 pixels tall, and ignore the height attribute the merchant wrote". Her `height="410"` never had a chance.

The `width: 100% !important` half explains the second symptom. A Custom Liquid section spans the full page width. Force the iframe to 100% of that, and it stretches edge to edge. There is nothing left to centre.

On my test store I measured it. The iframe rendered at **150px tall** with `left: 0`, filling the full section width. Identical to what she was seeing.

## Check this before you change anything

Before you touch the embed, find out whether your theme has this rule. It takes ten seconds.

- Open your storefront page.
- Right-click, then **View Page Source**.
- Press Ctrl+F and search for `iframe {`.

If you find a `<style>` block with `height: auto !important` in it, that is your problem. It is usually right at the bottom of the page, just above `</body>`, because that is where it gets pasted into `theme.liquid`.

If you do not find it, your problem is something else and the section further down on failure modes is the one to read.

## The fix: one Custom Liquid block

The cleanest fix does not require the code editor at all. You replace the contents of the Custom Liquid section you already have, with a version that carries its own styling and wins against the theme rule.

Go to **Online Store > Themes > Customize**, click the Custom Liquid section that holds your embed, clear the Liquid code box, and paste this in:

```html
<div class="table-embed">
  <iframe class="table-embed__frame" frameborder="0"
    src="YOUR-EMBED-URL-HERE"></iframe>
</div>

<style>
  .table-embed {
    max-width: 100%;
    overflow-x: auto;
    text-align: center;
  }
  .table-embed__frame {
    width: 700px !important;
    max-width: none !important;
    height: 460px !important;
    display: inline-block;
    border: 0;
  }
</style>
```

Keep your own embed URL between the quotes. Then Save.

![The Custom Liquid section in the Shopify theme editor with the replacement embed code pasted in](/images/blog/shopify-iframe-not-showing/02-custom-liquid-section-code.png)

That is the whole fix. Here is the same page afterwards.

![The embedded table rendering at full height and centred on the page](/images/blog/shopify-iframe-not-showing/03-embed-full-table-centred.png)

Full table, all eight columns, sitting in the middle of the page.

### Why this beats the theme rule

This is worth one paragraph, because it is the part that makes the fix reliable rather than lucky.

Both the theme rule and my rule use `!important`, so `!important` alone does not decide the winner. CSS falls back to specificity. The theme rule targets a bare element (`iframe`), which scores 0-0-1. Mine targets a class (`.table-embed__frame`), which scores 0-1-0. A class beats an element, so my declarations win no matter where the theme rule sits in the page.

That is also why `max-width: none !important` is in there. Without it, the theme's `max-width: 100%` would clamp the frame back to the section width and undo the fixed sizing on narrow screens.

### The two numbers you will want to change

`700px` is the width. `460px` is the height. Those are the values that fit the merchant's table with no clipping and no dead space.

Yours will be different. Set the width to roughly the natural width of your embedded content, and raise the height until the vertical scrollbar inside the frame disappears.

The `overflow-x: auto` on the wrapper handles small screens. On a phone the frame keeps its readable width and the wrapper scrolls sideways, instead of squashing an eight-column table into 360 pixels.

## Then delete the line that caused it

The fix above works around the bad rule. It does not remove it, and that rule will do the same thing to the next thing you embed. A YouTube video, a Google Map, a booking widget, a Calendly frame. All of them are iframes. All of them will collapse to 150 pixels.

So clean it up:

- **Online Store > Themes > ... > Edit code**.
- Open **layout > theme.liquid**.
- Scroll to the very bottom.
- Just above `</body>` you will find a single line starting with `<style> iframe {`.
- Delete that one line and Save.

![The theme.liquid line that forces every iframe to height auto, just above the closing body tag](/images/blog/shopify-iframe-not-showing/04-theme-liquid-iframe-css-line.jpeg)

Duplicate your theme first if you are nervous. It is one line, but the code editor edits your live theme directly.

## How to add an iframe in Shopify

Since a lot of people arrive at this problem while trying to add their first embed, here is the short version of the step before it.

Shopify does not have an "embed" block. The tool you want is the **Custom Liquid** section, which every free Shopify theme includes.

- Theme editor, open the page you want the embed on.
- **Add section**, then choose **Custom Liquid**.
- Paste your iframe into the Liquid code box.
- Save.

That is it. Custom Liquid renders raw HTML, so an `<iframe>` and a `<style>` block both work exactly as written. There is no sanitiser stripping them.

If you want the embed inside an existing section rather than as its own section, several themes also offer a **Custom Liquid block**, which behaves the same way but sits within the section you pick.

## Does Shopify allow iframes and script tags in Custom Liquid?

Yes to both. Custom Liquid output is not filtered, so `<iframe>`, `<style>` and `<script>` all render.

The limits that catch people out are elsewhere:

- **The Content Security Policy of the site you are embedding.** Some services send `X-Frame-Options: DENY` or a frame-ancestors policy, which makes the browser refuse to render them in a frame no matter what your code says. You will see a blank frame and a console error. Nothing on the Shopify side can override that. Use the service's official embed URL, not its normal page URL.
- **The checkout.** Custom Liquid does not exist in checkout on any plan below Shopify Plus.
- **Blog posts and pages.** The rich text editor strips iframes on save. Put the embed in a Custom Liquid section on a template instead of pasting it into a page body.

## What to check if it still does not work

If the frame is still wrong after the fix, work down this list. In my experience it is almost always one of the first two.

**The frame is 150px tall again.** There is a second copy of the rule somewhere. Check theme settings under **Custom CSS**, check any app embed you have enabled, and search your `assets/*.css` files for `iframe`. The theme.liquid line is the common one, but it is not the only place it can live.

**The frame is the right size but blank.** That is the embedding site refusing to be framed, not a sizing problem. Open the frame URL directly in a new tab. If it loads there but not in the frame, you need the service's share or embed URL rather than the page URL. For a OneDrive spreadsheet, that is the link from **Share > Embed**, not the one from the address bar.

**Everything looks right on desktop and broken on mobile.** Check that `overflow-x: auto` survived the paste. Without it a fixed-width frame will push the whole page sideways and give you a horizontal scrollbar on the body.

**The table shows but has its own scrollbars.** That is normal for a spreadsheet embed. The frame is a window onto a sheet that extends further than the data. Raise the height until the vertical bar goes, and widen until the horizontal bar goes. If the sheet has thousands of empty rows below your data, the scrollbar will never fully disappear, and that is a spreadsheet problem rather than a Shopify one.

**You changed it and nothing happened.** Theme editor changes need a Save, and a hard refresh on the storefront. Also confirm you edited the theme you are actually previewing. Editing a draft theme and refreshing the live site is the single most common false alarm.

## iframe, embed, and app block: which one you actually want

These three get used interchangeably and they are not the same thing.

An **iframe** is a browser feature. It puts another website inside a box on your page. You control the box. You do not control what is inside it, and you cannot measure it.

An **embed** is usually just an iframe with the styling pre-written by the service that gave it to you. YouTube, Google Maps, OneDrive and Calendly all hand you an iframe and call it an embed code.

An **app block** is Shopify-specific. An installed app registers a block that you place from the theme editor with no code. If an app exists for what you are doing, an app block is easier to maintain than an iframe, because the app owns the responsive behaviour.

For a spreadsheet on a product or landing page, the iframe is the right call. There is no app worth installing for one table, and the Custom Liquid route is about two minutes of work once you know about the 150px default.

## The takeaway

If a Shopify iframe renders as a thin strip, do not start rewriting the embed code. Search your theme for `height: auto !important` on `iframe`.

That one declaration turns every embed on the store into a 150 pixel band. It is handed out as responsive advice, it looks harmless, and it overrides the height on every frame you will ever add.

I tested all of this on a Dawn store using the merchant's real embed URL. Before the fix: 150 pixels tall, flush against the left edge, top rows only. After: 700 by 460, centred to the pixel, whole table visible.


---

---
title: "Shopify Import Products CSV: Update, Not Just Add"
description: A Shopify product CSV can update products you already have, not only create new ones. The one checkbox that decides it, what the file can and cannot change, and why the bulk editor stopped taking a pasted barcode column.
---

## The problem

You have a spreadsheet. One column is a list of barcodes, in the right order, for products already in your store.

You want those barcodes in Shopify. Not typed one at a time. Pasted, the way you have always done it.

Until recently you could. Open the bulk editor, add the column, paste, save. A merchant on the Shopify Community described exactly this and was blunt about losing it: they can still paste into SKU, but the Barcode column will no longer take a pasted list.

They are right, and it is not a bug in their browser. The Barcode column changed shape, and no amount of clicking will bring the paste back.

The good news is that the CSV route still takes a whole column in one go, and it does something most people do not realise: **a product CSV can update products you already have.** It is not only for loading a new catalogue.

## Why the paste stopped working

I opened the bulk editor on a test store with the SKU and Barcodes columns showing, and the difference is structural.

**SKU is still a plain text cell.** It is an ordinary input box. A pasted column drops straight in, row after row.

**Barcodes is no longer a cell at all.** It is a button that opens a small popup, with a field for the barcode and a dropdown for the barcode type, plus an "Add barcode" link underneath.

![In the Shopify bulk editor the SKU column is a text cell while the Barcodes column opens a popup](/images/blog/shopify-import-products-csv/01-bulk-editor-barcode-popup.png)

That is the whole explanation. A paste needs somewhere to land. A popup that holds one barcode at a time, with a type attached to it, is not somewhere a column of 400 values can land.

The reason for the change is that a variant can now hold more than one barcode, up to twenty, each with its own type. That is genuinely useful if you sell an item that carries both a UPC and an EAN. It also means the field could not stay a single text box.

So the bulk editor is still excellent for SKU, price, quantity and the rest. For barcodes in bulk, you need the CSV.

## The CSV can update, not just create

This is the part that surprises people.

Most merchants meet the product CSV once, when they move a catalogue in from somewhere else, and file it mentally under "import new products". So when they need to change something on products they already have, they do not think of it.

Shopify says otherwise, in the export dialog itself:

![The Shopify product export dialog explaining that the CSV can update product information](/images/blog/shopify-import-products-csv/02-product-export-dialog.png)

"This CSV file can update all product information except for inventory quantities."

That single sentence is the feature. Export what you have, change a column in a spreadsheet, import the same file back, and Shopify writes your changes onto the existing products.

## How to update products with a CSV

Here is the round trip, in the order that avoids trouble.

1. Go to **Products** and click **Export**.
2. Choose **All products**, and **CSV for Excel, Numbers, or other spreadsheet programs**. Pick the plain CSV option only if you are feeding it to another program.
3. Open the exported file in your spreadsheet.
4. Find the column you want to change and paste your values into it. For this job, that is the **Barcodes** column.
5. Save the file as CSV. Do not change the header row and do not reorder the columns.
6. Back in **Products**, click **Import**, choose **Upload a Shopify-formatted CSV file**, and pick your file.
7. Tick **Overwrite products with matching handles**.
8. Upload and preview, then confirm.

Step 7 is the one that matters, and it is covered next.

## The checkbox that decides everything

**Overwrite products with matching handles** is the difference between an import that works and an import that does nothing, and says nothing.

Shopify's documentation is explicit about both directions.

With it ticked: "when the handle in the import CSV file matches an existing handle in your products list, the values in the CSV file overwrite the values in the matching columns in the existing product list."

With it unticked: "the products that match an existing handle are ignored during CSV import."

Read that second one again, because it explains the most common complaint about product CSVs. The import reports success. Nothing changed. The file was fine. The box was not ticked, so every row that matched an existing product was skipped.

Products already in your store whose handles are not in the file are left alone either way. An import is not a replacement of your catalogue.

## Why you should export first, not build the file by hand

It is tempting to open a blank spreadsheet, type three column headers, and import that. Resist it.

Column names change. The barcode column is a live example: it used to be a single per-variant field, and now it holds a list of barcodes with types. If you hand-build a file using a column name you remember from a tutorial, the import will either reject the file or ignore that column.

Exporting first gives you the exact headers your store expects today, in the exact order, with your real handles already filled in. You are then only pasting values into a file that is already correct.

It also protects the handle. The handle is what Shopify matches on, and it is easy to mangle by hand.

## What a product CSV cannot change

Two limits worth knowing before you plan a big update.

**Inventory quantities.** The export dialog says it plainly: the product CSV updates everything except inventory quantities. For stock levels at multiple locations there is a separate inventory CSV, reached from the Inventory page, or the bulk editor.

**File size.** "Your product CSV can't exceed 15 MB." A large catalogue with many variants will pass that, and the fix is simply to split the file and import the parts one after another.

## Does importing a CSV delete products?

No. Importing only touches products whose handles appear in the file.

Anything else in your store is untouched. There is no "sync" behaviour where products missing from the file are removed, which is what people usually fear when they hear the word overwrite.

What overwrite means here is narrower than it sounds: for the rows in your file, the values in your columns replace the values on the matching products.

## Can I still paste into the bulk editor at all?

Yes, for the columns that are still plain cells. SKU is one of them, which is why the merchant noticed the difference so sharply: the same paste, two columns apart, behaves differently.

If you are entering barcodes by scanner rather than from a spreadsheet, the bulk editor is still workable, and we covered the keyboard loop for that in [Shopify Barcode Generator](/blog/shopify-barcode-generator). That approach suits receiving stock. It does not help when the values already exist in a worksheet, which is when the CSV wins.

For everything else about the bulk editor, see [How to Bulk Edit Product Variants in Shopify](/blog/shopify-bulk-edit-variants).

## If the import did not work

Run through these in order.

**Nothing changed at all.** The overwrite checkbox was not ticked. This is the cause most of the time.

**Some products updated, others did not.** The handles did not match. Handles are case sensitive and must be exact. Compare a failed row against the export.

**The file was rejected.** Either it is over 15 MB, or the header row was edited. Re-export and start again rather than repairing it.

**A column was ignored.** The header name does not match what Shopify expects. Again, this is what exporting first prevents.

**You get a results email listing errors.** Read it. Shopify names the row and the reason, which is faster than guessing.

## Handle, SKU and barcode are three different things

These get mixed up constantly, and mixing them up is what breaks imports.

The **handle** is the product's URL slug, like `harbour-cotton-tee`. It is Shopify's identifier for matching during an import. It is not visible to customers as a label and it is not a stock code.

The **SKU** is your own internal stock code. Shopify never requires it, never validates it, and does not use it to match rows during a product import.

The **barcode** is the number under the printed bars, usually a UPC or an EAN issued to you. Shopify stores it as text and does not check whether it is a real registered number.

So: match on handle, keep the SKU for yourself, and put the barcode in the barcode column.

## Tested on

Shopify admin, September 2026, on a development store. The bulk editor was opened with the SKU and Barcodes columns visible to confirm that SKU renders as a text input while Barcodes renders as a popup dialog. The export dialog wording was read from the admin. The overwrite and file size behaviour is quoted from Shopify's own documentation, linked above.


---

---
title: Shopify Inbox Notifications Not Working? How to Fix It
description: A clear guide to Shopify Inbox notifications. Who gets alerted, why there is no admin recipient list, how chat routing really works, and how to fix desktop push in Chrome on Windows. Tested, with screenshots.
---

## The problem

A store owner asked about this on the Shopify Community, and it is a question a lot of merchants have once a second person starts helping with chat.

They wanted to know how, as the owner, they could control which staff members get Shopify Inbox chat notifications. They knew each staffer could switch their own alerts off. What they could not find was a place to choose the recipients centrally.

They also could not find a permission the help docs mention, and their desktop push notifications were not firing in Chrome on Windows, even though everything looked switched on.

I reproduced the whole thing on a test store running the current Shopify Inbox. Here is how notifications actually work, why the recipient list they were hunting for does not exist, and how to get Chrome push working.

The short version: notifications are not controlled from one central list. Two things decide who gets pinged. Each person's own settings, and who the conversation is assigned to.

## Who actually gets a Shopify Inbox notification

This is the part that clears up most of the confusion, so start here.

There is no store-owner recipient list in Inbox. You cannot open one screen and say "these three staff get alerts, these two do not." That control simply is not in the product.

Instead, alerts follow the conversation. And a conversation is either unassigned or assigned to one person.

An unassigned chat notifies every staff member who has Inbox access and has their own alerts turned on.

Assign that chat to one person, and only that person is notified for it. The rest of the team stops getting pings for it.

You do not have to take my word for it. The Notifications screen says it in plain language. Under "When customer sends a message" it reads: "You won't be notified of new messages from conversations assigned to other staff."

![Who gets a Shopify Inbox alert depends on whether the chat is assigned](/images/blog/shopify-inbox-notifications-not-working/01-who-gets-notified-assignment.jpeg)

So the lever you are looking for is assignment, not a recipient list. Route a chat to the right person and the notifications route with it.

## There is no admin recipient list, and here is why

The reason a central list does not exist is that each staff member owns their own notification settings.

Open Inbox, then Settings, then Notifications. Everything on that page is personal. The header even calls it "Personalize your Inbox experience" and "Manage how you receive notifications."

Each person chooses whether they get desktop push, mobile push, and email, and for which triggers. There are three triggers: when you are assigned a chat, when a customer sends a message, and when a message has sat unread for 15 minutes.

![Each Shopify Inbox staff member sets their own notification triggers](/images/blog/shopify-inbox-notifications-not-working/03-staff-own-notifications.jpeg)

Because these settings belong to the individual, an admin cannot reach in and change them for someone else. You cannot turn another person's notifications on or off on their behalf.

That is the answer to the original question. If you want one staffer to stop getting alerts, you either assign chats away from them, or you ask them to turn their own notifications down. There is no button on your side that does it for them.

## How to send a chat to one specific person

Since assignment is the real control, it helps to know where it lives.

Open the conversation you want to route. At the top of that conversation there is an assign control. Pick the staff member you want, and the chat is now theirs. From that point, only they are notified about it.

![Assign a chat to one person from the Shopify Inbox conversation list](/images/blog/shopify-inbox-notifications-not-working/02-assign-chat-conversation-list.png)

The left side of Inbox has filters for Unassigned and Assigned to me, so anyone on the team can see which chats still need an owner and pick them up.

One important limit: base Shopify Inbox has no automatic assignment. There is no round-robin and no rule that sends "orders" chats to one person and "returns" chats to another. Assigning is manual. If you need rules, that is an app, and I cover the options near the end.

## The "online store chat" permission that you cannot find

The merchant had read that you can assign a chat to a staff member who has the "online store chat" permission, and then went looking for that setting and could not find it.

That is because the wording is out of date. There is no toggle literally named "online store chat" in Shopify today. It is language left over from the old Shopify Chat and Shopify Ping days.

Here is what actually controls access now. A staff member gets into Inbox through their access to the Shopify Inbox channel, plus the Customers permission, which is what lets them view customer details and reply. On newer stores that use role-based access, you will see an Inbox permission on the role rather than a separate chat checkbox.

Give a staff member that access. Once they have it, and once they have accepted their invite, they show up in Inbox as someone you can assign chats to.

## Why a staff member is missing from the assign list

The same merchant noticed some staff were not showing up when they tried to assign a conversation, and correctly guessed it was because those users were not verified yet.

That is right. A staff member only appears as assignable once they have accepted their invitation and their account is active. A pending or unverified invite will not show.

So if someone is missing from the list, check two things. First, that they have accepted the invite email and their account is active. Second, that they actually have Inbox access, not just a general store login. Both need to be true before they can be assigned or notified.

## Shopify Inbox notifications not working in Chrome on Windows

This was the most frustrating part for the merchant, and it is the most common Inbox complaint overall. Everything reads as enabled, the test notification does nothing, and there is no obvious error.

Almost always, the cause is a mix-up between two different Chrome permissions: pop-ups and notifications.

They are not the same thing. Allowing pop-ups does nothing for push. Push alerts come from the Notifications permission, which is separate. In the original case the merchant had allowed pop-ups, which is why the first test seemed to do something and every test after that did nothing.

The tell is on the Notifications page itself. When the browser is not allowing push, Inbox shows the Desktop line as "None" and a banner that reads: "Desktop push notifications are blocked on the browser you're currently using."

![The blocked-on-this-browser banner is the real Chrome push problem](/images/blog/shopify-inbox-notifications-not-working/04-chrome-push-blocked-banner.jpeg)

Fix it in this order.

First, set the browser permission. On inbox.shopify.com, click the small icon at the left of the address bar, open Site settings, and set Notifications to Allow. If it currently shows Block, change it and reload the page.

Second, turn it on inside Inbox. Go to Settings, then Notifications. If you see the "blocked on this browser" banner, click Turn on notifications and accept Chrome's prompt. The Desktop line should stop saying "None."

Third, clear Windows out of the way. Open Windows Settings, then System, then Notifications. Make sure Google Chrome is allowed. Then turn off Do Not Disturb or Focus assist, which swallow notifications while they are on.

Fourth, send a test notification again and confirm it lands.

Two more things worth knowing about desktop push, because they trip people up.

Push only fires while Chrome is open and you are logged in. You can close the actual Inbox tab and still get alerts, but if you quit Chrome or log out, you have to open inbox.shopify.com again to re-arm it. On some browsers you have to leave the Inbox tab open.

And if you run more than one store, desktop push follows the store you opened most recently in that browser. If you want alerts for a particular store, open that one last.

## Do not forget email as a backstop

If browser push is being stubborn, or the person is not always at their desk, turn on email notifications for the triggers that matter.

Email is on the same Notifications page, next to each trigger. It is not as instant as push, but it does not depend on a browser being open, a Windows setting, or which store was opened last. For a lot of small teams it is the more reliable channel.

For alerts on the go, install the Shopify Inbox mobile app for iOS or Android and enable its notifications. Mobile push is independent of the desktop setup, so a phone can cover you even while the Chrome side is being sorted out.

## Common Shopify Inbox notification questions

**How do I turn on Shopify Inbox chat notifications?** Open Inbox, go to Settings, then Notifications, and switch on push or email for the triggers you care about. If desktop push shows as blocked, allow Notifications for inbox.shopify.com in your browser first.

**Why did my notifications stop after I logged into another store?** Desktop push tracks the most recently opened store in that browser. Open the store you want alerts for last, or use email so it does not matter.

**Can the store owner see or change a staff member's notification settings?** No. Those settings are personal to each user. The owner controls routing through assignment, not the other person's toggles.

**Does an unassigned chat really alert the whole team?** Yes, every staff member with Inbox access and their own alerts on. Assign the chat to narrow that down to one person.

## When you need real routing rules

If your team is big enough that manual assignment is not enough, and you want proper rules like assign by topic, round-robin between agents, or per-agent controls the owner can manage, that is where a dedicated help desk app comes in.

Gorgias, Tidio, and Chatra all layer team assignment and routing on top of chat. They are worth a look once base Inbox starts to feel thin, but for most small stores the assignment model above is all you need.

## The quick checklist

To decide who gets a chat, assign it. Unassigned goes to every staff member with access, assigned goes to one person.

To stop someone getting alerts, assign chats away from them, or have them lower their own settings. You cannot change their settings for them.

To let a new person handle chat, give them Inbox access plus the Customers permission, and make sure they have accepted their invite.

To fix Chrome push, allow Notifications, not just pop-ups, then turn it on inside Inbox, then clear Windows Focus assist, then test.

That covers every part of the original question, and it is exactly how the current Shopify Inbox behaves on a live store.


---

---
title: Shopify Link in Bio: Show Your Domain, Land People on Products
description: You want your Instagram bio to read abc.com but send people straight to your products. A redirect will not do it, and /shop is a reserved path on Shopify. Here is the approach that works, and why the usual advice fails.
---

## The problem

You are doing organic marketing on Instagram. You have one link, in your bio, and you want it to do two things at once.

You want it to read as your bare domain, because that looks like a brand and not like a tracking link. And you want the tap to land on your products, not on a home page where the shopper has to find their way to the catalogue.

Plenty of stores appear to manage both. Their bio shows a clean domain, and the tap opens a product listing. So there must be a setting.

There is a way to get it, and it is not the one most answers give you.

## Why the redirect answer does not work

The advice you will find is to set up a URL redirect in Shopify, from your root domain to your products page. There are two reasons that fails.

**A Shopify redirect only fires on a URL that returns a 404.** This is the part that gets missed. Shopify's URL redirects exist to repair broken links, so they only take effect when the requested page does not exist. Your home page exists and loads fine, so a redirect pointing away from `/` never triggers. Nothing happens, and nothing tells you why.

**Even if it did work, it would be the wrong thing to do.** Redirecting your root domain means your home page is unreachable, for shoppers and for Google. Everything you have published about your brand on that page stops being seen, and every link anyone has ever made to your domain now lands somewhere else.

## Why /shop does not work either

The usual fallback is to make a short path instead: send people to `abc.com/shop` and redirect that to your products.

That specific path will not work on Shopify. `/shop` is one of Shopify's reserved path prefixes. So are `/cart`, `/carts`, `/orders`, `/apps`, `/application` and `/services`. Shopify uses them internally, and the redirect tool will not let you claim them.

Two more worth knowing, because they are the obvious destinations rather than sources: `/products` and `/collections/all` are fixed Shopify paths. You cannot redirect *from* those either.

If you do want a short path, pick a word Shopify has not reserved. `/drop`, `/store`, `/new` and `/all` are all free on a normal store, and they return a 404 today, which is exactly the condition a redirect needs. Set it up in **Online Store > Navigation > URL redirects**.

But you will still see that path in your bio, which is the thing you were trying to avoid.

## What actually works: change what the home page shows

Here is the approach that gets you both halves of what you asked for.

Stop trying to send people away from your home page. Put the products **on** it. Then `abc.com` is not a detour to the catalogue, it is the catalogue, and the bare domain in your bio is doing precisely what you wanted.

No redirect is involved, so there is nothing to break, nothing to maintain, and no SEO consequence. Your home page still exists, still ranks, and still receives every link anyone makes to your domain.

### Doing it

From your Shopify admin, go to **Online Store > Themes** and click **Customize**. Stay on the Home page template.

1. **Deal with the hero first.** Most themes open with a full width image banner that takes up the whole first screen. On a phone that pushes your products below the fold, which defeats the point. Either remove that section, or shorten it, or move it below the products.
2. **Add section > Featured collection.** Pick the collection you want people to land on. This is the one that does the work.
3. **For your whole catalogue**, either point that Featured collection at a collection containing everything, or use **Collection list** so shoppers pick a category first.
4. **Set the product count.** Featured collection has a products-to-show setting. Eight to twelve is usually right for a landing experience. Anything more and the page gets long on mobile.
5. **Save.**

Open the store on your phone and check what shows in the first screen. That is what an Instagram visitor sees, and it is the only view that matters for this job.

![A Shopify home page at phone width showing product cards straight away, with no hero banner above them](/images/blog/shopify-instagram-bio-link/01-home-page-products-mobile.png)

That is the target: products in the first screen, no scrolling, no hero to get past. The domain in the bio now takes someone directly to something they can buy.

### The trade off, stated plainly

Your home page is now a product listing. If you were using it to tell a brand story, run a lookbook, or announce a drop, you are giving that up, or moving it below the products.

For a store whose main traffic source is a single Instagram bio link, that is usually the right trade. For a store where the home page is doing real work for search traffic or for returning customers, it may not be. Look at where your visitors actually arrive before you decide.

## The Instagram side of it

Worth separating clearly, because half this problem is not Shopify's.

Instagram's bio **Links** section takes a URL and, on current app versions, an optional title. When you set a title, that is what displays in place of the URL. If yours is still showing the raw address, it is usually the app version, or the link was typed into the bio text rather than added in the Links section.

It also does not matter much once the home page shows products. At that point the raw `abc.com` is exactly the text you wanted people to see, and it goes exactly where you wanted them to go.

## What about a link in bio app?

There is a whole category of tools that give you a landing page with several buttons on it, and a link of their own to put in your bio.

They solve a different problem. They are for when you have many destinations to offer at once: a product, a playlist, a newsletter, a booking page. If your goal is one destination and a clean domain, adding a third party link in the middle makes both halves worse. The bio no longer shows your domain, it shows theirs, and the shopper takes two taps to reach a product instead of one.

## Sending only the Instagram visitor to your products

The section above changes the home page for every visitor. If you want to keep your home page as it is and move only the people arriving from Instagram, there is a cleaner signal than a redirect.

Instagram does not open your link in Safari or Chrome. It opens it in its own in-app browser, and that browser stamps `Instagram` into the user agent, the short string every browser sends describing itself. A sample from an iPhone looks like this, with the useful part at the end:

```
Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15
(KHTML, like Gecko) Mobile/15E148 Instagram 302.0.0.23.113 (iPhone14,2; iOS 17_0; ...)
```

So you can check for it and act only on those visitors.

In the theme editor, on the **Home page**, use **Add section > Custom Liquid** and paste this. Custom Liquid is a section Shopify gives you for dropping in your own code, and it needs no theme file editing:

```liquid
<script>
(function () {
  var tagged = (new URLSearchParams(location.search).get('utm_source') || '').toLowerCase() === 'instagram';
  var inApp  = /Instagram|FBAN|FBAV|FB_IAB/i.test(navigator.userAgent);
  if (!tagged && !inApp) return;
  if (sessionStorage.getItem('ig-routed')) return;
  sessionStorage.setItem('ig-routed', '1');
  location.replace('/collections/all' + location.search);
})();
</script>
```

Then put the tag on the link in your bio:

```
https://abc.com/?utm_source=instagram
```

### Why the user agent alone is not enough

Most versions of this answer test the user agent and stop there. That leaves a hole, and it is a large one.

The user agent test only fires inside the Instagram app. Someone reading instagram.com in desktop Chrome and clicking the same bio link sends an ordinary desktop user agent, so the test never matches and they land on your home page exactly as before.

![A Shopify home page on the left showing the brand hero for a desktop Instagram click, and the products page on the right after the link was tagged](/images/blog/shopify-instagram-bio-link/02-desktop-vs-tagged.png)

That is why the snippet checks two things. The tag catches the desktop web visitor, the user agent still catches the in-app one, and either is enough on its own.

### Reading that code

Five decisions in it are worth understanding, because they are what separate this from the version that annoys people.

- **The tag is the signal you control.** `utm_source=instagram` is on the link because you put it there, so it arrives whatever browser the visitor is using.
- **`sessionStorage` stops a loop.** Without it, a shopper who taps your logo to go back to the home page is thrown at the products again, over and over. The flag means the redirect happens once per visit.
- **`location.replace` rather than `location.href`.** Replace swaps the current history entry instead of adding one, so the Back button still works normally and no shopper gets trapped bouncing between two pages.
- **`+ location.search` carries the tags to the destination.** Drop it and the visitor arrives untagged, so Shopify attributes the session to nothing and the reporting you set this up for disappears.
- **`FBAN|FBAV|FB_IAB` catches Facebook's in-app browser too.** Remove them if you only want Instagram.

### What it does not affect

Googlebot never carries your tag and never sends an Instagram user agent, so it does not see the redirect and your home page is indexed exactly as before. Email traffic, ad traffic and people typing your domain are all unaffected too. The only people who move are the ones you sent.

One cost to weigh. If your Instagram Links section shows the raw URL rather than the Title you set, the tag is visible in the bio, which is the opposite of the clean look you were after. In that case use the Featured collection approach above instead, which needs no tag at all.

## What about a Cloudflare Worker?

This is a natural idea if you have used Cloudflare before: put a Worker in front of the domain, read the incoming request, and route Instagram traffic to your products page at the edge, before Shopify is involved at all.

It is worth answering properly, because the two companies say different things about it.

### Cloudflare documents it

Cloudflare has a provider guide for Shopify. It describes a configuration called Orange-to-Orange, or O2O, where your own Cloudflare zone sits in front of Shopify's. You enable it with a proxied CNAME pointing at `shops.myshopify.com`, and the guide says it works on any Cloudflare zone plan. Workers are listed as a compatible product, disabled only on the `/checkout` path.

![The Cloudflare provider guide for Shopify, showing the proxied CNAME record and the warning about Always Use HTTPS](/images/blog/shopify-instagram-bio-link/03-cloudflare-o2o-docs.png)

The same page carries a specific warning that explains most of the certificate horror stories: do not turn on **Always Use HTTPS**. That setting forces a redirect on every request, including `/.well-known/acme-challenge/*`, the path Shopify uses to prove domain ownership when it issues and renews your TLS certificate. Force a redirect there and the certificate stops renewing. Cloudflare's own fix is a redirect rule that excludes that path.

### Shopify says not to

Shopify's help centre is direct about it. Cloudflare proxy setups, O2O included, are not supported, and the page lists four consequences.

![The Shopify Help Center section on Cloudflare Proxy presence, listing SSL certificate provisioning failures, loss of resiliency, reduced bot detection accuracy and unsupported configuration](/images/blog/shopify-instagram-bio-link/04-shopify-cloudflare-unsupported.png)

- **SSL certificate provisioning failures.** Shopify verifies domain ownership over HTTP to issue certificates, and a proxy can block or interfere with that.
- **Loss of resiliency.** Shopify runs on multiple providers, and a proxy in front limits their ability to route around a provider problem.
- **Reduced bot detection accuracy.** Their bot detection reads the original request, and a proxy alters it.
- **Unsupported configuration.** In their words, your store might appear to work correctly, and the setup could still break at any time. Anything that goes wrong sits outside Shopify Support.

### So which is it

Both, and the answer is that the setup exists, Cloudflare documents it, and a Worker really can do this routing. It is also a configuration Shopify will not stand behind, on the domain your revenue arrives through.

For this particular job the maths is not close. You would be putting your whole storefront behind an unsupported proxy layer to move a redirect that a few lines of theme code already handle, with no certificate risk and nothing to maintain.

If you do not need a Worker for something else, leave the DNS record on **DNS only**, the grey cloud, which is what Shopify asks for.

## Why the referrer is not the answer

The other common suggestion is to read the referrer, the field naming which page sent the visitor. It sounds like it should work for the desktop web case, and it does not.

Instagram marks its bio links `rel="noreferrer"`. That instruction tells the browser to send no referrer at all, so your store receives an empty value and has nothing to test. Instagram also routes outbound clicks through `l.instagram.com` first, which would have obscured the original page even without the `noreferrer`.

Inside the app there is no referrer either, because the tap is opened by the app rather than clicked from a web page.

Build a rule on the referrer and it does nothing, for every Instagram visitor, with no error to tell you why. The tag on your own link is the signal that is actually present.

## Check that it worked, and that it is working

Two things are worth setting up once, because a bio link is often a store's biggest single traffic source and it is easy to leave it broken without noticing.

### Look at it the way a visitor does

Open your store on an actual phone, not a resized desktop browser. Those are different: a desktop window squeezed narrow still renders at desktop breakpoints in some themes, so the layout you see is not the layout a phone gets.

Then look only at the first screen, before any scrolling. A visitor arriving from a bio link has no context and no patience. If the first screen is a logo and a slogan, the link is not doing its job even though it technically works.

### Tag the link so you can measure it

Add tracking parameters to the URL you put in the bio, so the visits show up as their own source in analytics rather than being lumped in with everything else.

```
https://abc.com/?utm_source=instagram&utm_medium=social&utm_campaign=bio
```

This still displays as your domain in most places, and Shopify passes the parameters through to its own analytics. Without them, Instagram traffic and direct traffic look identical in your reports, so you cannot tell whether the change helped.

If you set up a short path instead of using the home page, put the parameters on that URL too.

If you used the routing snippet above, this tag is doing two jobs at once. It tells your analytics where the visit came from, and it is the signal the snippet tests to decide whether to move that visitor.

## If something is not behaving

- **The redirect did nothing.** The source URL still loads a real page. Redirects only apply to URLs that return a 404. Check by opening the source URL in a private window.
- **Shopify will not accept the path.** You have hit a reserved prefix. `/shop`, `/cart`, `/carts`, `/orders`, `/apps`, `/application` and `/services` are all taken. Choose another word.
- **The products are there but below the fold on mobile.** The hero section above them is too tall. Shorten it, remove it, or drag it below the Featured collection in the theme editor.
- **The bio still shows the full URL with the path.** That is Instagram displaying what you gave it. If you want the bare domain shown, the destination has to be the bare domain, which is the whole reason for putting products on the home page.
- **The routing snippet works on your phone but not on your laptop.** You are testing by typing the address, so there is no tag on the URL and no Instagram user agent. Test the actual bio link, tag included.
- **It redirected once and then stopped.** That is the `sessionStorage` flag doing its job. Open a new private window, or clear the tab's session storage, to test again.
- **You changed the home page and your search traffic dropped.** Check which pages were bringing that traffic before you assume the change caused it. If the home page was ranking for brand terms, it still will; if it was ranking for a story or guide you removed, move that content to its own page rather than deleting it.

## A quick summary

- Do not redirect your root domain. Shopify redirects only fire on URLs that 404, so it will not work, and if it did it would take your home page down with it.
- `/shop` is reserved by Shopify, along with `/cart`, `/orders`, `/apps` and `/services`. Pick an unreserved word if you want a short path.
- A Cloudflare Worker can technically do it, through a setup called O2O that Cloudflare documents, but Shopify lists that setup as unsupported and warns it can break at any time.
- To move every visitor, put a Featured collection on your home page. The bare domain then really is the product page.
- To move only the Instagram visitor, tag your bio link with `?utm_source=instagram` and check that tag as well as the user agent. The user agent alone misses every visitor clicking from instagram.com on a desktop.
- Check the result on a phone, because the first screen is the whole experience for a bio link.


---

---
title: "Shopify International Pricing: Set It and Stop Editing"
description: If you type a price for another country by hand, it never follows your base price again. The difference between a market price adjustment and a price override, and what Shopify will and will not round for you.
---

## The problem

You sell in one currency and you want sensible prices in another.

So you work out the rate, do the sum, and type the result onto the product. It looks right. Then a month later you change the base price, and the other country's price is still the old one. You go back in and retype it. Every product, every time.

A merchant in Macau described this exactly on the Shopify Community. They price in Hong Kong dollars and sell in patacas at roughly 1.03. They had typed a fixed pataca price onto every product, and every base price change meant doing it all again. Their words for it translate as "extremely troublesome".

They also wanted the result rounded up to a clean ten: 6800 x 1.03 gives 7004, and they wanted 7010.

Two different problems live in that one request. One of them Shopify solves properly. The other it does not solve at all. It is worth knowing which is which before you spend an evening in the product list.

## There are two ways to price a market, and they behave nothing alike

This is the distinction that explains the whole thing.

**A price adjustment** is a percentage applied to your base price for a whole market. You set it once. Every product in that market derives its price from the base price, live. Change the base price and the market price moves with it.

**A price override** is a number you type onto one product for that market. It is fixed. It has no relationship to the base price any more. Change the base price and the override sits there, unchanged, now wrong.

Most people who end up retyping prices have unknowingly chosen the second one, because typing a number into a field feels like the obvious way to set a price.

## Where the adjustment lives

In your admin, go to **Markets**, open the market, and find its catalog. The pricing block has two controls.

![The Shopify market catalog pricing block, with the currency selector and the price adjustment percentage](/images/blog/shopify-international-pricing/01-catalog-price-adjustment.png)

**Set prices in** picks the currency for that market.

**Price adjustment** is a percentage with an Increase or Decrease toggle. For the Macau case, 1.03 is simply **3% Increase**.

That single field is the whole exchange rate. It applies to every product in the catalog, and it keeps applying as your base prices change.

## Why a typed price never updates

Scroll down in the same catalog and you will see every product with a price field for that market.

![Per product price fields in a Shopify market catalog](/images/blog/shopify-international-pricing/02-per-product-price-override.png)

Here is the part worth slowing down for. **Those fields are not empty waiting for you.** They are already filled in, calculated from the adjustment you set above.

The moment you type your own number into one, that product is pinned. It stops deriving from the base price and starts being a fixed value you now own forever.

Nothing warns you. The field looked editable, so you edited it, and you took on a maintenance job.

So if your international prices keep going stale, the fix is usually subtraction rather than addition: clear the numbers you typed, and let the adjustment do its job.

## How to move from typed prices to an adjustment

1. Go to **Markets** and open the market.
2. Open its catalog.
3. Confirm **Set prices in** is the currency you want.
4. Set **Price adjustment** to your rate. A rate of 1.03 is 3% Increase. A rate of 0.9 is 10% Decrease.
5. Clear the prices you previously typed into individual products, so they fall back to the calculated value.
6. Change one base price and check that the market price moves.

Step 6 is the one people skip, and it is the only proof that you are actually done.

## What Shopify will round, and what it will not

Now the half that has no fix.

Shopify does round converted prices, so you do not show customers a price like 7004.31. But the rounding rules are presets chosen per currency, and the documentation is blunt about it:

"You can't customize your rounding rules to anything different from these defaults."

You cannot ask for "always round up to the nearest ten". You cannot ask for prices ending in 9, or 95, or 00, unless that happens to be the preset for that currency. There is no field for it because there is no setting behind it.

For the Macau merchant, that is the answer to the part they most wanted: 7004 can become whatever MOP's preset produces, but it will not become 7010 by configuration.

## So which do you give up

That leaves a genuine choice, and it is worth making deliberately rather than drifting into one.

**Take the adjustment.** Prices maintain themselves forever. You accept whatever ending the rounding preset gives you. For most stores this is the right trade, because customers care far less about a price ending than merchants imagine.

**Keep typed prices.** You get the exact number you want, on every product, and you own the upkeep permanently. This only makes sense for a short list of products, or for prices that genuinely are not a function of the base price.

What you cannot have natively is both: a price that recalculates itself and lands on an ending you chose. That needs something writing prices for you on a schedule, which means an app or a script, and there is no well-established app for it. When I searched the App Store catalogue for price rounding tools, only a handful existed and the rounding-specific ones had almost no reviews between them.

## Is this the same as a currency converter app?

No, and the difference matters.

A currency converter app is a storefront widget. It shows an approximate converted figure next to your price so a visitor can get a sense of the cost. The customer still pays in your currency at checkout, and the converted number is a display convenience.

A market price adjustment is real pricing. The price is set in that currency, the customer is charged in it, and it appears in your orders and reports in it.

If a shopper has ever told you the price changed between the product page and the checkout, a converter widget is usually the reason. The market adjustment does not have that problem, because there is nothing to convert at the end.

## When a fixed price is actually right

Overrides are not a mistake in every case. They are correct when the price genuinely is not derived from your base price.

Psychological price points in a specific market, where 990 sells and 1013 does not. Products priced to match a local competitor. Items where local duty or shipping makes a proportional markup wrong. A small set of hero products you want to control precisely.

The mistake is not using overrides. It is using them for the whole catalogue, by hand, as a substitute for an exchange rate.

## Do you need Shopify Payments for this?

For selling in another currency, yes, in practice. Presenting prices in a local currency at checkout depends on Shopify Payments being available in your country, or an equivalent supported gateway.

If Shopify Payments is not available where you are, the currency selector for a market will not offer other currencies at all, and your options narrow considerably. We covered that situation separately in [Shopify Multiple Currencies Without Shopify Payments](/blog/shopify-multiple-currencies-without-shopify-payments).

If you are also changing wording per country rather than just prices, [Shopify Translate & Adapt](/blog/shopify-translate-adapt-content-by-market) covers the content side of markets.

## If the prices still look wrong

**A product ignored the adjustment.** It has an override. Clear the field for that product.

**Everything ignored the adjustment.** Check which catalog is attached to that market, since a market with no catalog has nothing to adjust.

**The price moved but the ending is odd.** That is the rounding preset for the currency. It is not adjustable.

**The currency selector only offers your home currency.** Shopify Payments is not enabled or not available in your country.

**Compare-at prices did not follow.** There is a separate toggle for including compare-at price in the adjustment. Check it is on.

## Base price, market price, override, rounding

Four terms that get used interchangeably and should not be.

The **base price** is the price on the product itself, in your store's default currency. Everything else is derived from it.

The **market price** is what a customer in a given market sees. Normally calculated, not stored.

An **override** is a market price you typed in. Stored, fixed, and no longer connected to the base price.

**Rounding** is the final tidy-up Shopify applies to a calculated price so it does not display awkward decimals. It runs after the adjustment, and its rules are fixed per currency.

Get those four straight and international pricing stops being mysterious. Set the rate once, let it calculate, and only reach for an override when you truly mean to.


---

---
title: "Shopify Inventory Adjustment: Remove Damaged or Stolen Stock"
description: You can no longer type a negative number to write off stock, and typing -3 adds three instead. Here is the current Adjust by flow, the reason codes worth using, and how to do it in bulk.
---

## The problem

A merchant on the Shopify Community, running a toy shop, raised a very specific complaint about Shopify's inventory management: accounting for damaged items or theft got harder.

Their words: "You can no longer enter a negative amount to quickly adjust inventory."

That is accurate, and there is a worse version of it that most people hit before they find the right screen. **Typing a negative number does not fail. It adds.** Enter `-3` against a stock level of 45 and you get 48, not 42.

![Typing a negative quantity adds instead of subtracting: 45 becomes 48](/images/blog/shopify-inventory-adjustment/02-negative-quantity-adds-instead.png)

A wrong answer with no error is much worse than an error message, because you only find out at stocktake.

Here is the flow that actually works, and what changed.

## The current way to write off stock

Four steps, and the third one is the one people miss.

### Step 1: open Products, then Inventory

In your admin, go to **Products**, then **Inventory** in the sub-navigation. This is the list view with one row per variant, and it is where inventory edits are meant to happen.

You can do this from the product page too, but the Inventory view is faster because you never leave the list.

### Step 2: click the number in the Available column

Click the quantity itself, not the row. A small editor opens.

### Step 3: switch from "Set to" to "Adjust by"

This is the step that matters.

The editor opens on **Set to**, which replaces the number outright. What you want is **Adjust by**, which applies a delta.

Choose **Adjust by** and type the quantity as a **positive** number. Three damaged units is `3`, not `-3`.

### Step 4: set the movement direction

Now set the movement: **Shop location** to **Inventory removal**.

This is the piece that replaced the negative number. Instead of the sign telling Shopify which way stock moves, an explicit origin and destination do.

The preview updates live, so you can confirm before saving. Here it shows 45 going to 42.

![The Adjust by editor with Shop location to Inventory removal, previewing 45 to 42](/images/blog/shopify-inventory-adjustment/01-adjust-by-inventory-removal.jpeg)

Then click **Add reason** and choose **Damaged**, **Theft**, or whichever applies, and **Save**.

## Why Shopify made this harder

It is worth knowing the reasoning, because it changes whether the extra clicks feel worth it.

Under the old model, inventory was a single number and an adjustment was a delta. Stock went from 45 to 42 and Shopify recorded that it changed. It did not record *why*, or where those three units went.

The current model tracks inventory across named states: available, committed, reserved, damaged, quality control, safety stock, and inventory removal. An adjustment is a movement between two of those states, which is why the UI asks for an origin and a destination.

The benefit is reporting. **Analytics > Reports > Inventory adjustment changes** can now tell you that you lost 40 units to theft and 12 to damage this quarter, broken down by product. Under the old model that data did not exist, because the reason was never captured.

The cost is that a two-second edit became a six-second edit, and the negative-number habit now produces a wrong number instead of an error.

Whether that trade is worth it depends on whether you look at the shrinkage reports. If you do, tag every adjustment with a reason. If you never will, the reason step is optional and you can skip it.

## The reason codes, and which to use

**Damaged** is stock that existed and is no longer sellable. Broken, expired, opened.

**Theft or loss** is stock that has gone missing. Shoplifting, warehouse shrinkage, items that never arrived.

**Quality control** is stock pulled for inspection that may come back. Use this rather than Damaged when the units might return to available.

**Promotion or donation** is stock given away. Samples, influencer seeding, charity.

**Received** and **Restock** move stock the other way, into available.

The distinction that actually matters for your accounts is Damaged and Theft versus Quality control. The first two are write-offs and hit your cost of goods. The third is a temporary hold on stock you still own. Getting those mixed up makes your shrinkage number look worse than it is.

## The states, and why the UI asks for two of them

The origin and destination selectors confuse people because they look like locations, and sometimes they are. They are actually a mix of two things: your physical locations, and Shopify's inventory states.

The states you will see:

**Available** is sellable stock. This is the number your storefront checks.

**Committed** is stock spoken for by unfulfilled orders. Shopify manages this itself; you do not move things in and out of it by hand.

**Damaged**, **Quality control** and **Safety stock** are holding states. Stock is still yours, still counted as on hand, but not sellable. Moving units here reduces Available without pretending they never existed.

**Inventory removal** is the exit. Units leave your on-hand count entirely.

That distinction, holding state versus exit, is the one worth getting right. If a customer returned a damaged item you intend to repair and resell, move it to **Damaged**, not Inventory removal. If it goes in the bin, Inventory removal is correct.

A useful rule: **if you would still count it during a stocktake, it belongs in a holding state. If you would not, remove it.**

## Doing it in bulk

One at a time is fine for a broken item. For a stocktake it is not.

### Bulk edit

From **Products**, tick the products, then click **Bulk edit**. Add the **Available** column through the Columns picker and edit the numbers directly in the grid.

The catch: bulk edit sets absolute values, it does not adjust by a delta, and it does not capture a reason. So it is right for a stocktake where you are entering counted numbers, and wrong for writing off shrinkage you want in the reports.

### CSV export and import

For hundreds of rows, export your inventory to CSV, edit the quantities, and import it back. Same trade-off as bulk edit: absolute values, no reason codes.

Filter by SKU or by vendor before exporting so you are only handling the rows you need.

### A note on doing this often

If you are writing off damage weekly, it is worth building a habit around the reason codes rather than optimising the clicks. The four extra seconds per adjustment is the only thing standing between you and knowing what your actual shrinkage rate is, and most stores that complain about the clicks have never opened the report the clicks produce.

## Common questions

**Why does typing a negative number add instead of subtract?**

The field expects a magnitude, and the direction comes from the movement selector. The minus sign is discarded rather than treated as an error. It is the single most confusing part of this screen and it is worth telling your staff about explicitly.

**Can I still just type the new total?**

Yes, that is what **Set to** does, and it is the right choice after a physical count. Use **Adjust by** when you know the change but not the total, and **Set to** when you know the total.

**Where do removed units actually go?**

Nowhere sellable. Inventory removal is a terminal state; the units leave your on-hand count. If you want them tracked as still-owned but not sellable, use a different state such as Damaged rather than Inventory removal.

**Does this affect committed inventory on open orders?**

No. Adjustments act on available stock. If you have 45 available and 5 committed to unfulfilled orders, removing 3 leaves 42 available and the 5 committed untouched.

**Can I automate write-offs?**

Partially. Shopify Flow has inventory actions and can adjust quantities on a trigger, which is useful for things like automatically removing display units. It cannot replace a human deciding something is damaged.

**Multiple locations?**

The origin selector is where the location matters. Make sure you are removing from the location that actually holds the stock, because the default is not always the one you mean.

## If it did not work

**The number went up instead of down.** You typed a negative and left the movement on a receiving direction. Adjust it back and redo it with a positive number and Inventory removal.

**There is no Adjust by option.** You are on the product page's inventory field rather than the Inventory list editor. Go to Products, then Inventory, and click the number in the Available column.

**Add reason does not appear.** Reason codes attach to movements, so they show once an origin and destination are set. If the movement is incomplete, the reason picker stays hidden.

**The report shows nothing.** Reports only contain adjustments that were tagged with a reason. Untagged adjustments still change your stock but do not appear in the shrinkage breakdown, which is the main argument for always adding one.

## What I would do

Set a rule for whoever handles stock: **positive numbers only, direction from the dropdown, always add a reason.** Those three habits remove every failure mode on this screen, including the one that shows you nothing.

Then actually open **Analytics > Reports > Inventory adjustment changes** once a month. If the numbers there are useful, the extra clicks paid for themselves. If they are not, stop adding reasons and save the time.

## Tested on

Reproduced on a Shopify dev store: confirmed the Adjust by flow with Shop location to Inventory removal previews and saves correctly, and confirmed that entering a negative quantity increases the stock level rather than decreasing it or raising an error.


---

---
title: How to Create a Landing Page on Shopify Without an App
description: Shopify has a native way to build landing pages that most merchants never find. No page builder, no app fee, and every page gets its own indexable URL.
---

## You want a landing page, and every guide tells you to install an app

Search for how to create a landing page on Shopify and you will be sold a page builder within two clicks. PageFly, Shogun, GemPages. All good tools, all a monthly fee, and all of them adding scripts to a storefront you were probably trying to keep fast.

Shopify can do this natively. The feature is not called "landing pages", which is exactly why it is so hard to find.

This article walks through the native route end to end. The worked example is a real problem a merchant posted on the Shopify Community, because it is the case that breaks every simple answer: **one product, one SKU, and several landing pages that each need their own copy and photos**.

Here is the finished result. Two separate URLs, two headlines, two hero images, one product underneath.

![Two landing pages built from one template, one product, different URL, headline and photo](/images/blog/shopify-landing-page-without-app/01-two-landing-pages-one-product.jpeg)

## The problem, in the merchant's words

They sell a single product. One SKU. They wanted a landing page per audience: athletes, doctors, musicians, students. Each page needed different text and different images, and all of them had to share the same inventory count.

They had been doing it with alternate templates and a URL parameter:

```
www.example.com/products/computer?view=students
www.example.com/products/computer?view=athletes
```

It worked, visually. It was also, in their words, clunky. They were right, and for a reason worth knowing before you build anything.

## Why the `?view=` trick cannot work

Shopify themes support alternate templates through a `?view=` parameter. It is a real feature and it renders correctly.

The problem is that it produces a query string, not a page.

I measured this on a test store rather than assuming. On `/products/my-product?view=students`, the rendered HTML contains:

```html
<link rel="canonical" href="https://example.com/products/my-product">
```

The canonical tag points at the plain product URL, with the parameter stripped. The `og:url` does the same. The page title is the base product's title, unchanged.

That is Shopify telling Google, on every single view URL, "the real page is over there". So every one of those landing pages hands its ranking signals straight back to the one product page. They will never rank as separate pages, they cannot be tracked cleanly as separate pages in analytics, and they are awkward to point ads at.

Query strings are for filtering and sorting. They are not for content you want indexed.

## The two native routes, and which one to pick

Shopify gives you two ways to build a real landing page with a real URL. Most advice only mentions the first.

**Route one: a Page plus a custom page template.** Online Store, Pages, Add page. Then a matching template in the theme editor. This is fine for one or two landing pages.

It scales badly. Every new audience means a new Page, and a new template or some per-page wiring so the right content appears. At four audiences it is tedious. At twenty it is a maintenance problem, and you will be editing the theme every time marketing invents a new persona.

**Route two: metaobject entries published as web pages.** One definition, one template, and one entry per audience. Adding an audience is adding an entry. You never touch the theme again.

Route two is the one few merchants know exists, so that is what the rest of this covers.

## What are metaobjects in Shopify?

A metaobject is a custom content type you define yourself.

Metafields let you add a field to something Shopify already has, like a product or a collection. Metaobjects let you invent the thing itself. You decide it has a Headline, a Body copy and a Hero image, and Shopify gives you an admin screen to create as many of them as you like.

They are already used for things like size charts and colour swatches. What most merchants miss is the setting that turns them into pages.

## Step 1: Define what changes between your landing pages

Go to Settings, Custom data, Metaobjects, Add definition. Name it something that describes the audience, not the page. I used **Audience**.

Now add one field per thing that differs between landing pages:

- **Headline**, Single line text
- **Body copy**, Multi-line text
- **Hero image**, Image (File)

Add more if your pages need more. Benefits list, testimonial, CTA text, a second image. The rule is simple: anything identical on every page belongs in the template, and anything that changes belongs here as a field.

![Add a metaobject definition with one field per thing that changes](/images/blog/shopify-landing-page-without-app/02-metaobject-definition-fields.png)

## Step 2: Turn on the setting that makes them pages

This is the whole trick, and it is one toggle.

Scroll to **Metaobject options** and switch on **Publish entries as web pages**.

Three things appear underneath:

- **Page title.** Point this at your Headline field. Every landing page then gets its own `<title>` automatically.
- **Enable in Online Store.** Leave it ticked.
- **Handle.** This becomes the URL prefix. I set it to `for`, which produces `/pages/for/athletes`. Set it to `audience` and you get `/pages/audience/athletes`. Pick something that reads well in an address bar.

Shopify shows you the resulting URL pattern live, right under the field.

![Publish entries as web pages is the setting that does the work](/images/blog/shopify-landing-page-without-app/03-publish-entries-as-web-pages.png)

## Step 3: Add one entry per audience

Go to Content, Metaobjects, pick your definition, Add entry.

Fill in the headline, the body copy and the image for that audience. Then open **Search engine listing** and set the **URL handle**. This is the last part of the address, so set it to `athletes`, `doctors`, `musicians`, `students`.

If you skip this, Shopify generates the handle from your headline, which gives you `/pages/for/built-for-athletes` instead of `/pages/for/athletes`. Not wrong, just uglier.

![One entry per audience, with its own URL handle](/images/blog/shopify-landing-page-without-app/04-entry-url-handle.png)

Repeat for each audience. That is the only step you will ever repeat.

## Step 4: Build the template once

Online Store, Themes, Customize. At the top of the editor there is a page dropdown. Open it and pick your metaobject template, listed under the definition's name.

Now build the page as you would build any other:

- Add an **Image banner**. Click the dynamic source button next to the image setting and bind it to your Hero image field. Do the same for the heading and your Headline field.
- Add a **Rich text** section for the body copy, bound to your Body copy field.
- Add a **Featured product** section and pick your product.

The Featured product section is the part that matters commercially. It renders Shopify's own product form, so the Add to cart button posts the real variant to the real cart. No custom code, nothing to reconcile at checkout.

![The Featured product section renders the real add to cart](/images/blog/shopify-landing-page-without-app/05-featured-product-add-to-cart.jpeg)

Save. That is the last time you open the theme editor for this.

## What you end up with

I tested this on a Dawn 15 store with two entries against one shared template, and created no Pages at all.

| | athletes page | doctors page |
| --- | --- | --- |
| URL | `/pages/for/athletes` | `/pages/for/doctors` |
| Title | Built for athletes | Made for long shifts |
| Hero image | one photo | a different photo |
| Canonical | itself | itself |
| Variant added to cart | 47758844887217 | 47758844887217 |

Different URLs, different titles, different images. The same variant ID posted to the cart from both.

That last row is the one people worry about. Inventory does not need syncing because there is nothing to sync. There is still exactly one product and one variant, and both pages point at it. Stock, price and order history stay in one place automatically.

## How to use metaobjects in Shopify for anything else

The same pattern works well beyond landing pages, once the shape clicks:

- **Locations or stockists.** One entry per store, each with its own page.
- **Team members or authors.** One entry per person.
- **Recipes, tutorials, use cases.** Anything you have many of, that shares a layout.
- **FAQ entries** reused across several product pages.

The question to ask is always the same. Do I have many of these, do they share a layout, and do they each deserve a URL? If yes, it is a metaobject.

## Two things that will trip you up

Both of these cost me time on the test build, and neither is documented anywhere obvious.

**A Multi-line text field will not bind to the Image banner's text block.** That block expects a different text type, so your Body copy field simply will not appear in the dynamic source list. It looks like the binding is broken. It is not. Put your body copy in a **Rich text** section instead, whose text setting accepts multi-line text.

**If you edit the template JSON by hand, every dynamic source needs `.value`.** Using the theme editor's dynamic source button writes this correctly for you. Hand-editing does not, and the push is rejected:

```
{{ metaobject.headline.value }}
```

Leave off `.value` and Shopify returns "must end with '.value' when not using a metafield filter". A `richtext` setting additionally needs the binding wrapped in a paragraph tag.

## How to create a hidden landing page on Shopify

A related question worth answering, because the naive approach does not work.

Removing a page from your navigation menu does not hide it. The URL still resolves, and Shopify still lists it in `sitemap.xml`, so it can be found and indexed regardless.

With metaobject entries you have a cleaner lever. Each entry has a **Status** of Active or Draft. Set it to Draft and the page stops resolving on the storefront entirely, while the content stays in the admin ready to publish. That is a genuine unpublish, not a hidden menu item.

For campaign pages you want live but unlisted, keep the entry Active, keep it out of every menu, and add a `noindex` tag through your theme or an SEO app.

## If your landing page does not appear

Work through these in order.

**Check the entry is Active.** A Draft entry returns a 404 on the storefront. This catches most people once.

**Check the template exists in the theme you are viewing.** The metaobject template lives in a specific theme. If you built it in a draft theme and are testing the live one, you get nothing. This is the single most common cause.

**Check you enabled it in the Online Store.** The Publish entries as web pages toggle has an "Enable in Online Store" checkbox nested underneath. Both are needed.

**Check the URL handle, not the display name.** The address uses the handle from Search engine listing, not the headline you typed at the top.

**Clear the cache.** Shopify's CDN holds pages. Test in a private window before concluding anything.

## Page, template and entry, named properly

Most of the confusion here is vocabulary, so here they are side by side.

**A Page** is a content record you create under Online Store, Pages. It has a title, a body, and a URL at `/pages/its-handle`. One page, one record.

**A template** is the layout in your theme that decides which sections render and in what order. Many pages can share one template.

**A metaobject entry** is a record of a content type you invented. With web pages enabled it behaves like a Page, except that you never create a Page for it, and every entry automatically renders through the one shared template.

Get those three straight and the choice stops being difficult. A handful of one-off pages, use Pages. Many pages that share a shape and differ only in content, use metaobject entries and build the layout once.

The merchant who asked this had four audiences and was planning more. For that, the entry route is not just tidier. It is the difference between editing the theme every time marketing invents a persona, and never editing it again.


---

---
title: Limit the Shopify Quantity Selector to Stock
description: Stop shoppers picking more than you have. Cap the Shopify quantity selector to the real available stock per variant in Horizon.
---

## The problem

A merchant asked about this on the Shopify Community. Herve, running the Horizon theme on the Basic plan, had a simple worry.

On his product page a shopper could type any number into the quantity box. Even a number bigger than the stock he actually had.

He wanted the quantity to cap at the real available stock. And he wanted it to update the moment the shopper switched to a different variant.

That is the goal of this guide: **shopify limit quantity to stock**, per variant, live.

I reproduced it on a test store on the Horizon theme. It behaves exactly as he described.

I made a variant with 3 units in stock. The quantity box still let me set 50.

![Horizon quantity box lets a shopper set 50 when only 3 are in stock](/images/blog/shopify-limit-quantity-to-stock/01-horizon-quantity-exceeds-stock.png)

Nothing on the page stopped the over-order. The shopper only hits a wall at checkout, which is late and frustrating.

## Why it happens

The Horizon quantity box is a small web component. In the theme code it is a `quantity-selector-component` wrapping an `input[name="quantity"]`.

That component reads your **quantity rules**. Those are the min, max, and increment you can set on a product.

Here is the key point. Quantity rules are a fixed number you type in. They are not tied to your live stock.

So if you never set a max rule, the box has no ceiling. The shopper can type anything.

Horizon has **no native toggle** that says "cap the quantity to inventory." That option simply does not exist in the theme settings.

Shopify does check stock. But it checks on the server, at checkout. The quantity box on the product page does not know or care about your inventory count.

That gap is what we are closing. We give the box a live ceiling that matches the selected variant's stock.

## Before you start: check two settings

The cap only makes sense on variants where a real stock number exists. So check two things on your product first.

**Track quantity must be on.** Open the product, open the variant, and make sure "Track quantity" is ticked. If Shopify is not counting units, there is no number to cap to.

**Overselling must be off.** In the same place, "Continue selling when out of stock" must be unticked.

If a variant is allowed to oversell, it has no ceiling on purpose. You are telling Shopify to keep selling past zero. The snippet leaves those variants unlimited, which is correct.

So the rule is simple. Tracked stock plus no overselling equals a cap. Anything else stays open.

## The fix

The clean way is a **Custom Liquid block** on the product page. A Custom Liquid block is a spot in the theme editor where you can paste your own code. Horizon supports it out of the box.

You add it once. Because it lives in the product template, it covers every product that uses that template.

Here are the steps.

**Open the theme editor.** Go to Online Store, then Themes, then Customize on your Horizon theme.

**Open a product page.** Use the top page picker to switch the preview to a product. Then in the left sidebar find the Product information area. Click Add block, then choose Custom Liquid.

![Add a Custom Liquid block under Product information in the Horizon theme editor](/images/blog/shopify-limit-quantity-to-stock/02-add-custom-liquid-block.png)

**Paste the code.** Drop the snippet below into the Liquid code box, then click Save.

```liquid
{%- comment -%} Limit the quantity to the selected variant's stock {%- endcomment -%}
<script>
(function () {
  var STOCK = {
    {%- assign first = true -%}
    {%- for v in product.variants -%}
      {%- if v.inventory_management != blank and v.inventory_policy != 'continue' and v.inventory_quantity > 0 -%}
        {%- assign cap = v.inventory_quantity -%}
        {%- if v.quantity_rule.max != blank and v.quantity_rule.max < cap -%}{%- assign cap = v.quantity_rule.max -%}{%- endif -%}
        {%- unless first -%},{%- endunless -%}"{{ v.id }}": {{ cap }}{%- assign first = false -%}
      {%- endif -%}
    {%- endfor -%}
  };
  function variantId() {
    var el = document.querySelector('product-form-component input[name="id"], form[action*="/cart/add"] input[name="id"], input[name="id"]');
    return el ? el.value : null;
  }
  function apply() {
    var id = variantId();
    document.querySelectorAll('quantity-selector-component').forEach(function (qs) {
      var input = qs.querySelector('input[name="quantity"]');
      if (!input) return;
      var min = input.getAttribute('min') || '1';
      var step = input.getAttribute('step') || '1';
      var cap = STOCK.hasOwnProperty(id) ? String(STOCK[id]) : null;
      if (typeof qs.updateConstraints === 'function') qs.updateConstraints(min, cap, step);
      else if (cap) { input.setAttribute('max', cap); if (parseInt(input.value, 10) > +cap) input.value = cap; }
      else input.removeAttribute('max');
    });
  }
  document.addEventListener('shopify:product:select', function (e) {
    if (e && e.promise && e.promise.then) e.promise.then(apply, apply);
    setTimeout(apply, 350);
  });
  if (document.readyState !== 'loading') apply();
  else document.addEventListener('DOMContentLoaded', apply);
})();
</script>
```

Here is what the code does, in plain words.

The Liquid loop at the top reads every variant when the page builds. It writes each qualifying variant's stock into a small list the browser can read.

A variant only makes the list if it tracks inventory, does not oversell, and has stock above zero. If you have set a max rule that is lower than stock, that lower number wins.

The `apply` function then finds the quantity box and the selected variant. It sets the box's max to that variant's stock.

It also calls Horizon's own `updateConstraints` method when it exists. That is how the plus button greys out at the limit, the Horizon way, not a fight against the theme.

The last part listens for the `shopify:product:select` event. That fires when the shopper switches variant. So the cap recalculates the instant they change size or colour.

Save the block. That is the whole fix. This is how you set a **shopify quantity selector max stock** on Horizon.

Now the same variant that had 3 in stock stops at 3. The plus button greys out. Typing a bigger number snaps back down.

![Horizon quantity now capped at the variant's real stock of 3 with the plus button greyed out](/images/blog/shopify-limit-quantity-to-stock/03-quantity-capped-at-stock.png)

I tested this on a Horizon store. A variant with 3 in stock capped at 3. Switching to a variant with 8 in stock moved the limit to 8. Typing a bigger number snapped back to the cap. Numbers, not guesses.

## An alternative: a fixed max with quantity rules

If your worry is not live stock but a flat purchase limit, you do not need code at all.

Shopify has a built in **quantity rules** feature. Open a product, scroll to the Purchase options or inventory area, and set a maximum.

For example, set a max of 5. The box will not go above 5 on that product.

This is the no-code path for **shopify limit purchase quantity**. It is perfect for "one per customer" style caps or bundle limits.

But be clear on the difference. A quantity rule is a fixed number. It does not follow your stock.

If you set max 5 and you only have 3 left, the box still allows 5. So a rule alone will not solve the over-order problem the merchant had.

For a live, per stock cap you still want the Custom Liquid snippet above. The snippet even respects a max rule when you have one, using whichever number is lower.

Apps exist too. Purchase limit apps and inventory apps can enforce minimums, maximums, and per customer caps at scale. They are worth it if you need order level limits or limits across many products with different rules.

## How do I set a maximum quantity per product in Shopify?

For a flat cap, use the built in quantity rules. This is the native way to set a **shopify max quantity per product**.

Open the product in your admin. Find the quantity rules or purchase options section. Set the maximum you want, then save.

The quantity box on the storefront then refuses to go above that number. No theme code needed.

Use this when the limit is a business choice, like two per order. Use the Custom Liquid snippet instead when the limit must track real stock.

## Can I limit purchase quantity in Shopify without an app?

Yes, in two ways.

For a fixed cap, quantity rules do it natively, no app and no code.

For a stock aware cap, the Custom Liquid snippet above does it, again no app. It is a one time paste into the theme editor.

You only need an app when you want limits that Shopify cannot express. Examples include per customer limits across sessions, or a cart total limit spanning many products.

For a single product cap, or a per variant stock cap on Horizon, you can stay app free.

## How to limit quantity per variant in Shopify

This is the exact case the merchant had, and it is where most themes fall short.

A product often has many variants with different stock. Size Small might have 3 units. Size Large might have 8.

A flat quantity rule cannot handle that. One rule applies to the whole product, not each variant.

The Custom Liquid snippet solves the **shopify quantity limit variant** case directly. It stores every variant's stock, then re-reads the selected one on each variant change.

So Small caps at 3 and Large caps at 8, on the same page, live. That per variant behaviour is the reason a plain rule was never enough here.

## Does the Shopify quantity selector show max stock automatically?

No. On Horizon, and on most themes, the quantity box does not read your inventory by default.

It follows quantity rules only. With no max rule set, it has no ceiling at all.

Shopify does enforce stock, but on the server at checkout. That is too late to guide the shopper on the product page.

To make the box respect stock up front, you add the cap yourself. That is what this snippet does.

## If it did not work

A few things trip people up. Check these in order.

**The variant allows overselling.** If "Continue selling when out of stock" is ticked, the snippet leaves that variant unlimited on purpose. Untick it if you want a cap.

**Inventory is not tracked.** If "Track quantity" is off, there is no stock number to cap to. Turn tracking on.

**The block is on the wrong template.** The snippet reads `product.variants`, so it must live on the product page, in a Custom Liquid block inside Product information. It will do nothing on the home page or a section that is not a product.

**Your theme is not Horizon.** The code targets Horizon's `quantity-selector-component` and its `updateConstraints` method. On Dawn or another theme the markup differs, so the selectors need adapting.

**A cached page.** After saving, hard refresh the storefront. Old cached HTML can hide a fresh change for a minute.

**Sold out variants.** These are already blocked by the Add to cart button, so the snippet leaves them alone. That is expected, not a bug.

## Definitions people confuse

A few terms get mixed up here. Clearing them makes every step above easier.

**Inventory tracking.** This is Shopify counting your units. When on, each sale lowers the number. The snippet needs this on to have a number to read.

**Overselling.** This is the "continue selling when out of stock" setting. When on, Shopify keeps selling past zero, so there is no ceiling to enforce.

**Quantity rules.** These are the min, max, and increment you type on a product. They are fixed numbers and do not follow stock.

**Stock cap.** This is what the snippet adds. A live ceiling equal to the selected variant's real stock.

**Client side versus server side.** The quantity box is client side, in the browser, for convenience. Checkout is server side and is the real guard. The snippet improves the client side experience so shoppers are not surprised later.

**Variant versus product.** A product can have many variants, each with its own stock. A per product rule treats them as one. A per variant cap treats each on its own, which is what most stores actually need.

That is the full picture. Set your two inventory settings, paste one Custom Liquid block, and the Horizon quantity selector caps to real stock, per variant, and re-caps every time the shopper switches.


---

---
title: Shopify Line Item Properties: Show Custom Options in Cart
description: Made a custom dropdown or text field on your product page, but the customer's choice never shows in the cart or on the order? Here is why line item properties get dropped, and the exact fix, tested on Horizon.
---

## The problem

A merchant asked about this on the Shopify Community, and it is one of the most common product-page questions there is.

They run Shopify's Horizon theme. They added a dropdown to their product page so customers could pick a "Text Color" (Black, White, Red, Athletic Gold). The dropdown shows up fine. But when a customer picks a colour and adds the product to the cart, the choice vanishes. Nothing appears in the cart, and nothing appears on the order.

The strange part: a "Special Instructions" text box on the same product page works perfectly. Whatever the customer types there shows up under the item in the cart, exactly as expected.

So one field works and the other does not, on the same page. That is the puzzle.

Here is the same setup reproduced on a test store. A customer picked Red, added to cart, and the cart line shows the product but no Text Color at all.

![A Shopify cart line with no line item property, even though the customer picked a colour](/images/blog/shopify-line-item-properties/01-dropdown-choice-missing-from-cart.png)

If that is you, you are not doing anything wrong. The dropdown is just not wired up the way the text box is. Let me explain what is actually happening, then give you the one-line fix.

## What a line item property is

A line item property is a small piece of custom text that rides along with a product when it goes into the cart.

It is not a variant. Variants are the price-and-inventory choices you set up in the product editor, like size or colour. A line item property is different. It is a note attached to that one cart line: an engraving, a gift message, a chosen colour, a delivery date.

Shopify stores it as a name and a value. In the example above the name is "Text Color" and the value is "Red". Once it is attached, it shows under the item in the cart, carries through checkout, and lands on the order for you to read when you fulfil it.

Themes create line item properties from form fields. Any field on the product page whose name follows the pattern `properties[Something]` gets picked up when the product is added to the cart. That is the whole mechanism.

The "Special Instructions" box works because it is a proper line item property field. Its name is `properties[Special Instructions]`. The dropdown does not work because, even though its name looks right, it never actually reaches the cart. Here is why.

## Why the dropdown gets dropped on Horizon

This is the part every quick answer skips, and it is the reason the fix works.

To send a field to the cart, Shopify submits the product's "Add to cart" form. Everything inside that form gets sent. Anything outside it does not.

On older themes, all the product-page content sat inside one big form, so a stray field usually got swept up. Horizon is built differently. In Horizon, the blocks on your product page (the title, the price, the variant picker, your custom dropdown) each render as their own piece, and they sit next to the "Add to cart" form, not inside it.

That is fine for text and images. It is a problem for a form field. A dropdown that sits next to the form, rather than inside it, is invisible to the submission. The customer picks Red, clicks Add to cart, and the dropdown is simply not part of what gets sent.

So how does the "Special Instructions" box get through? Because Horizon's own field has a special attribute that reconnects it to the form. In HTML, a field can be linked to a form it is not physically inside, using a `form` attribute that points at the form's ID. Horizon's built-in property block does exactly that. The dropdown that an AI generator or a quick snippet produced does not, because it has no way to know the form's ID.

That is the entire bug. Right field name, wrong (missing) form link.

You can confirm this on your own store in ten seconds. Add the item with a choice picked, then open `yourstore.com/cart.js` in the browser. If you see `"properties": {}` (empty), the field is not reaching the cart. That is the wiring problem, not a theme bug.

## The fix: link the dropdown back to the form

The fix is one attribute on the `<select>` element:

```
form="BuyButtons-ProductForm-{{ section.id }}"
```

`BuyButtons-ProductForm-{{ section.id }}` is the ID of Horizon's "Add to cart" form. Adding it to your dropdown tells the browser "this field belongs to that form", so the choice gets submitted with everything else.

Here is a complete, working Custom Liquid block you can drop in. It renders the Text Color dropdown on the product page and, because of that `form` attribute, sends the choice to the cart.

Open your product page in the theme editor first.

![The Text Color dropdown on a Shopify Horizon product page](/images/blog/shopify-line-item-properties/02-text-color-dropdown-product-page.png)

Now paste the code.

- In your admin, go to Online Store, then Themes, then Customize.
- Open a product page in the editor.
- Click your existing dropdown block (the Custom Liquid block you added). If you do not have one, click Add block, then Custom Liquid, and place it just under the variant options.
- Replace the code in it with this:

```
<div class="cl-dropdown">
  <label for="cl-text-color"><strong>Text Color</strong></label><br>
  <select id="cl-text-color" name="properties[Text Color]" form="BuyButtons-ProductForm-{{ section.id }}">
    <option value="">- Choose -</option>
    <option>Black</option>
    <option>White</option>
    <option>Red</option>
    <option>Athletic Gold</option>
  </select>
</div>
```

- Click Save.

The one line that matters is the `form="BuyButtons-ProductForm-{{ section.id }}"` on the `<select>`. Everything else is just the label and the options.

![The Custom Liquid block in the Shopify theme editor, with the form attribute that links the dropdown to the cart](/images/blog/shopify-line-item-properties/03-custom-liquid-block-form-attribute.png)

`{{ section.id }}` is a small piece of Liquid that fills in the correct section ID automatically, so you do not have to hunt for it. Because the block sits in the same product section as the Add to cart button, it resolves to the same ID, and the two line up.

## Check that it worked

Add the product to the cart again with a colour selected, then open the cart.

On a test store running Horizon, I picked Red, added to cart, and the choice now shows under the item, exactly like the Special Instructions box does.

![A Shopify cart line now showing the Text Color line item property](/images/blog/shopify-line-item-properties/04-line-item-property-showing-in-cart.png)

That same value now carries through to checkout and onto the order, so you will see "Text Color: Red" when you go to fulfil it. No app, no extra plumbing.

One thing to know: changing the dropdown does not update an item that is already in the cart. If you were testing before the fix and left something in the cart, remove it and add a fresh one. Line item properties are set at the moment of adding, not afterwards.

## Make it your own

The block above is a starting point. A few common tweaks:

- **Rename the option.** Change "Text Color" in both places (the label and the `name="properties[Text Color]"`) to whatever you sell: Engraving, Gift Message, Monogram, Frame Colour. The name you use is exactly what shows in the cart and on the order, so keep it readable.
- **Change the choices.** Edit the `<option>` lines. Add or remove as many as you like.
- **Make it required.** Add `required` inside the `<select>` tag so the customer cannot add to cart without choosing. Keep the empty `- Choose -` option so there is a blank starting state to force a real choice.
- **Use a text box instead of a dropdown.** For a free-text field like an engraving, Horizon already has a built-in block. In the editor, Add block, then look for the property or text-input block. It has the form link built in, so it just works. Use the Custom Liquid route when you specifically need a dropdown, which the built-in block does not offer.

## What to check if it still does not show

If the choice is still missing after the fix, run through these. They are the usual culprits.

- **Do not start the name with an underscore.** A property named `properties[_Text Color]` is treated as hidden and is deliberately not shown in the cart. Drop the underscore unless you want it hidden.
- **Confirm the field is actually a form field.** It has to be a real `<select>`, `<input>`, or `<textarea>` with a `name` attribute. A styled `<div>` that looks like a dropdown but is not a form control will never submit.
- **Match the form ID exactly.** The `form` attribute has to match your theme's Add to cart form ID. On Horizon that is `BuyButtons-ProductForm-{{ section.id }}`. On other themes the ID is different, so check what your theme uses.
- **Add a fresh item.** As above, existing cart items keep whatever they had. Always test with a brand new add.
- **Check `/cart.js`.** Open `yourstore.com/cart.js`. If the value is there but the cart page does not show it, the issue is the cart template, not the field. Most themes show non-blank properties automatically, so this is rare.

## Line item properties, variants, and metafields

These three get mixed up constantly, and picking the wrong one is where a lot of wasted effort goes. Here is the short version.

- **Variants** are for real product choices that affect price or stock, like size or a colour that has its own inventory. You set them up in the product editor. There is a hard limit on how many you can have, so do not use variants for open-ended options like engraving text.
- **Line item properties** are for per-order custom input that does not change price or stock: a message, a chosen finish, a date. That is what this whole article is about. They are free, they have no variant limit, and they attach to the cart line.
- **Metafields** are for storing extra data about a product itself, like a care guide or a spec sheet, that you show on the page. They are not customer input at checkout, so they are the wrong tool for a "let the buyer choose" field.

If your question is "how do I let a customer type or pick something that ends up on the order", the answer is almost always a line item property, which is exactly the fix above.

## If you would rather not touch code

If editing theme code is not for you, a product-options app does the same thing with a visual builder and handles the cart wiring for you. Infinite Options, Globo Product Options, and Hulk Product Options are all popular choices. They are the easier route if you want conditional logic, price add-ons, or file uploads on top of a simple dropdown.

For a single dropdown that just needs to reach the cart, though, the one-attribute fix above is free and takes a couple of minutes.


---

---
title: "How to Add Local Pickup on Shopify and Turn It Off"
description: "Local pickup on Shopify is a free setting, not an app. Here is where to switch it on, how to turn it off again for the months you do not offer it, and exactly what your customers stop seeing. Tested on a real store with before and after screenshots."
---

## The problem

A merchant asked this on the Shopify Community. They run a gift shop. They deliver locally all year, but they only offer in-store pickup around certain holidays.

They wanted an app. Something they could switch off the rest of the year, then switch back on in December.

They do not need one. Local pickup is built into Shopify, on every plan, for free. It is a switch you can flip as often as you like.

The part the help docs skip is where that switch lives. Or what happens to your settings when you turn it off. Or what your customers actually stop seeing.

I set the whole thing up on a test store and ran it both ways. Everything below is what really happened.

## Where local pickup actually lives

This is the bit that sends people looking for an app.

Local pickup is not a setting on a product. It is not a setting on your theme either. It is a setting on a **location**.

A location in Shopify is a place that holds stock. Your shop, your warehouse, your garage. Most small stores have one. Some have several.

Each location has its own pickup switch. Turn it on and that location starts offering collection at checkout. Turn it off and it stops. Nothing else about the location changes, and no stock moves.

Once you know it is a per-location switch, two things suddenly make sense. First, there is no app to install. Second, if you have three locations, you have three switches, not one.

## Step 1: Open the pickup settings

Go to Settings, then Shipping and delivery.

Scroll past the shipping profiles. Near the bottom there is a card called **Additional delivery methods**. It holds three rows: Local delivery, Pickup in store, and Pickup points.

Open **Pickup in store**.

![Settings, Shipping and delivery, then Pickup in store](/images/blog/shopify-local-pickup-on-off/01-pickup-in-store-setting.png)

The badge on the right tells you the current state at a glance. Mine said On.

If you have looked at older guides and cannot find this, that is because the wording changed. Shopify used to call this "Local pickup". The card now says "Pickup in store". It is the same feature.

## Step 2: Pick the location

You now see every location on your store that can offer collection.

![Your locations, each showing whether it offers pickup](/images/blog/shopify-local-pickup-on-off/02-locations-that-offer-pickup.jpeg)

Each row shows whether that location currently offers pickup. Click the one your customers actually collect from.

If a location is missing from this list, it is probably not set to fulfil online orders. You can fix that under Settings, then Locations.

## Step 3: Use the Location status switch

Inside the location you get a card called **Location status**, with one toggle. The label reads "Let customers pick up orders directly at this location".

That toggle is the whole feature. On means pickup is offered. Off means it is not.

![The Location status toggle turns pickup on and off](/images/blog/shopify-local-pickup-on-off/03-location-status-toggle.jpeg)

Below it are two more things worth setting once:

- **Expected pickup date.** This is the "Usually ready in ..." line customers see. It is a dropdown with fixed choices, not free text. You get 1 hour, 2 hours, 4 hours, 24 hours, 2 to 4 days, and 5 or more days. There is no 48 hours option, so pick the closest one.
- **Ready for pickup notification.** This is the message emailed to the customer when you mark the order ready. Mine says "Bring your confirmation email when you come to collect your order."

Set those once and forget them. You will see why in a moment.

## Step 4: Switch it off, then Save

Now the part the merchant actually asked about.

Flip **Location status** off. A black bar appears at the top of the admin saying "Unsaved changes". Click **Save**.

![Switch the toggle off, then click Save in the top bar](/images/blog/shopify-local-pickup-on-off/04-switch-off-then-save.jpeg)

The toggle on its own does nothing until you save. I missed the Save button twice on my test store and wondered why the storefront had not changed.

When the holidays come round, open the same screen, flip it back on, and Save again. It takes about ten seconds.

**Your settings survive.** I checked this specifically, because it is the thing that would make the switch annoying. I turned pickup off, saved, then turned it back on. The expected pickup date was still "Usually ready in 24 hours". My ready-for-pickup message was still there, word for word. Nothing to re-type. That is why it is safe to treat this as a seasonal switch.

## What your customers stop seeing

Two things change on the storefront, and both happen immediately.

**On the product page.** With pickup on, a theme like Dawn shows a small block under the buy buttons. It has a tick, "Pickup available at ...", your ready-in time, and a "View store information" link.

![Product page with local pickup switched on](/images/blog/shopify-local-pickup-on-off/05-product-page-pickup-on.jpeg)

With pickup off, that whole block disappears. No message, no gap, no broken layout. The buy buttons just sit there on their own.

![The same product page with local pickup switched off](/images/blog/shopify-local-pickup-on-off/06-product-page-pickup-off.jpeg)

**At checkout.** With pickup on, the Delivery section has two tabs: Ship and Pickup. The customer chooses.

![Checkout showing the Ship and Pickup tabs](/images/blog/shopify-local-pickup-on-off/07-checkout-pickup-on.jpeg)

With pickup off, the tabs are gone entirely. Checkout goes straight to the shipping address form, exactly as it would on a store that never offered collection.

![The same checkout with the Pickup tab gone](/images/blog/shopify-local-pickup-on-off/08-checkout-pickup-off.jpeg)

That is the full extent of it. No orphan wording anywhere else. I looked.

## Local delivery is a separate switch

The merchant wanted delivery running all year and pickup only sometimes. That works, because they are two different settings.

Look back at the Additional delivery methods card. Local delivery and Pickup in store are separate rows with separate states. Mine had delivery off and pickup on.

So switching pickup off does nothing to local delivery. Your radius, your postcodes, your minimum order, and your delivery fee all keep working. Customers who are inside your delivery zone still get the option.

Same the other way round. You can pause delivery for a holiday week and leave pickup running.

## What to check if it did not work

Four things go wrong, roughly in this order.

**You did not click Save.** The single most common one. The toggle moves before anything is saved. If you navigated away, Shopify would have warned you about unsaved changes, and it is easy to click through that.

**Another location still has pickup on.** This is the multi-location catch. Turning pickup off at your shop does nothing if your warehouse still offers it. Go back to the list of locations and check every row, not just the one you were thinking of.

**The customer's cart cannot be collected anywhere.** Pickup only appears for items a pickup location can actually supply. My test store had a second location still set to offer pickup. It had none of the item in stock, and the Pickup tab still vanished. That is normal.

**You are looking at a cached page.** Checkout updates immediately, but a product page can be cached for a moment. Hard refresh, or open the page in a private window.

## How to turn off in-store pickup on Shopify permanently

Exactly the same steps. There is no separate "delete" action and you do not need one.

Turn Location status off at every location and save. Pickup stops being offered anywhere. Your pickup time and your notification message stay stored against each location, unused, in case you ever want them back.

There is a bigger setting if you want the location to stop handling online orders entirely. Go to Settings, then Locations, and untick "Fulfil online orders from this location".

That one affects your stock and your order routing. Only use it if that is really what you want.

## How to change your local pickup address

The pickup address is just the location's address. You do not change it on the pickup screen.

Go to Settings, then Locations, open the location, and edit the address there. The new address flows through everywhere. The pickup option at checkout, the "View store information" panel, and the customer's confirmation email.

Give it a real street address. A location with a half-filled address can fail to show as a pickup option at all.

## How to change a local pickup order to shipping

You cannot flip the delivery method on an order that is already placed. Shopify treats pickup and shipping as different fulfilment routes, chosen at checkout.

Your options are to cancel and refund the order, then have the customer re-order with shipping, or to fulfil it manually and post it yourself, adding the tracking number to the fulfilment.

For a one-off, the second option is usually kinder to the customer.

## How to see your local pickup orders

Go to Orders and filter. Local pickup orders carry a pickup delivery method, so you can filter the order list by delivery method and save that view.

Give the saved view a name like "To collect" and it stays in your Orders tab. During a busy holiday week that is much faster than scanning every order.

Each pickup order also moves through its own statuses: ready for pickup, then picked up. Marking an order ready for pickup is what sends the notification message you set in Step 3.

## Is click and collect the same as local pickup?

Yes. Click and collect is the common name for it in the UK, Ireland, Australia and New Zealand. In the US the same thing is usually called buy online, pick up in store, or BOPIS.

Shopify calls the feature local pickup, and now labels the setting "Pickup in store". If you searched for a click and collect app and could not find a good free one, this is why. The feature you want is already in your settings.

## When an app is genuinely worth it

Everything above is free, so be clear about what you are buying if you do install something.

The built-in pickup has **no calendar**. That is the real limit.

Customers cannot choose a pickup date. They cannot choose a time slot. And Shopify will not switch pickup on by itself when a date arrives. Somebody has to open the settings and flip the toggle.

For the merchant who asked, that is fine. A few holidays a year is a few switch flips a year.

It stops being fine in three cases. You offer pickup on fixed days each week. You need collection slots so people do not all arrive at once. Or you have blackout dates.

Then you want a pickup scheduling app. The well-known ones are Zapiet - Pickup + Delivery, Pickup Delivery Date Pickeasy, and Bird Pickup Delivery Date. All three add a date and time picker at checkout. You open pickup only on the dates you choose.

Pick an app for the calendar. Do not pick one just to get an on and off switch, because you already have that.

## Local pickup, local delivery and pickup points

These three sit next to each other in the admin and get mixed up constantly.

- **Local pickup** means the customer comes to your location and collects. Free. Set per location.
- **Local delivery** means you or your driver deliver to addresses near a location. You set a radius or a list of postcodes. You can add a delivery fee and a minimum order. Free. Also set per location.
- **Pickup points** means a carrier's network of parcel shops and lockers. Your customer collects from a shop that is not yours. This one needs a carrier or app that supports it.

Most small merchants want the first two. Some merchants also want certain products to be collectable but never shippable. That is a different setup, and I wrote it up in [how to make a product pickup only on Shopify](/blog/how-to-make-product-pickup-only-shopify).

## The short version

Local pickup is a per-location toggle at Settings, then Shipping and delivery, then Pickup in store.

Flip Location status and click Save. Off removes the Pickup tab at checkout and the pickup line on your product pages. On brings them back with all your settings intact.

Do it for every location you do not want offering collection. Leave local delivery alone and it keeps running all year.

The only reason to pay for an app is a pickup calendar, and only if you actually need one.


---

---
title: "Shopify Managed Markets: Shipping Not Available Fix"
description: Your overseas customers reach checkout and see Shipping not available, while your own shipping rates look correct. If the product is made by a print on demand app, Managed Markets is the reason. Here is how to confirm it and switch it off for that market.
---

## The problem

A customer in Australia adds three items to the cart, fills in a real address, and the Shipping method section says **Shipping not available**. Domestic orders quote a price without any trouble.

You check your shipping settings and they look right. The zone covers Australia. The rates are active. The product has a weight on it. Nothing explains the error.

I hit this while answering a merchant on the Shopify Community. They sell wall calendars printed and posted by Gelato, a print on demand app, and every Australian and New Zealand checkout ended the same way.

![Checkout shows Global-e as merchant of record, then Shipping not available](/images/blog/shopify-managed-markets-shipping-not-available/01-checkout-shipping-not-available-global-e.png)

The cause was not in the shipping settings at all.

## Why it happens

Two things have to be true at once.

**One: your overseas market is running Shopify Managed Markets.** Managed Markets is Shopify's paid international service, previously called Markets Pro. It hands your overseas orders to a company called Global-e, which becomes the merchant of record, collects duties and import tax up front, and arranges the carrier. In exchange, Global-e decides which products it will and will not ship.

**Two: the product is fulfilled from an app location.** A fulfillment location is the place Shopify thinks the item ships from. Most stores have one or two real ones, a warehouse or a shop. When you install a print on demand app like Gelato, Printful or Printify, the app adds a location of its own, and Shopify labels it **App**.

Managed Markets will not ship those. Shopify's own documentation says it in one line:

> Managed Markets doesn't support products that are fulfilled from app locations or custom fulfillment locations. These locations are commonly used by dropshipping or print-on-demand apps.

You can still sell the same product at home. Only the Managed Markets countries are closed off.

This is easy to miss because Shopify lets you switch Managed Markets on anyway. Stores with app locations became eligible for the service in April 2023, but the products stocked at those locations were excluded from international fulfillment at the same time. The store qualifies. The calendar does not.

So at checkout Managed Markets is asked for a rate, it has nothing to offer for that item, and your own rates are never consulted. The customer sees Shipping not available.

## Confirm it in two places before you change anything

Both checks take under a minute.

**At checkout.** Look at the small print above the contact fields. If it reads *"you agree to purchase from Global-e as the merchant of record"*, Managed Markets is running that checkout. A normal Shopify checkout names your store, not Global-e.

**In the admin.** Go to **Markets** and open the market that covers the failing countries. A store on Managed Markets shows a card headed **Shopify Managed Markets**, with a row called **Product eligibility** reading something like *8 of 25 supported*. Click into it and hover **Details** on any unsupported product to see the reason. The merchant I was helping had 25 products and 17 of them were unsupported, all of them Gelato items.

While you are in the shipping profile, look at the **Fulfillment location** box at the top. If the only location listed is the app's name with **App** underneath it, that is the location Managed Markets refuses.

![Gelato app fulfillment location and the Australia only shipping zone](/images/blog/shopify-managed-markets-shipping-not-available/05-app-fulfillment-location-and-zone.png)

## The fix: turn Managed Markets off for that market

Managed Markets is switched on per market, so you only turn it off where the print on demand products are sold.

1. Go to **Markets** in the admin.
2. Open the market that covers the failing countries.
3. Find the **Shopify Managed Markets** card.
4. Switch the toggle off.

![Turn off the Shopify Managed Markets toggle on the AUS NZ market](/images/blog/shopify-managed-markets-shipping-not-available/02-turn-off-shopify-managed-markets-toggle.png)

The market itself stays active. Only the Managed Markets layer is removed. Your own shipping profile, with its zones and rates, starts answering those checkouts straight away.

## What you give up by switching it off

Managed Markets is doing real work, so be clear about what leaves with it.

- **Merchant of record.** Global-e was the seller of record for those orders. That returns to you, and so does the responsibility for any import registration your buyer's country expects.
- **Prepaid duties and import tax.** Managed Markets collects them at checkout so the parcel is not held for payment on arrival. Without it, the customer may be billed by the carrier before delivery.
- **Global-e shipping labels and rates.** You go back to your own rates and your own labels, or the app's.

For a print on demand store this is usually the right swap, because Gelato and Printful print in the destination region. A calendar ordered in Sydney is printed in Australia, so it never crosses a border and there are no duties to collect. Check where your app prints before you assume that applies to you.

## Then check your default package weight

Once the rates start being used, a second cause of the same error shows up.

Shopify adds the weight of your **store default package** to the cart before it decides which weight based rate applies. A weight based rate is one you set as a range, such as *0.5 lb to 1.01 lb costs \$8.00*. Shopify's own name for that rate type is **Package weight**, which is the clue.

Every store starts with a default package called **Shipping box 12 x 10 x 8**, and it weighs **0.75 lb**. If you never changed it, three quarters of a pound is being added to every cart you quote.

I tested this on a dev store set up the same way as the merchant's: one app fulfillment location, one calendar weighing 222 g, and weight rates running from 0.5-1.01 lb up to 2.49-2.97 lb.

- 222 g is **0.489 lb**, which should match the \$8.00 rate.
- With the 0.75 lb default box added it becomes **1.239 lb**, and Shopify returned the **\$11.00** rate instead.
- To be certain of the arithmetic I added a throwaway rate covering 1.23 lb to 1.25 lb. The single calendar matched it. A second throwaway rate covering 0.48 lb to 0.50 lb, which is the calendar's real weight, matched nothing.

So the cart is being weighed as the product plus the box. Fix it here:

1. **Settings > Shipping and delivery**.
2. Open **Packages**.
3. Edit the one marked **Store default**.
4. Set its weight to the mailer or box you actually post a calendar in.

![Store default package weight in Settings Shipping and delivery Packages](/images/blog/shopify-managed-markets-shipping-not-available/03-store-default-package-weight-settings.png)

There is more on how that setting interacts with per product packages in [Shopify shipping rates wrong for multiple items](/blog/shopify-shipping-rates-multiple-items).

## Clear the maximum on your heaviest rate

Weight based rates only apply inside the range you gave them. If the cart weighs more than your highest maximum, no rate matches and the customer sees Shipping not available again.

The merchant's heaviest rate stopped at **2.97 lb**. With the 0.75 lb box included, five calendars come to 3.20 lb, so a five calendar order returned nothing at all.

Open the heaviest rate and delete the value in **Maximum**. An empty maximum means no ceiling, and every heavier order falls into that rate.

![Clear the Maximum on the heaviest weight rate](/images/blog/shopify-managed-markets-shipping-not-available/04-clear-maximum-on-weight-rate.png)

Check the joins between your ranges too. A set that runs 0.5-1.01, then 1.02-1.5, leaves a sliver between 1.01 and 1.02 that belongs to neither. Make each range start where the last one ended.

## Add every country you sell to into a zone

A shipping zone is the list of countries one set of rates applies to. Rates only work for countries that are actually in a zone in **that** profile.

The merchant's profile had a single zone called **AU Zone** containing Australia only, while the market sold to Australia and New Zealand. Even with Managed Markets off, New Zealand orders would still have failed.

Open the profile, click the **...** menu on the zone, and add the missing countries. Give a country its own zone if its prices differ.

## Can I keep Managed Markets for the products it does support?

Yes, and this is worth thinking about if only part of your catalog is print on demand.

Managed Markets is set per market, not per product, so you cannot keep it for eight products and drop it for seventeen inside one market. What you can do is split the market. Create one market for the countries where your own stocked products sell, leave Managed Markets on there, and keep the print on demand countries in a market with it switched off.

That does mean two sets of shipping rates to maintain. For most small stores, switching Managed Markets off entirely is less work than running both.

## If the rate still does not appear

Work down this list. Each one produces the same Shipping not available message.

- **The country is not in a zone** in the profile that holds the product. Products in a custom profile ignore the General profile's zones.
- **The fulfillment location is not in the profile.** A profile quotes from the locations listed in its Fulfillment location box. If the app location was removed, nothing can ship.
- **The cart weight is outside every range**, once the default package weight is added.
- **The rate is switched off.** Rates can be deactivated without being deleted.
- **The product has no weight.** A variant left at 0 still matches ranges, but your prices will be wrong.
- **The market is inactive.** An inactive market cannot check out at all.
- **The app has region limits of its own.** Gelato, Printful and Printify each publish the countries they print and post to. If the destination is not on that list, no Shopify setting will help.

## Managed Markets, markets and shipping profiles: which does what

These three get blamed for each other constantly.

- **A market** decides which countries can check out, in what currency, at what prices. It does not create shipping rates.
- **A shipping profile** decides which products ship from which locations, to which zones, at which prices. This is where rates live.
- **Managed Markets** sits on top of a market and replaces the international parts of it: merchant of record, duties, carrier and rates. While it is on, your own rates are not used for its countries.

So when overseas checkout has no rate and domestic does, check Managed Markets before you touch a single rate.

## What to do

- Look at your checkout small print. Global-e as merchant of record means Managed Markets is on.
- Open **Markets**, check **Product eligibility**, and confirm the print on demand products are listed as unsupported.
- Switch the **Shopify Managed Markets** toggle off for that market.
- Set your **store default package** to the weight you really post in.
- Clear the **Maximum** on your heaviest weight rate.
- Put every country you sell to into a zone in the profile that holds the product.


---

---
title: "Shopify MCP: What Your Store Tells AI Agents"
description: Every Shopify store now publishes a second copy of your catalog for AI agents, and your robots.txt tells them to use it instead of your pages. Here is how to find it and check what it says.
---

## The problem

A merchant posted on the Shopify Community that AI assistants kept telling shoppers her product was out of stock. It was not out of stock. No variant was out of stock.

She went looking in her theme files and found the words "out of stock" sitting in the code. That looked like the answer. It was not.

I get why she landed there. It is the only thing you can see.

But it sends you the wrong way. Five people in that thread told her to check her structured data. None of them said where the model was actually reading from.

So I measured it on a real Shopify store. The answer turned out to be somewhere most merchants do not know exists.

## Your theme always contains the words "out of stock"

Start here, because it saves you hours.

I took a product page on a live store. The product was in stock. Its only variant was in stock. The buy button worked.

That page still contained the words "Sold out" twice and "Unavailable" six times.

Every Shopify theme carries that wording. It has to. The theme needs those strings ready so it can show them the moment something does sell out. They sit in the page doing nothing until they are needed.

So finding "out of stock" in your theme proves nothing at all. It is there on every healthy store on the platform.

## AI crawlers get exactly the same page you get

The next theory people reach for is that crawlers see a different version of the site. They do not.

I requested one in-stock product page five times. The only thing I changed was which client I claimed to be.

![The same Shopify product page requested as Chrome, GPTBot, OAI-SearchBot, ClaudeBot and PerplexityBot, all returning identical HTML with one Product block and InStock](/images/blog/shopify-mcp-ai-agents/01-crawler-user-agent-test.png)

Chrome, GPTBot, OAI-SearchBot, ClaudeBot and PerplexityBot all received the same thing. Same byte count. One Product block. The same availability value, reading InStock.

Two useful things follow from that.

You do not need special tooling to check your own page. View source in your normal browser shows what a crawler receives.

And there is no hidden crawler version of your store to hunt down. If your page says InStock, it says InStock to every reader, human or model.

## What is Shopify MCP?

Here is the part that changes the question.

MCP stands for Model Context Protocol. It is a shared standard for how AI systems ask software for data. Google, Microsoft, OpenAI and Shopify have all adopted it.

**Every Shopify store already has an MCP endpoint.** You did not install it and you cannot see it in your admin. It is on right now, on your store, at this address:

```
https://yourstore.com/api/ucp/mcp
```

That endpoint hands AI agents your catalog directly. It offers tools with names like `search_catalog`, `lookup_catalog` and `get_product`. An agent can ask it for a product and get structured data back, without ever loading your product page.

So your stock level is published in two places. Your HTML is one. This is the other.

## Your robots.txt tells agents to prefer it

This is the bit worth seeing for yourself. Open this in a browser tab:

```
https://yourstore.com/robots.txt
```

![A Shopify robots.txt showing agent instructions pointing at agents.md, the UCP discovery file and the UCP/MCP endpoint](/images/blog/shopify-mcp-ai-agents/02-shopify-robots-txt-agent-instructions.png)

Above the usual crawler rules, Shopify now writes instructions aimed at AI agents. They point at three things:

- `agents.md`, a plain-language instruction file for agents
- `/.well-known/ucp`, a discovery file that describes what your store supports
- `/api/ucp/mcp`, the endpoint above

And then a line that matters more than the other three put together:

> Agents should use UCP/MCP for catalog, cart, and checkout.

Your own site is telling AI agents not to read your pages for product data. It is telling them to use the endpoint instead.

That reframes the whole problem. "The model read my theme code and got confused" may simply not be what happened.

## What to do when the schema is already correct

Work through these in order.

**Check the one line that counts.** Open your product page, press Ctrl+U for view source, then Ctrl+F and search for `availability`. You want one result, and it should say InStock.

**Count the Product blocks.** Search view source for `"@type":"Product"`. You want exactly one. If you find two, an SEO app or a review app is adding its own, and the two can disagree. Turn the app's structured data off rather than editing your theme.

**Confirm the product is published to the Online Store sales channel.** That channel is what feeds both your product page and the agent endpoint. A product unpublished from it goes missing from both.

**Ask the model what it actually looked at.** Ask for the exact URL and the date it fetched. This is the step people skip, and it resolves most of these cases. A cached answer from three weeks ago is not something you can fix by editing your theme today.

**Check it is quoting you at all.** Marketplace and reseller listings of the same product get pulled into answers constantly. Those listings genuinely are out of stock. The model is right, it is just not talking about your store.

## Does Shopify have an llms.txt file?

This comes up a lot, so it is worth being precise.

`llms.txt` is a proposed standard. The idea is a plain-text file at the root of a site that tells language models what the site is and where the good content lives. Think of it as a sitemap written for a reader rather than a crawler.

Shopify does not generate one for you. What Shopify generates is the agent block in your `robots.txt`, plus `agents.md` and the UCP discovery file described above.

Apps exist that will write an `llms.txt` and an `agents.md` for you. Before you buy one, open your `robots.txt` and see what your store already publishes. On most stores the answer is more than the owner expects.

## What structured data does Shopify output?

Your theme outputs JSON-LD on product pages. That is a block of machine-readable data describing the product: its name, its price, its availability.

The availability value is the one that matters here. It reads either `https://schema.org/InStock` or `https://schema.org/OutOfStock`, and it is generated from your real inventory, not from the words in your template.

Two things go wrong with it in practice.

The value can be stale, usually because an app is caching it.

Or there can be more than one block, because your theme writes one and an app writes another. When two blocks disagree, whatever reads the page has to pick, and it may not pick the one you want.

Both of those you can see from view source in under a minute.

## Sold out, unavailable and out of stock are three different things

Merchants use these interchangeably. Shopify does not, and the distinction explains some odd behaviour.

**Sold out** means inventory reached zero and you are tracking inventory. The variant still exists and can come back.

**Unavailable** usually means the variant combination does not exist at all. Pick a size and a colour that were never made together and the theme shows unavailable.

**Continue selling when out of stock** is a per-variant setting. Turn it on and a variant at zero inventory still sells. Your page will not say sold out, even though the number is zero.

That last one is worth checking if your page and your inventory seem to disagree.

## Can I stop AI agents reading my catalog?

You can, and it is worth thinking about before you do.

The agent instructions live in your `robots.txt`, and Shopify writes that block for you. On the paid plans you can edit `robots.txt` through a theme file called `robots.txt.liquid`, which lets you add rules for named crawlers.

Blocking has a real cost though. AI assistants are increasingly how people find products. Turning them away is closer to removing yourself from a search engine than to closing a security hole.

There is also a middle option most people miss. Shopify's own agent instructions already draw a line: agents may read your catalog and build a cart, but the file states plainly that checkout is for humans and that payment needs a person to approve it. So the risky part is already fenced off without you doing anything.

My advice for most stores is to leave it on and make sure the data is right. An agent that reads your catalog correctly is a sales channel. An agent working from a two-week-old cached page is the actual problem, and blocking it makes that worse rather than better.

## How often does the endpoint update?

The endpoint reads your live catalog, so it reflects inventory as it stands when the agent asks.

The delay is almost never on Shopify's side. It is on the model's. Assistants cache what they retrieve, and some answer from a search index that was built days or weeks ago.

That is why asking a model for its retrieval date is such a useful question. It separates a data problem, which you can fix, from a caching problem, which you mostly cannot.

## The short version

If an AI assistant is saying something wrong about your stock, do not start in your theme files.

The sold-out wording in your theme is inert and lives on every store. Crawlers receive the same HTML you do. Your real availability is one line in your structured data, and it should appear exactly once.

And if that line is already correct, the problem is not your markup. Your store publishes a second copy of your catalog at `/api/ucp/mcp`. Your own `robots.txt` tells agents to read that one instead. That, or the model is answering from a cached copy it fetched weeks ago.

Neither of those gets fixed by adding more schema.


---

---
title: "Shopify Mega Menu: How to Change the Dropdown Width"
description: Horizon's dropdown spans the whole page because the submenu is absolutely positioned at 100% width. Here is the CSS that pins it under its own menu item, desktop only.
---

## The problem: a dropdown with five links spanning the whole screen

Your menu has a Home item with five links under it. On desktop the dropdown opens and stretches edge to edge, leaving a huge empty panel with a thin column of text on the left.

It looks broken. It is not broken, it is doing exactly what the theme's CSS says.

A merchant on the Horizon theme asked how to narrow it and got several rounds of CSS in the thread, none of which changed anything. That is worth paying attention to, because the reason they failed is the interesting part.

I identified the theme from the store's source, installed Horizon on a development store, reproduced the full-width dropdown, and measured the fix. The panel went from **1270px wide to 190px**.

![A compact dropdown pinned under its own menu item](/images/blog/shopify-mega-menu-width/01-compact-dropdown-after-fix.jpeg)

## Why the dropdown is full width

Horizon styles the submenu panel roughly like this:

```css
.menu-list__submenu {
  position: absolute;
  width: 100%;
  left: 0;
}
```

Three declarations, and together they guarantee a full-bleed panel.

`position: absolute` positions the panel against its nearest **positioned ancestor**. In Horizon that is not the menu item. The `<li>` has no `position` set, so the browser walks up until it finds something that does, which is the header or the page itself.

`width: 100%` then means 100% of that ancestor, so the header's width.

`left: 0` pins it to that ancestor's left edge, not the menu item's.

This is deliberate. A mega menu with four columns of category links **should** span the header. The design assumes a large menu. When your menu has five links, the assumption is wrong and you get a mostly empty panel.

## Why the usual CSS advice does not work

The thread tried several fixes that look reasonable and do nothing. Each failure is informative.

**Setting `max-width` on `.mega-menu__content`.** Wrong element. That is inside the panel. Constraining the content leaves the panel itself full width, so you narrow the text and keep the giant empty box.

**Setting `width` on `.menu-list__submenu` alone.** Closer, and it does shrink the panel. But without a positioned ancestor the panel is still anchored to `left: 0` of the header, so a narrow panel sits at the far left of the page regardless of which menu item you hovered. Better and still wrong.

**`transform: translateX(-50%)` to centre it.** Centres it under the header, not under the menu item, for the same reason.

The missing piece in all three: **you have to give the `<li>` a `position` first.** Until the menu item is itself a positioned element, `absolute` on the panel cannot reference it. Every width and offset you set is measured against the wrong box.

That single line is what the other answers were missing, which is why more `!important` did not help.

## The fix

**Online Store > Themes > ... > Edit code**, open `assets/base.css`, and paste at the very bottom:

```css
/* Compact desktop mega-menu dropdown (Horizon).
   Desktop only - the mobile drawer is untouched. */
@media screen and (min-width: 990px) {
  /* Anchor each dropdown to its own menu item. */
  .menu-list__list-item {
    position: relative;
  }

  /* Shrink the panel from full-width to a dropdown under the item. */
  .menu-list__list-item:not([slot='overflow']) > .menu-list__submenu {
    width: max-content !important;
    max-width: min(90vw, 320px) !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    padding-inline: 0 !important;
    clip-path: none !important;
  }

  /* Size the content to itself and stack the links vertically. */
  .menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .mega-menu,
  .menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .mega-menu__grid {
    width: 100% !important;
  }

  .menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .mega-menu__grid {
    display: block !important;
  }

  .menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .mega-menu__link {
    display: block !important;
  }

  /* Give it a proper dropdown-card look. */
  .menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .menu-list__submenu-inner {
    transform: none !important;
    padding: 14px 22px !important;
    background: var(--color-background, #fff);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(var(--color-foreground-rgb) / 0.14);
  }
}
```

Save. The dropdown now opens directly under its own menu item at the width of its longest link, capped at 320px.

### The parts that are doing the work

**`position: relative` on the list item.** The line everything else depends on. Now `absolute` resolves against the menu item.

**`width: max-content` with `max-width: min(90vw, 320px)`.** The panel sizes to its longest link rather than to a number you guessed. The cap stops a long category name producing an awkward wide panel, and `90vw` keeps it on screen at smaller desktop widths.

**`top: 100%`** puts the panel immediately below the item rather than wherever the header had placed it.

**`clip-path: none`.** This one is easy to miss and it is why a compact panel can look truncated. Newer Shopify themes animate the reveal with `clip-path` rather than height, and that clip is sized for a full-width panel. Shrink the panel and the clip can cut off your content. Neutralising it lets the smaller panel show fully.

**`display: block` on the grid and links.** The mega menu grid is built for columns. With five links you want one vertical list, so the grid becomes a block and the links stack.

**`:not([slot='overflow'])`.** Horizon moves menu items that do not fit into an overflow slot with its own positioning. Excluding it leaves that behaviour alone.

### Why so many `!important`

Not laziness. Horizon sets several of these from inline styles and CSS custom properties that the theme's own JavaScript updates on hover. A plain rule at the bottom of `base.css` loses to an inline style regardless of specificity. `!important` on the properties the reveal animation touches is what makes the override stick.

## Adjusting it

**Change the width.** Edit `320px` in the `max-width` line. That is the only number you need for a wider or narrower dropdown.

**Centre it under the item instead of left-aligning.** Replace `left: 0` with:

```css
left: 50% !important;
transform: translateX(-50%) !important;
```

This works here, unlike in the thread, because the item is now positioned.

**Right-align items near the end of the menu.** A dropdown on the last item can run off screen. Target that item and swap the offsets:

```css
.menu-list__list-item:last-child > .menu-list__submenu {
  left: auto !important;
  right: 0 !important;
}
```

**Keep one menu full width.** If a genuine mega menu should still span the header, exclude it by its position:

```css
.menu-list__list-item:nth-child(2) > .menu-list__submenu {
  width: 100% !important;
  max-width: none !important;
}
```

## Why the media query matters

Everything is inside `@media screen and (min-width: 990px)`.

Below that width Horizon does not use dropdowns at all. It uses a slide-in drawer, and the same class names appear in it. Apply these rules unconditionally and you will narrow the mobile drawer into a 320px box floating over the page.

If you test this, test it properly. Resizing your browser window is not the same as a mobile viewport, and browser device emulation is the reliable check. This is a common way to ship a menu that looks right on your laptop and is unusable on a phone.

## If the CSS did nothing

This is where the original thread spent most of its time, so it is worth being systematic. Work down this list in order.

**You edited the wrong file.** Some themes load `assets/theme.css`, some `assets/base.css`, and some ship a `custom.css` that is only included if the theme calls it. Open your site, view source, and check which stylesheet actually loads. Pasting into a file the theme never requests is the single most common cause of "nothing happened."

**Use Custom CSS instead and skip the question.** Horizon and Dawn both have **Theme editor > Theme settings > Custom CSS**. Anything there is guaranteed to load and it survives theme updates, unlike edits to `base.css`. For a change this size it is the better home. The only reason this article says `base.css` is that it is where the original answer put it.

**You are looking at a cached stylesheet.** Shopify serves CSS from its CDN with long cache headers. Hard reload, or check in a private window. If the storefront and the theme preview disagree, this is why.

**You edited a different theme.** Easy to do with two or three copies in the theme list. Confirm the theme you edited is the one that is published, or preview the exact theme you changed.

**The class names do not match your theme.** These are Horizon's. If you are on Impulse, Prestige, Empire or anything from the Theme Store beyond Dawn and Horizon, inspect your own dropdown and substitute the real class names. The four-step approach at the end of the Dawn section still applies.

**A parent has `overflow: hidden`.** If the panel is narrow but clipped rather than full width, something above it is cutting it off. Inspect the ancestors of the submenu and look for `overflow` on the header or its rows.

The fastest way to tell these apart: open devtools, inspect the submenu panel, and look at the Styles pane. If your rule appears and is struck through, it is a specificity or `!important` problem. If it does not appear at all, the file is not loading and none of the CSS is the issue.

## Doing this on Dawn

The mechanism is the same. The class names differ.

Dawn's dropdown lives in `.header__submenu` inside `details-disclosure`, and Dawn's mega menu is `.mega-menu__content`. Dawn already positions the parent, so you often get away with fewer rules:

```css
@media screen and (min-width: 990px) {
  .header__inline-menu .mega-menu__content {
    width: max-content;
    max-width: min(90vw, 320px);
    left: 0;
    right: auto;
  }
}
```

Dawn also does not use `clip-path` for the reveal, so that line is unnecessary there.

The general approach transfers to any theme:

1. Inspect the dropdown panel and find which element is actually full width.
2. Check whether its **parent is positioned**. Usually it is not, and that is the bug.
3. Set `position: relative` on the parent, then constrain the panel.
4. Wrap it in a desktop media query.

## A note on mega menus generally

If you are here because you want to build one rather than shrink one, the short version for Online Store 2.0 themes:

A Shopify mega menu is driven by your **navigation**, not by a separate builder. In **Content > Menus**, a menu item with children renders as a dropdown. A child item that itself has children triggers the multi-column mega menu layout in themes that support it.

So the number of nesting levels in your menu decides which layout you get. One level of children gives a simple dropdown. Two levels gives the full-width mega menu, which is exactly how the full-bleed panel in this article appears in the first place.

Themes vary in how far they take this. Horizon and Dawn both support two levels. Images in menus, promotional blocks and featured products generally need an app or theme code, which is what mega menu apps mostly sell.

If your dropdown is too wide, check your **menu depth** before writing any CSS. A menu accidentally nested two levels deep will render as a mega menu when you wanted a plain dropdown, and fixing the menu structure is better than overriding the styling of a layout you did not want.

## What changed

On the test store, with Horizon and a five-link menu:

- **Before:** the panel measured 1270px wide, anchored to the header's left edge, with content in a narrow strip.
- **After:** 190px, pinned under its own menu item, links stacked, with a card border and shadow.

The one thing worth carrying to any theme: an absolutely positioned dropdown that ignores your width is almost always positioned against the wrong ancestor. Fix `position` on the parent first, and the width rules you already tried will start working.


---

---
title: Work Around Shopify's Metafield Source Limit
description: Hit the dynamic-source cap in the Shopify theme editor? Render your metafields with a Custom Liquid section instead, with no per-template limit.
---

## The problem

A merchant asked about this on the Shopify Community. They were rebuilding a camera store onto a new Online Store 2.0 theme called Surveillance (an Electro-family theme). They had 40+ camera models, each with a lot of detailed, model-specific text.

They did everything right. They set up product metafields to hold all that detail. A metafield is just an extra custom field on a product, like "Night vision range" or "Weatherproof rating", that Shopify does not give you by default.

Then they wired those fields into the product page one by one, using the theme editor. And they hit a wall.

Two walls, actually. First they maxed out the metafields on the product. Then they hit the Shopify dynamic source limit of 100 when connecting the metafields to the theme. The 101st connection simply would not save.

Their real worry was SEO. They needed unique, model-specific text on every product for search and AI answer engines (what they called GEO/AEO/SEO). They did not want to strip that detail out just to fit under a limit.

So they asked for an expert who knew the Surveillance theme.

I reproduced the whole thing on a test store on the Surveillance (Electro) theme. The good news: this is not a Surveillance bug, and your metafields are fine. You have hit a theme-editor limit, and there is a clean way around it that keeps every word of your custom text.

## Why it happens

This is the part most forum answers skip, so let me explain the mechanism.

There are two different limits here, and it helps to keep them apart.

**Limit one: how many metafield definitions a product can have.** Shopify caps the number of metafield definitions you can create. If you make a separate field for every tiny spec, you burn through that budget fast. This is the "too many metafields" side.

**Limit two: dynamic sources in the theme editor.** This is the one that stopped the merchant cold. A dynamic source is the little "Insert dynamic source" or "Connect dynamic source" link you click in the theme editor to point a text block at a metafield instead of typing text. It looks like a small database icon next to a field.

Each time you click that icon and connect a metafield, that is one dynamic source. The theme editor allows only 100 dynamic sources per template, and 50 per static section. Wire 100 fields by hand and the 101st connection is blocked.

So the shopify metafield dynamic source workflow does not scale. It is fine for a handful of fields. It falls apart at 40 models with rich specs each.

Here is the important insight: **the 100 limit is a theme-editor limit, not a limit on your data.** Your metafields still exist. Your text is still saved. The only thing that ran out is the number of times you can point-and-click a connection in the editor.

That means the fix is to stop connecting fields through the editor at all. Read them straight from code instead.

## The fix: one Custom Liquid section

The trick is to print every field with a single Custom Liquid section.

Custom Liquid is a section (and block) that Shopify ships in almost every 2.0 theme. It lets you paste your own Liquid and HTML. Liquid is Shopify's templating language; it can read your product metafields directly. And code that reads a metafield does not count as a dynamic source. So there is no 100 limit on it.

One section can print as many fields as you want. Your per-product text stays exactly where it is, still editable per model in the admin. You are only changing where the theme reads the data from.

**Step 1: add one Custom Liquid section**

- Go to Online Store, then Themes, then Customize on your Surveillance theme.
- Open a product template. Under Template on the left, click Add section.
- Choose Custom liquid.

![Adding a Custom Liquid section to a Shopify product template in the theme editor](/images/blog/shopify-metafield-dynamic-source-limit/01-add-custom-liquid-section.jpeg)

**Step 2: paste code that prints your fields**

Put your fields in the Liquid box. Swap `specs` for your own namespace (the group your metafields live in) and swap the keys for your own field names:

```liquid
{%- assign s = product.metafields.specs -%}
<div class="spec-sheet">
  {% if s.resolution != blank %}<p><strong>Resolution:</strong> {{ s.resolution }}</p>{% endif %}
  {% if s.field_of_view != blank %}<p><strong>Field of view:</strong> {{ s.field_of_view }}</p>{% endif %}
  {% if s.night_vision != blank %}<p><strong>Night vision:</strong> {{ s.night_vision }}</p>{% endif %}
</div>
```

Add one line per field. Then Save.

The `if blank` check is the part that makes this scale. It says: only print this row if the product actually has a value for it. So a model that has no night-vision spec just skips that line. The exact same section works for all 40+ models with no edits. Each product shows only its own fields.

![One Custom Liquid section printing every product metafield with no dynamic sources used](/images/blog/shopify-metafield-dynamic-source-limit/02-metafields-rendered-one-section.png)

That one section replaces every dynamic source you were wiring by hand.

I tested this on the Surveillance theme. Seven camera specs plus a custom overview paragraph all rendered from metafields through one Custom Liquid section, with zero dynamic sources used. The dynamic-source count went from full back to empty.

## You do not have to redesign your page

The merchant had a real follow-up worry. They had built their page out of existing blocks and sections (from the theme and the section store), including a Collapsible content block. The page had taken a long time to build. Would this force a redesign?

No. Custom Liquid is additive. You keep every section and block you already built. You are only changing where the data comes from, not your layout.

For most stores, one move fixes it: drop a single Custom Liquid section wherever the detailed content sits, and move the bulk of your fields into it. That reads its metafields in code with no dynamic-source limit, which frees up your count. Your other blocks keep working, untouched. For most stores, that one change alone gets you back under 100.

One honest limitation: you cannot paste Liquid inside a Collapsible content row itself. That row field only accepts typed text or one connected metafield. So you have two choices.

- Leave those few collapsible rows as they are. They cost you a tiny slice of your 100.
- Or, if the collapsible rows are what is eating your 100, rebuild that one accordion in Custom Liquid.

The rebuild uses the browser's native collapsible element (the HTML `<details>` tag), so it looks and behaves the same: click a heading, it opens. But it pulls unlimited metafields.

I tested that too on Surveillance: a two-row accordion, every value coming from metafields, zero dynamic sources.

![A native details accordion on a Shopify product page built entirely from metafields](/images/blog/shopify-metafield-dynamic-source-limit/03-native-accordion-from-metafields.png)

## An alternative: consolidate with a Metaobject

The Custom Liquid section fixes the display limit. If you also ran out of metafield definitions on the product itself, there is a second move: a Metaobject.

A Metaobject is a custom data type you define once, with its own set of fields. Think of it as a reusable mini-record. You build one "Camera specs" metaobject definition with fields like resolution, field of view, night vision, and so on. Then each product points to a metaobject entry through a single metafield.

The win is the count. Instead of 15 separate metafields on the product, you have one metafield that references a metaobject holding all 15 fields. Many fields, one definition, still editable per product.

To set it up: go to Settings, then Custom data, then Metaobjects, and add a definition. Then add a single product metafield of type "Metaobject" that references it.

You still print it with the same Custom Liquid approach. You just walk one level deeper to reach the values. This shopify metaobject metafields pattern is the cleanest way to model repeated, structured specs across many similar products.

So the two moves stack:

- Custom Liquid section: removes the shopify dynamic source limit on display.
- Metaobject: removes the pressure on how many metafields a product can hold.

## What counts against the Shopify dynamic source limit?

Anything you connect through the theme editor's "Connect dynamic source" icon counts. That includes a text block pointed at a metafield, a heading pointed at a metafield, an image or button linked to a metafield, and each connected field inside a block.

What does not count: anything you read in code. A Custom Liquid section that references `product.metafields.namespace.key` is invisible to that counter. This is exactly why moving your fields into code resets your budget.

The numbers to remember: 100 dynamic sources per template, 50 per static section.

## Does removing dynamic sources hurt SEO?

No, and this was the merchant's main fear. It is worth being clear.

Your text still lives in metafields. The Custom Liquid section prints that text into the real page HTML that search engines and AI answer engines read. Unique, model-specific copy stays unique and model-specific.

If anything, this is better for SEO than making everything generic to stay under the limit. You keep every distinct spec on every model. You are just rendering it a different way.

If you want the specs to also power rich results, you can add JSON-LD structured data inside the same Custom Liquid section, built from the same metafields. One place, one source of truth.

## Is the 100 limit a Surveillance theme bug?

No. It is a Shopify theme-editor limit, and it is the same on Dawn, Horizon, Electro, Surveillance, and every other Online Store 2.0 theme. The merchant assumed the theme was broken because they hit the wall inside the Surveillance editor. The wall belongs to Shopify, not the theme. That also means the fix (Custom Liquid) works on any of these themes, since they all ship the Custom Liquid section.

## If it did not work

A few things to check if the section renders blank or wrong.

- **Nothing shows up.** Your namespace or key is wrong. Confirm the exact namespace and key in Settings, then Custom data, then the metafield definition. `product.metafields.specs.resolution` must match the definition exactly, and it is case sensitive.
- **Raw code shows on the page.** You pasted into a text block, not a Custom Liquid block. Liquid only runs inside a Custom Liquid section or block.
- **A value prints as `<p>...</p>` text.** The metafield is a rich text or multi-line type. Add `| metafield_tag` or output it as-is; rich text fields render their own HTML.
- **A metaobject field is blank.** You are one level too shallow. From the product you reach the entry first, then its fields: `product.metafields.custom.specs.value.resolution`.
- **The section shows on every product but one is empty.** That is the `if blank` check doing its job. That product has no value for that field. Add the value in the admin and it appears.
- **Save is greyed out.** Click into the Liquid box, press Space then Backspace to register a change, then Save.

## Definitions people confuse

A few terms get mixed up in these threads. Here is the plain-English version.

- **Metafield.** An extra custom field on a product, like "Warranty" or "Power". It holds one value per product.
- **Metafield definition.** The setup for that field: its name, its namespace, and its type. You create it once; every product can then fill it in.
- **Metaobject.** A custom data type with several fields grouped together, defined once and reused. Good for a full spec sheet.
- **Namespace and key.** The address of a metafield. Namespace is the group (`specs`), key is the field (`resolution`). Together they are how Liquid finds the value.
- **Dynamic source.** The point-and-click connection in the theme editor that links a block to a metafield. Capped at 100 per template. This is the one that runs out.
- **Custom Liquid.** A section or block where you paste your own Liquid and HTML. It reads metafields in code, so it ignores the dynamic-source cap.

Once you see that a dynamic source is a theme-editor connection and not the data itself, the whole problem gets smaller. The data was never the limit. The click-to-connect workflow was. Move the reading into a Custom Liquid section and the shopify metafield limit stops being your ceiling.


---

---
title: How to Show Metafields on a Shopify Product Page
description: How to turn Shopify product metafields into a clean specifications table on the product page, with each value linked to a filtered list. No app required. Tested on a Dawn store.
---

## The problem

A merchant asked about this on the Shopify Community. They sell fabric by the yard, and they shared a screenshot of a product page they liked.

Under the price was a neat table of details:

Designer, Manufacturer, Fabric type, Themes, Fabric width, Fiber content, Product type.

Every value was a link. Click "Rifle Paper Co." and you would see every fabric by that designer.

They wanted the same thing on their own store, built with metafields, so they would not have to type the details into the description of every single product.

I reproduced the whole setup on a Dawn store to find the cleanest way to do it. Here is what worked.

![Product metafields shown as a linked specifications table on a Shopify product page](/images/blog/shopify-metafields-product-page/01-spec-table-product-page.png)

## What a metafield actually is

Let me keep this in plain words, because the term scares people off.

A metafield is just an extra box on a product for a piece of information Shopify does not give you by default.

Shopify gives every product a title, a price, a description, and images. It does not give you a "Fabric width" box or a "Designer" box. A metafield is you adding that box yourself.

You create the box once. Then you fill it in on each product. Then you show it on the page.

That is the whole idea. Three steps: create, fill, show.

The reason to use metafields instead of typing everything into the description is control. The value lives in its own field, so you can display it in a tidy table, reuse it, and later make it filterable. A blob of text in the description can do none of that.

## Which theme this works on

I tested this on Dawn, which is Shopify's free default theme. The steps are the same on most modern themes, because they all support a Custom Liquid block.

If you are on an older or heavily customized theme and you cannot find a Custom Liquid block, the app route near the end of this post does the same job with no code.

## Step 1: Create the metafields

Go to Settings, then Custom data, then Metafields, then Products. Click Add definition.

Add one definition per row you want in the table. For a fabric shop that is:

- Designer
- Manufacturer
- Fabric type
- Fabric width
- Fiber content

Set the type of each one to Single line text.

One detail that trips people up: each definition has a Namespace and key, and you should set it deliberately. I used `fabric.designer`, `fabric.manufacturer`, `fabric.fabric_type`, `fabric.fabric_width`, and `fabric.fiber_content`. The code later has to match this exactly, so pick something clean and remember it.

![Creating one single line text metafield definition per column in Shopify settings](/images/blog/shopify-metafields-product-page/02-create-metafield-definitions.png)

While you are here, pin each definition. Pinning makes it show up on every product page in the admin, so you do not have to hunt for it when you fill in values.

## Step 2: Fill in the values

Open a product and scroll down to the Metafields section. If you pinned them, your new fields are right there.

Type the value for each one. Designer: Rifle Paper Co. Manufacturer: Cotton and Steel. Fabric type: Quilting Cotton. And so on.

![Filling in each metafield value on a Shopify product](/images/blog/shopify-metafields-product-page/03-fill-metafield-values.png)

You do this once per product. The values are now stored on the product, but nothing shows on the storefront yet. That is the next step.

## Step 3: Show the table on the product page

This is where the values become a visible table.

Go to Online Store, then Themes. On your theme, click the three dots, then Customize. Open a Product template.

In the left panel, find the Product information section and click Add block. Choose Custom Liquid. Drag it to sit under the Description.

Paste this into the Custom Liquid box and hit Save:

```liquid
{%- liquid
  assign ns = product.metafields.fabric
  assign rows = 'designer:Designer,manufacturer:Manufacturer,fabric_type:Fabric Type,fabric_width:Fabric Width,fiber_content:Fiber Content' | split: ','
  assign has_specs = false
  for row in rows
    assign key = row | split: ':' | first
    if ns[key].value != blank
      assign has_specs = true
      break
    endif
  endfor
-%}
{%- if has_specs -%}
<style>
  .fabric-specs{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:1.5rem}
  .fabric-specs tr{border-bottom:1px solid rgba(var(--color-foreground),0.1)}
  .fabric-specs th{text-align:left;font-weight:600;white-space:nowrap;padding:1rem 2rem 1rem 0;vertical-align:top}
  .fabric-specs td{padding:1rem 0;vertical-align:top}
  .fabric-specs a{color:rgb(var(--color-foreground));text-decoration:none}
  .fabric-specs a:hover{text-decoration:underline}
</style>
<table class="fabric-specs">
  {%- for row in rows -%}
    {%- assign parts = row | split: ':' -%}
    {%- assign key = parts[0] -%}
    {%- assign value = ns[key].value -%}
    {%- if value != blank -%}
      <tr>
        <th>{{ parts[1] }}</th>
        <td><a href="{{ routes.all_products_collection_url }}?filter.p.m.fabric.{{ key }}={{ value | url_encode }}">{{ value }}</a></td>
      </tr>
    {%- endif -%}
  {%- endfor -%}
</table>
{%- endif -%}
```

![Pasting the Custom Liquid block under the description in the Shopify theme editor](/images/blog/shopify-metafields-product-page/04-custom-liquid-block.png)

A few things worth knowing about this code, in plain terms.

The namespace in the code is `fabric`. That has to match the Namespace and key you set in Step 1. If you used a different namespace, change the word `fabric` to yours.

The block only draws a table when the product actually has these metafields. On a product with none of them, it shows nothing at all, so it is safe to leave on the shared product template.

The table renders under the description, exactly like the example. Each value is a link that points at a filtered list of your products. That link is the clever part, and it needs one more step to actually work.

## Step 4: Make each value clickable

Right now the values look like links but clicking them does nothing useful. Shopify ignores the filter link until you register the metafield as a filter.

You do that in a free Shopify app called Search & Discovery. It is made by Shopify and it is free to install.

Open Search & Discovery, go to Filters, click Add filter, and pick your metafield from the list. Do this for each one you want clickable: Designer, Manufacturer, Fabric type, and so on. Save each.

![Adding a metafield as a filter in the Shopify Search and Discovery app](/images/blog/shopify-metafields-product-page/05-add-search-discovery-filter.png)

Now the links work. On my test store, before I added the filter, clicking "Rifle Paper Co." showed all 32 products in the store. After I added it, the same click narrowed to exactly the three Rifle Paper Co. fabrics, with an active "Designer: Rifle Paper Co." tag at the top.

![Clicking a metafield value filters the Shopify collection down to matching products](/images/blog/shopify-metafields-product-page/06-filtered-collection.png)

That is the finished result. A clean spec table on every product, filled from metafields, where clicking any attribute shows every product that shares it.

## Prefer no code? Use an app

If you do not want to touch the theme code at all, apps do the same display job.

Accentuate Custom Fields and Easify Product Attributes both let you build a specifications table from custom fields and drop it on the product page without editing Liquid.

The one thing to keep is Step 4. Whichever route you take for the table, you still add the Search & Discovery filters if you want the values to be clickable and filterable.

## What are Shopify metafields used for?

Anything Shopify does not track by default. Common uses:

- Product specs like size, material, weight, or dimensions
- Care instructions or ingredient lists
- A "how to use" section
- Warranty length
- A designer, brand, or manufacturer name

Once the value is in a metafield, you can show it, reuse it, and filter by it. That is why merchants move details out of the description and into metafields as the store grows.

## Can you display metafields without code?

Partly. Some themes let you connect a metafield to a text block through the theme editor using a dynamic source, which needs no code.

But a full multi-row table, with each value linked to a filtered list, is cleaner with the small Custom Liquid block above, or with an app. The dynamic-source route is fine for one or two values, not a whole spec sheet.

## Metafield versus product option versus custom field

People mix these up, so here is the difference in one line each.

A product option is a choice that changes what the buyer gets, like Size or Color. It creates variants.

A metafield is extra information about the product that does not change the variant, like Fabric width or Designer. No variants.

"Custom field" is just the everyday name for a metafield. Some apps call them custom fields, Shopify calls them metafields. Same thing.

A metaobject is a step up: a reusable record, like a full Designer entry with its own logo and bio, that many products can point to. You only need metaobjects when a value has its own details worth storing once and sharing.

## What to check if it did not work

If the table does not appear or the links do nothing, it is almost always one of these.

The namespace does not match. The code says `fabric` but your definitions use `custom` or something else. Make them the same.

The metafields are empty on that product. The block hides itself when there are no values, so a blank product shows no table by design. Fill in at least one value.

The filter is not added. If the table shows but clicking a value shows every product, you skipped Step 4. Add the metafield as a filter in Search & Discovery.

The theme has no Custom Liquid block. Older themes may not offer one in the product section. Use the app route instead.

## The short version

Shopify does not give you a specs table, but you can build one from metafields in about ten minutes.

Create a metafield per row. Fill in the values on each product. Add a Custom Liquid block under the description to draw the table. Then add each metafield as a filter in the free Search & Discovery app so the values become clickable.

Tested on a Dawn store: the table renders under the description, and every value links to a filtered list of matching products.


---

---
title: "How to Set a Minimum Order on Shopify (Tested)"
description: "Shopify has no minimum order setting, and the one that looks like it only gates a discount. Here is a cart guard that blocks checkout below your minimum, tested on Dawn."
---

## The problem

You want a minimum order. Ten pounds, or five items, or whatever number makes an order worth packing.

You go looking for the setting. You find **Minimum purchase requirements** on the discount page, with radios for a minimum amount and a minimum quantity, and it looks exactly right.

It is not. Those radios decide when a **discount** applies. They have no effect on whether someone can check out.

**Shopify has no native minimum order setting.** That is the starting point, and it is why this question has been asked on the forums for years without a satisfying answer. Below is what the real options are and a free one that works today, tested on a live store.

## Why the discount setting is not the answer

It is worth being precise, because the mix-up costs people an afternoon.

On a discount, **Minimum purchase requirements** means "only give this discount when the cart is at least X". Under the minimum, the shopper still checks out. They just do not get the discount.

What you want is the opposite: under the minimum, the shopper cannot check out at all. Nothing on the discount page does that, because a discount is a reward, not a gate.

## The three real routes

**A Cart and Checkout Validation Function.** This is Shopify's proper answer. A Function runs server side and can block checkout. It cannot be bypassed. It needs an app, either one from the App Store that installs a validation function for you, or a custom one you build and deploy with the Shopify CLI.

**B2B quantity rules.** If you sell wholesale through B2B, products support minimum quantity and increment rules per catalog. Real, server side, and unavailable unless you are on a plan with B2B.

**A cart guard in the theme.** Free, no app, works today on any theme. It shows a message and disables the checkout button below your minimum. It is client side, which is a real limitation covered below.

The third is what most stores actually want, so that is what I built and tested.

## The cart guard

One **Custom Liquid** section on the cart page. A Custom Liquid block is an empty box in the theme editor where you paste your own code. No theme file edited.

Go to **Online Store → Customize**, switch the top dropdown to **Cart**, click **Add section**, choose **Custom Liquid**, drag it above the cart footer, and paste this in.

![The Shopify theme editor on the Cart page, with a Custom Liquid section in the list on the left and the below-minimum message showing on the cart](/images/blog/shopify-minimum-order/03-theme-editor-cart-custom-liquid.png)

```liquid
{%- assign min_spend = 5000 -%}
{%- assign min_items = 0 -%}

{%- assign spend_ok = true -%}
{%- assign items_ok = true -%}
{%- if min_spend > 0 and cart.total_price < min_spend %}{% assign spend_ok = false %}{% endif -%}
{%- if min_items > 0 and cart.item_count < min_items %}{% assign items_ok = false %}{% endif -%}

{%- unless spend_ok and items_ok -%}
  <div class="min-order" role="status">
    <strong>Your order is below our minimum.</strong>
    {%- unless spend_ok -%}
      {%- assign short = min_spend | minus: cart.total_price -%}
      <span>Orders start at {{ min_spend | money }}. Add {{ short | money }} more to check out.</span>
    {%- endunless -%}
    {%- unless items_ok -%}
      {%- assign short_n = min_items | minus: cart.item_count -%}
      <span>Orders start at {{ min_items }} items. Add {{ short_n }} more to check out.</span>
    {%- endunless -%}
  </div>
  <style>
    .min-order { margin: 0 auto 1.5rem; max-width: 74rem; padding: 1rem 1.5rem;
      border: 1px solid rgba(var(--color-foreground), 0.25); border-radius: 0.5rem;
      font-size: 1.4rem; line-height: 1.6; }
    .min-order strong { display: block; margin-bottom: 0.2rem; }
    .cart__ctas button[name="checkout"],
    .cart__dynamic-checkout-buttons { opacity: 0.4; pointer-events: none; }
  </style>
  <script>
    document.querySelectorAll('[name="checkout"]').forEach(function (b) { b.disabled = true; });
  </script>
{%- endunless -%}
```

Two settings at the top, and you can use either or both:

- **`min_spend`** is your minimum order value **in cents**. \$50 is `5000`. Set it to `0` to switch the rule off.
- **`min_items`** is a minimum item count, a plain number. `0` switches it off.

The cents thing catches people. Shopify holds every price in cents, so writing `50` would set your minimum to fifty cents and the guard would never fire.

The style block also greys out the accelerated checkout buttons (Shop Pay, PayPal and friends), which sit outside the normal checkout button and would otherwise stay live.

## What it looks like

Tested on Dawn. One tee in the cart:

![A Dawn cart with a single item, a message reading your order is below our minimum, orders start at Rs. 50.00, add Rs. 18.00 more to check out, and a greyed out Check out button](/images/blog/shopify-minimum-order/01-below-minimum-checkout-blocked.png)

The message reads *"Your order is below our minimum. Orders start at Rs. 50.00. Add Rs. 18.00 more to check out."* and the **Check out** button is greyed out. Reading the button state directly in the browser confirmed `disabled = true`.

Add a second product to cross the line:

![The same cart with two items and no guard message, the Check out button live again](/images/blog/shopify-minimum-order/02-above-minimum-checkout-allowed.png)

The guard disappears and the button comes back. Verified in the same way: the guard element is gone and the button is no longer disabled.

## The detail that will surprise you

Look at the arithmetic in that first screenshot. The minimum is Rs. 50.00. The tee costs Rs. 40.00. So it should ask for Rs. 10.00 more.

It asked for **Rs. 18.00**.

That is because the tee had a 20% automatic discount on it, so the cart total was Rs. 32.00, not Rs. 40.00. `cart.total_price` is the **discounted** total.

**Your minimum is measured after discounts.** A shopper with a generous coupon can fall below a minimum they had cleared before applying it. This is the same rule that catches free shipping thresholds, which is covered in [how to offer free shipping on Shopify](/blog/shopify-free-shipping).

If you want the minimum measured on the pre-discount value instead, swap `cart.total_price` for `cart.original_total_price` in both places. Decide which one you actually mean before you launch.

## Where this guard stops

The guard is client side. It stops the normal shopping flow: the button is disabled and the message explains why.

It does not stop someone who navigates straight to `/checkout`, or who has JavaScript disabled, or who uses a link they saved earlier. For a shop with ordinary customers this is fine, and it is what most stores that advertise a minimum are running. For a wholesale operation where the minimum is a contractual thing, it is not enough, and you want a **Cart and Checkout Validation Function**, which runs on Shopify's servers and cannot be sidestepped.

Say that out loud to yourself before choosing. "Nudge" and "enforce" are different jobs.

## Minimum quantity per product

A different question that gets asked in the same breath: "customers must buy at least 6 of this item".

The guard above counts the whole cart, not one product. For a per-product rule you have two options.

**Sell in packs.** Make the product a pack of six and price it accordingly. No code, no rules, and the shopper cannot get it wrong. This is the right answer far more often than people expect.

**Set the quantity input's minimum.** Dawn renders a quantity input on the product page, and you can force a floor on it with a small Custom Liquid block on the product template that sets `min` and `value` on the input, gated by a product tag the same way the promo badge is in [showing a discount on the product page](/blog/shopify-show-discount-on-product-page). It is a nudge, not enforcement, for the same reason as above.

Proper per-product minimums with enforcement are B2B quantity rules or a Function.

## Minimum order for wholesale customers only

The guard applies to every shopper who sees the cart. To make it apply to one group, gate it on the logged-in customer.

Liquid can see the customer on the storefront, so wrapping the guard in a tag check works:

```liquid
{%- if customer and customer.tags contains 'wholesale' -%}
  ... the guard ...
{%- endif -%}
```

Note this only works for customers who are **logged in**, since `customer` is empty otherwise. If your wholesale buyers do not log in, there is nothing to key on. Tag-based customer targeting is covered in [Shopify customer tags](/blog/shopify-customer-tags).

## Common problems

**The guard never appears.** The minimum is in cents. Check `5000`, not `50`.

**The guard appears but checkout still works.** Your theme's checkout button is not named `checkout`. Inspect the button and adjust the selector. Some themes wrap it in a form with a different name.

**Accelerated checkout buttons are still live.** They render in their own container. The CSS above targets Dawn's `.cart__dynamic-checkout-buttons`; other themes use a different class.

**It fires on an empty cart.** An empty cart is below any minimum, so the message shows on a cart with nothing in it. Add `{%- if cart.item_count > 0 -%}` around the whole block if that bothers you.

**The number asked for looks wrong.** It is measured after discounts. See above.

## The main points
- **Shopify has no minimum order setting.** The **Minimum purchase requirements** radios on a discount only gate the discount, not the checkout.
- The enforceable route is a **Cart and Checkout Validation Function**, which needs an app. B2B quantity rules cover wholesale on plans that have B2B.
- The free route is one **Custom Liquid** section on the cart that shows a message and disables the checkout button. Verified on Dawn: blocked at Rs. 32.00, allowed at Rs. 92.00.
- The minimum is in **cents**, and it is measured on the **discounted** cart total. My Rs. 50.00 minimum asked a Rs. 40.00 tee for Rs. 18.00 more, because a 20% discount had already taken it to Rs. 32.00.
- The guard is a **nudge**, not enforcement. Someone can still reach /checkout directly.
- For "must buy 6 of this", selling a pack of six beats every technical answer.


---

---
title: "Shopify Mix and Match Bundle: Required and Optional Items"
description: "Build a mix and match bundle in Shopify where some items are required and some are optional. What the free Shopify Bundles app does, the two walls it hits, and the free discount ladder. Tested, with screenshots."
---

## The problem

A merchant asked this on the Shopify Community, and the way they described it is the clearest version of the question I have seen.

They wanted a bundle made of:

- 2 products the customer must take, one of which has a colour choice like red, blue or green
- 5 more products the customer can add if they want to
- a discount that gets bigger the more items they add

Then they gave the example that makes it obvious. Building a sandwich. You have to pick a cheese and you have to pick a meat. After that, the condiments are up to you. Add none, add all five.

That shape has a name. It is a **mix and match bundle**, sometimes called a build a box or a build your own bundle. It is not the same thing as a normal Shopify bundle, and knowing the difference saves you a lot of wasted setup.

I reproduced the whole thing on a test store to find out exactly where Shopify stops and where you have to reach for an app.

## What makes a mix and match bundle different

A normal bundle is a fixed set. Three products, always the same three, sold together at one price.

A mix and match bundle is built out of **steps**, and each step has a rule about how many items the customer picks:

- **Required step**: pick exactly 1. The cheese. The meat.
- **Optional step**: pick anywhere from 0 to 5. The condiments.

That "pick 0 to 5" rule is the entire difficulty. Everything else about the merchant's request is easy, and two thirds of it is free. The optional step is the part that Shopify has no setting for.

## Start with the free Shopify Bundles app

Before paying for anything, install Shopify's own free **Shopify Bundles** app. It is made by Shopify, it costs nothing, and it handles more of this than most people expect.

Go to the Shopify App Store, install Shopify Bundles, then open it and choose **Create bundle**. Give the bundle a title, then add your products.

Here is what my sandwich looked like after adding all seven products.

![The Shopify Bundles create screen, showing the cheese and meat products with buyer-facing option chips and a condiment added as a fixed component](/images/blog/shopify-mix-and-match-bundle/01-bundles-required-vs-fixed.png)

Look at the two green boxes. My Sandwich Cheese product has three variants, Cheddar, Swiss and Provolone, and Shopify Bundles turned that straight into a picker the customer uses. Same for Sandwich Meat with Turkey, Ham and Roast Beef.

So the merchant's first requirement is done, for free. **A bundle component with variants becomes a choice the buyer makes.** No app fee, no code.

Now look at the red box. That is Condiment - Lettuce, and it looks nothing like the other two.

## Wall one: there is no such thing as an optional component

The condiment went in as a plain component with the quantity locked at 1. There is no checkbox next to it. There is no "optional" toggle anywhere on the screen. There is no minimum or maximum.

That means every single person who buys this bundle gets lettuce, tomato, pickles, mayo and mustard, whether they wanted them or not.

This is not a setting I failed to find. Shopify Bundles builds a fixed bundle, and a fixed bundle is fixed by definition. Every component is in every sale.

Here is what the customer sees on the storefront.

![The bundle product page showing two variant pickers, a single price and an add to cart button, with no optional add-on section](/images/blog/shopify-mix-and-match-bundle/03-storefront-two-pickers.png)

Two pickers, one price, add to cart. That is the whole page. There is no add-on section, because there is nothing in Shopify that would generate one.

## Wall two: a bundle stops at three pickers

The second limit is less obvious and it catches people later, once their bundle has grown.

A Shopify bundle is still a single Shopify product underneath. Products are capped at 3 options, and a bundle inherits that cap. The Bundles app even counts it for you in the sidebar.

![The Components panel in Shopify Bundles showing 7 of 30 bundled products but only 2 of 3 option slots used](/images/blog/shopify-mix-and-match-bundle/02-three-option-cap.png)

Mine reads **2/3 options**. I have used two of my three picker slots on cheese and meat. I have one left.

Now count what a real sandwich shop needs. Bread, meat, cheese, sauce. That is four choices and you are already over the limit before you get anywhere near the interesting toppings.

Note the other numbers on that panel too. You get up to 30 bundled products and 2048 variants, which sound generous, but the 3 that matters is the small one. Options are the bottleneck, not products.

## The discount ladder is free, and this surprised me

The merchant's third requirement was a discount that grows as you add more items. I expected this to need an app. It does not.

Go to **Discounts**, create a discount, and choose **Amount off products**. Set it to **Automatic** rather than a discount code. Then set a **minimum quantity of items** and pick the products or the collection it applies to.

Make one discount per tier. I made two:

- Bundle tier 3+, 10% off, minimum 3 items
- Bundle tier 5+, 20% off, minimum 5 items

Then I added items to the cart one at a time and watched what happened.

![Two carts side by side, one with 3 items getting 10 percent off and one with 5 items getting 20 percent off](/images/blog/shopify-mix-and-match-bundle/04-cart-discount-tiers.png)

With 3 items the cart went from Rs. 3.00 to Rs. 2.70. Every line showed "Bundle tier 3+ (10%)".

With 5 items the cart went from Rs. 5.00 to Rs. 4.00, and every line switched to "Bundle tier 5+ (20%)".

The important detail is what did **not** happen. At 5 items both discounts technically qualified, but they did not stack into 30%. Shopify applied the better single tier and left it there. That is exactly the behaviour you want from a ladder, and you get it for free.

There is one catch worth knowing before you build on this. The discount counts **cart quantity**, not "items chosen in a builder". So it fires on any cart that reaches the threshold, even if the customer added those products one by one from your normal collection pages. If that is a problem, scope the discount to a collection that only contains the bundle parts.

If you want the full version of this, including a price table on the product page, I wrote that up separately in [Shopify tiered pricing and quantity breaks](/blog/shopify-tiered-pricing).

## So what actually needs an app

Two of the merchant's three requirements are free. The variant picks work in Shopify Bundles. The growing discount works with automatic discounts.

The optional step is the one thing with no native equivalent. Nothing in Shopify lets you say "pick 0 to 5 of these", and no combination of settings fakes it.

For that you want a **bundle builder** app. These build a multi-step page where each step has its own selection rule and its own discount. Step 1 is required and takes exactly one. Step 3 is optional and takes up to five. That maps directly onto the sandwich.

When you shop for one, the features to check are:

- **Per-step minimum and maximum**, which is what makes a step optional instead of required
- **Tiered discounts based on how many items were picked**, so the ladder lives inside the builder instead of the whole cart
- **Whether it gets past the 3 option cap**, since that is the wall a fixed bundle hits
- **What lands in the order**, one bundle line or the real products as separate lines

That last one matters more than people expect, and I covered why in [how to pick a Shopify bundle app](/blog/shopify-bundle-apps). It decides whether your stock stays accurate and whether you can edit the order later.

## Is there a Shopify build a box app?

Build a box is the same pattern under a different name, and it is what most of these apps call themselves. A gift box, a snack box, a six pack of your choice.

The mechanics are identical to the sandwich. One or more required steps, one or more optional steps, a discount that scales with the count. If an app advertises build a box, mix and match, or BYOB, it is describing the same feature set.

The naming is worth knowing because it changes what you find. Searching for "Shopify bundle" mostly returns fixed bundle apps. Searching for "build a box" or "bundle builder" returns the multi-step kind, which is the kind that does optional items.

## Can you make one product optional in a Shopify bundle?

Not in a fixed bundle, no. Not with the free Bundles app and not with any fixed-bundle app, because the component list is the definition of the product.

There are two workarounds that get close without a builder app, and both have real downsides.

**Make separate bundle variants.** Build the bundle with an extra option called something like "Add condiments" with values Yes and No. This works, but each combination multiplies your variants, and you only have one option slot left after the cheese and the meat. It gives you one yes or no question, not five independent choices.

**Sell the add-ons as normal upsells.** Keep the bundle to the required items only, then use a cart or product page upsell to offer the condiments as ordinary products. The customer picks them freely and the automatic discount ladder still counts them. The downside is that it does not feel like one builder, and the add-ons arrive as separate order lines.

Neither is as clean as a real optional step. They are worth knowing if you want to launch this week without adding an app.

## Fixed bundle, discount bundle, bundle builder

Three different things, and mixing up the names is the main reason people buy the wrong app.

**Fixed bundle.** A new product made of other products. One price, one line in the order, one stock number calculated from the parts. Shopify Bundles is this. Good for a boxed set. Cannot do optional items.

**Discount bundle.** The real products stay in the cart as normal lines and a discount applies when the right combination is there. Shopify's automatic discounts and Buy X get Y do this for free. Good for stock accuracy and editable orders. It does not give the customer a guided picking experience. I went through the native version in [creating an automatic bundle discount](/blog/shopify-bundle-discount-automatic).

**Bundle builder.** A guided multi-step page where the customer assembles the bundle. This is the only one of the three that does required and optional steps. It always needs an app.

The merchant's sandwich is a bundle builder. Once you know that, the shopping list gets short.

## What to check if it is not working

A few things that trip people up on this setup.

**The bundle shows as out of stock.** Bundle inventory is calculated from the components, so if any component has no stock the whole bundle is unavailable. Check every part, not just the bundle.

**The discount does not apply.** Automatic discounts need a start date that has already passed, and they only count products inside the collection or product list you selected. If you added new bundle parts later, add them to that collection too.

**You cannot add a third picker.** You have hit the 3 option cap. Check the Components panel in the Bundles app, it tells you your current count. The only real fix is a builder app that works around the limit.

**The bundle does not appear on your storefront.** New bundle products are created as drafts. Set the status to Active and confirm the Online Store sales channel is selected under Publishing.

## The short version

If you want a mix and match bundle in Shopify:

- The required picks with variants are free. Use the Shopify Bundles app.
- The discount that grows with item count is free. Use automatic discounts with minimum quantities, one per tier. They do not stack, Shopify takes the better tier.
- The optional "pick 0 to 5" step is the only part with no native option. That is what a bundle builder app is for.

Install the free app first and see how far it carries you. If the add-ons genuinely have to be optional, skip the experiment and go straight to a builder.


---

---
title: "Shopify Mobile Banner Size (And Why Yours Gets Cropped)"
description: "Your 1920x700 banner looks great on desktop and loses its text on phones. Here are the real slot sizes Shopify themes give a banner, the mobile banner size that actually fits, and how to serve a separate image to phones."
---

## The problem

A merchant asked about this on the Shopify Community. They had built a slideshow on the Horizon theme. The image was 1920x700, the size every guide recommends.

On desktop it looked right. On a phone the sides were gone. Their headline read "AUTUM" and then nothing.

They asked a fair question. Can desktop and mobile have their own slideshow settings?

I reproduced the whole thing on a test store, measured what the theme actually does, and fixed it. Everything below is what really happened.

![A 1920x700 banner on a phone, with the headline cut off at the right edge](/images/blog/shopify-mobile-banner-size/01-banner-cropped-on-mobile.png)

## Why your banner gets cropped

This is the part no size guide explains, and it is the whole answer.

A banner slot has a fixed height. Your image is stretched until it covers that slot, and whatever hangs over the edge is cut off. The CSS behind it is `object-fit: cover`.

So what matters is not the size of your image. It is the **shape** of your image against the **shape** of the slot.

Here is the arithmetic for the merchant above.

- Their image was 1920x700. Divide 1920 by 700 and you get **2.74**. It is 2.74 times wider than it is tall.
- On a 1440px wide desktop, the slot was 1440x560. That is **2.57**. Close to 2.74, so almost nothing was lost.
- On a 390px wide phone, the slot was 390x340. That is **1.15**. Nowhere near 2.74.

To cover a slot that is 1.15 wide with an image that is 2.74 wide, the browser has to blow the image up until its height fits, then throw away the sides. It kept about 42% of the width and binned the rest. The headline lived in the part it binned.

That is the entire bug. Your banner is not too big. It is the wrong shape for a phone.

## The real slot sizes on a Shopify theme

Most size guides give you one number and move on. The useful number is the slot, and it changes with the height setting you picked in the theme editor.

I read these straight out of Horizon's theme code. Horizon is Shopify's newest free theme, and Dawn and its relatives behave the same way.

| Media height | Phone slot | Desktop slot |
| --- | --- | --- |
| Small | width x 280px | width x 420px |
| Medium (default) | width x 340px | width x 560px |
| Large | width x 400px | width x 720px |

Now put a real phone against that. A common phone is 390px wide.

| Media height | Phone slot | Shape |
| --- | --- | --- |
| Small | 390 x 280 | 1.39, slightly landscape |
| Medium | 390 x 340 | 1.15, nearly square |
| Large | 390 x 400 | 0.98, square |

That is the answer to the question behind the question. **The banner slot on a phone is roughly square.** It is not a wide strip. It never was.

## What size should a Shopify mobile banner be

Match the shape of the slot, and keep your text away from the edges.

- **Best all-round mobile banner size: 1080 x 1080.** Square. It fits the Medium and Large slots with only a few percent trimmed off the top and bottom.
- **If you use the Small height: 1200 x 900.** Slightly landscape, closer to 1.39.
- **Avoid 1080 x 1350** unless you have raised the height. That is the Instagram portrait shape. It is taller than any phone banner slot, so you lose the top and the bottom. I tried it first and it clipped the last line of my text.

Two rules that matter more than the exact numbers:

1. **Keep important text in the middle 80%.** Every slot on every device crops a little. Text near an edge is text you will eventually lose.
2. **Do not bake your headline into the image at all if you can avoid it.** Use the theme's own heading and button blocks over a plain photo. Then nothing can crop your words, because they are real text sitting on top.

The second one is free, helps SEO, and stays sharp on every screen. It is the fix I would reach for first.

## Desktop and homepage banner size

For the desktop half of the same banner, 1920 x 700 is still fine. That is 2.74, and desktop slots sit between 2.4 and 2.9 depending on the height you chose.

If you only want to remember one pair:

- **Desktop banner: 1920 x 700**
- **Mobile banner: 1080 x 1080**

Keep both under about 300KB. A hero banner is usually the largest thing on your homepage, and it is the image Google measures for your loading score. There is more on that in [making your Shopify hero image load faster](/blog/shopify-hero-image-lcp).

## How to actually serve a different image on phones

Knowing the right size is only half of it. You still need the theme to send the square one to phones and the wide one to desktops.

There are three ways, in order of effort.

### Option 1: use a Hero section instead of a Slideshow (no code)

If you only need one banner and not a rotating set, Horizon already does this for you. The Hero section has a setting called **Show different media on mobile**. Turn it on and you get a second image picker for phones.

Add a Hero section, switch that on, upload your square image, done. No code at all.

Most people asking this question do not know that setting exists, because it is on Hero and not on Slideshow.

### Option 2: two sections, one hidden per screen (no code)

Build the banner twice. Show one on desktop, the other on phones, using a few lines in the section's Custom CSS box. It works on any theme and any section type.

I wrote that method up in full, on the Sense theme, in [showing a different image on mobile and desktop](/blog/shopify-different-image-mobile-desktop).

The trade off is maintenance. Every change has to be made twice, and it gets annoying fast with a slideshow that has several slides.

### Option 3: add a Mobile image setting to your slides (one file)

This is the one the merchant needed, because they had a real slideshow with multiple slides.

Horizon's Slideshow has one image per slide and no mobile option. But its Hero section already has the pattern. You can copy that pattern onto the slide, and then every slide gets its own **Mobile image** picker in the theme editor, permanently.

**Step 1.** Go to Online Store > Themes. Click the three dots on your theme, then **Edit code**.

![The theme actions menu in Shopify admin, with Edit code highlighted](/images/blog/shopify-mobile-banner-size/03-themes-edit-code.png)

**Step 2.** Open `blocks/_slide.liquid`.

![The Shopify code editor with blocks/_slide.liquid open](/images/blog/shopify-mobile-banner-size/04-open-slide-liquid.jpeg)

**Step 3.** Find these six lines.

```liquid
      {%- if block_settings.media_type_1 == 'image' -%}
        {{
          block_settings.image_1
          | image_url: width: 3840
          | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority
        }}
```

Replace them with this.

```liquid
      {%- capture desktop_image -%}
        {{
          block_settings.image_1
          | image_url: width: 3840
          | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority
        }}
      {%- endcapture -%}

      {%- if block_settings.media_type_1 == 'image' -%}
        {%- if block_settings.custom_mobile_media and block_settings.image_1_mobile != blank -%}
          {% style %}
            .slide__image-container > .slide__picture {
              display: contents;
            }
            .slide__picture > .slide__image {
              position: relative;
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center center;
            }
          {% endstyle %}
          <picture class="slide__picture">
            <source
              media="(max-width: 749px)"
              sizes="100vw"
              srcset="
                {{ block_settings.image_1_mobile | image_url: width: 500 }} 500w,
                {{ block_settings.image_1_mobile | image_url: width: 750 }} 750w,
                {{ block_settings.image_1_mobile | image_url: width: 1100 }} 1100w,
                {{ block_settings.image_1_mobile | image_url: width: 1500 }} 1500w
              "
              width="{{ block_settings.image_1_mobile.width }}"
              height="{{ block_settings.image_1_mobile.height }}"
            >
            {{ desktop_image }}
          </picture>
        {%- else -%}
          {{ desktop_image }}
        {%- endif -%}
```

**Step 4.** Lower down the same file, inside `{% schema %}`, find the `image_1` setting and add these two straight after it.

```json
    {
      "type": "checkbox",
      "id": "custom_mobile_media",
      "label": "Use a different image on mobile",
      "default": false,
      "visible_if": "{{ block.settings.media_type_1 == 'image' }}"
    },
    {
      "type": "image_picker",
      "id": "image_1_mobile",
      "label": "Mobile image",
      "visible_if": "{{ block.settings.media_type_1 == 'image' and block.settings.custom_mobile_media }}"
    },
```

Save.

**Step 5.** Go back to Customize and click a slide. The two new settings are there.

![The slide settings panel showing Use a different image on mobile and a Mobile image picker](/images/blog/shopify-mobile-banner-size/05-mobile-image-setting.png)

Tick the box, pick your square image, and the banner is fixed.

![The same banner on a phone after the fix, with all the text visible](/images/blog/shopify-mobile-banner-size/02-square-mobile-banner-fits.png)

## Does this slow the page down?

No, and this is worth understanding because it is the usual objection.

The code above uses a `picture` element. The browser reads the rules first, decides which image it needs, and downloads **only that one**. A phone never downloads your 1920px desktop banner. A desktop never downloads the square one.

That is the difference between doing it this way and hiding a second section with CSS. A hidden section is still on the page. Depending on the theme, the browser may well fetch that image before it finds out it is invisible.

So the code route is the faster route, not the slower one. If page speed is your reason for asking, this is the option to pick.

## What breakpoint counts as mobile?

749px and below. That is the number in the code, and it is the same one Dawn, Horizon and most Shopify themes use internally.

The reason 749 looks odd is that the desktop rule starts at 750. Themes are written mobile first, so the phone styles apply up to 749px, and everything from 750px up is treated as desktop.

Tablets in portrait are usually 768px or 810px wide, so they get the **desktop** image. That is normally what you want. If it is not, change 749 to 1023 in the code above.

## What to check if it did not work

- **The setting does not appear.** The JSON in step 4 almost certainly has a missing or extra comma. Shopify will refuse to save a schema it cannot parse, so check the error message at the top of the code editor.
- **Nothing changed on your phone.** Check you actually ticked the box and picked an image. The code deliberately falls back to the desktop image when either is missing, so a half-finished setting looks like nothing happened.
- **You resized your browser and it did not switch.** Reload the page. Browsers pick the image once and do not always re-pick when a window is dragged.
- **It works on your phone but not a colleague's.** You are probably looking at a cached copy. Hard refresh.
- **It disappeared after a theme update.** Expected. A theme update replaces theme files, and that includes this one. Keep a copy of your two edits somewhere. This is the real cost of the code route.

## A quick glossary

- **Aspect ratio.** Width divided by height. 1920x700 is 2.74. A square is 1.
- **Slot.** The fixed box your banner has to fill. Set by the theme's height setting, not by your image.
- **`object-fit: cover`.** The rule that fills the slot and crops the overflow, instead of squashing your image.
- **Breakpoint.** The screen width where the layout switches. 750px on most Shopify themes.
- **`srcset`.** A list of sizes of the same picture. The browser picks the smallest one that still looks sharp.

## The short version

- Your banner is cropped because it is the wrong shape for the slot, not because it is the wrong size.
- The banner slot on a phone is roughly square, about width x 340px on the default height.
- Use **1920 x 700 for desktop** and **1080 x 1080 for mobile**.
- Keep text in the middle 80%, or better, use the theme's own text blocks over a plain photo.
- To serve both, use a Hero section if one banner is enough. Add a Mobile image setting to the slide if you need a real slideshow.

Tested on Horizon 4.1.5 with a 1920x700 desktop banner and a 1080x1080 mobile one. At 390px wide the phone loads the square image. Desktop still loads the wide one.


---

---
title: How to Change the Shopify Mobile View Only
description: There is no reliable "if mobile" in Liquid, and the reason matters. Here is the CSS media query that changes mobile without touching desktop, with four fixes tested on real stores.
---

## The problem: the setting applies to both

Your store looks right on desktop and wrong on a phone. So you go into the theme editor, change the setting, and now desktop is wrong too.

This is the single most common shape of Shopify theme complaint. A position setting, an alignment, a layout direction: it applies to every screen size, and the theme gives you one control for both.

The instinct is to look for a Liquid conditional. Something like `{% if mobile %}`. It is a reasonable guess and it is why "shopify if mobile" is a search people actually make.

It does not exist, and the reason is worth understanding, because it tells you what the correct answer has to look like.

## Why there is no "if mobile" in Liquid

Liquid runs **on Shopify's servers**, before the page is sent to the browser. At that moment the only hint about the visitor's device is the user agent string, which is unreliable, endlessly spoofed, and says nothing about the actual window size.

More importantly, Shopify **caches** rendered pages hard. If Liquid produced different HTML per device, that caching would break or you would serve the wrong version to someone. So the platform deliberately does not give you a device conditional.

Then there is the case that kills the idea outright: someone rotating their phone, or dragging a desktop window narrower. The screen changes size *after* the page has rendered. No server-side conditional can respond to that. CSS can.

So the answer is always the same:

```css
@media screen and (max-width: 749px) {
  /* rules here apply only on phones */
}
```

The browser evaluates that continuously, on the actual viewport, and re-evaluates it when the window changes. It is the right tool, not a workaround for a missing one.

**749px is Shopify's convention.** Dawn, Horizon, Savor and most themes built on them treat 750px and up as tablet-and-desktop. Matching it means your rule flips at the same point the theme's own layout does, which is what you want.

## Where to put it

Two options, and the choice matters more than the code.

**Theme settings > Custom CSS** is in the theme editor under Theme settings. It survives theme updates and it is easy to find again later. Use it when you can.

**`assets/base.css`** is reached through `Online Store > Themes > ... > Edit code`. Paste at the very bottom so your rules come last. Use this when you have a lot of CSS, or when a rule needs to be more specific than Custom CSS allows.

Either way, **duplicate your theme first** if you are editing code. `Online Store > Themes > ... > Duplicate`.

Below are four real fixes, each one a different flavour of the same problem.

## Fix 1: product title and price on the same line

A merchant on **Horizon** wanted the title and price of each product card side by side rather than stacked. They had built a group section with a horizontal layout, selected horizontal for mobile as well, and it still stacked on phones.

They also wanted long titles truncated with an ellipsis rather than wrapping onto three lines.

```css
@media screen and (max-width: 749px) {
  .product-grid__card .group-block > .group-block-content.layout-panel-flex--row {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

.product-card a[ref="productTitleLink"] .text-block {
  min-width: 0;
  flex: 1 1 auto;
}

.product-card product-price.text-block {
  flex: 0 0 auto;
}

.product-card a[ref="productTitleLink"] .text-block > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```

![Product cards before, with title and price stacked, and after, with them on one line](/images/blog/shopify-mobile-only-css/01-before-after-title-price-mobile.jpeg)

Only the first rule is inside the media query. The rest apply everywhere, because the truncation behaviour is wanted on both.

The interesting line is **`min-width: 0`**. Flex items refuse to shrink below their content's intrinsic width by default, so a long title pushes the price off the card instead of truncating. `min-width: 0` overrides that, and it is what makes `text-overflow: ellipsis` work at all here. Without it the other three rules do nothing, which is why this fix looks like it fails when you only copy part of it.

The price gets `flex: 0 0 auto` so it never shrinks. The title takes the remaining space and clips.

Desktop keeps working:

![The same layout on desktop after the fix](/images/blog/shopify-mobile-only-css/02-desktop-title-price-after.jpeg)

## Fix 2: make the product image full width on mobile

A merchant wanted their product photo to fill the screen on mobile instead of sitting inset with white space either side, and to remove the "peek" of the next gallery image.

**Try the no-code route first.** In the theme editor, open your Product page, click the product media or gallery block, and turn off **Constrain media to viewport height**. If there is a **Media fit** option, leave it on Contain. On many themes that alone makes the image fill the column, and a setting always beats CSS.

If the setting is not there or does not go far enough:

```css
@media screen and (max-width: 749px) {
  /* let the main product image use the full screen width */
  .product-media-container.constrain-height.media-fit-contain {
    width: 100% !important;
  }
  .product-media-container.constrain-height .media {
    padding-top: var(--ratio-percent) !important;
  }
  /* remove the side "peek" so each gallery photo is edge to edge */
  .product__media-list .product__media-item {
    width: 100% !important;
  }
}
```

![The product image before, inset with white space, and after, edge to edge](/images/blog/shopify-mobile-only-css/03-before-after-product-image-mobile.png)

Tested at a 390px viewport, the main image went from **335px wide, centred, to a full 390px, edge to edge**.

One honest note from that thread: some of the empty space above and below the product was **baked into the photos themselves**, not added by the theme. No CSS fixes that. If your images have generous built-in margins, crop them. It is worth checking before you spend an evening on selectors, because a theme cannot remove whitespace that is part of the JPEG.

## Fix 3: move banner text up on mobile only

On the **Savor** theme, the Hero section's **Position** setting applies to desktop and mobile together. On a phone the centred text lands over the busiest part of the image and becomes unreadable.

```css
@media screen and (max-width: 749px) {
  .hero__content-wrapper.mobile-column {
    justify-content: flex-start;
    padding-top: 24px;
  }
}
```

![The Savor hero banner with the text moved to the top on mobile](/images/blog/shopify-mobile-only-css/04-savor-banner-text-moved-up-mobile.jpeg)

Swap `flex-start` for `center` (the default) or `flex-end` (bottom) to reposition later. Same rule, one value.

Two things to know. It applies to the hero banner on **every page**, not just the home page, because the selector targets the section rather than one instance. And a hero that fits neatly on a phone can push its headline below the fold on a wide desktop window, so check both before concluding a layout problem is universal.

## Fix 4: hide empty slideshow text boxes on mobile

A merchant on **Crave** had a slideshow where slides two onwards showed an empty text box beneath the image, but only on mobile. They had removed them on desktop and could not on mobile, and they wanted to keep the text box on the *first* slide.

That last requirement is what makes it interesting. You cannot just hide the text box, because one of them has to stay.

The CSS below was originally posted by **tim_tairli** in that thread. I reproduced the problem on a Crave/Dawn store and tested it, and it works:

```css
@media screen and (max-width: 749px) {
  .slideshow__slide .banner__content:has(.slideshow__text:empty) {
    display: none;
  }
  .slideshow__slide:has(.slideshow__text:empty) .slideshow__media {
    min-height: 100%;
  }
}
```

![The Crave slideshow on mobile with no empty text box under slide two](/images/blog/shopify-mobile-only-css/06-crave-slideshow-after-mobile.jpeg)

### Why this works without hardcoding slide numbers

The clever part is `:has()`, the CSS parent selector. Most selectors let you style an element based on its own attributes or its ancestors. `:has()` lets you style an element based on its **descendants**.

Read the first rule backwards: find a `.slideshow__text` that is `:empty`, then hide the `.banner__content` that contains it.

So the rule targets the *content of the slide*, not the slide's position. A slide with text keeps its box. A slide without text loses it. Add a sixth slide with no text next month and it is handled, and if you later add text to slide three, its box returns on its own.

Compare that with the obvious approach, `:nth-child(n+2)`, which hides the box on every slide after the first. That works today and breaks the moment you reorder your slides or add text to one of them. Selecting on content rather than position is what makes this maintainable.

`:empty` matches an element with no children and no text at all. Note that whitespace counts as content, so a text block containing a single space will not match. If a slide stubbornly keeps its box, check the field is genuinely empty rather than holding a stray space.

The second rule stops the slide collapsing once the text box is gone, by letting the image take the full height the slide was reserving.

`:has()` is supported in all current browsers. On anything genuinely old it is simply ignored, which means you get the original layout back rather than a broken one.

This one goes in `layout/theme.liquid`, pasted just before `</head>` and wrapped in `<style>` tags, or into Custom CSS if your theme's settings expose it. Custom CSS is preferable for the same reason as always: it survives theme updates.

## The four mobile-only jobs you will actually need

Beyond the four fixes above, almost every mobile request reduces to one of these.

**Hide something on mobile.**

```css
@media screen and (max-width: 749px) {
  .announcement-bar__message { display: none; }
}
```

Useful for a decorative element that becomes clutter on a small screen. Do not use it to hide navigation or anything a customer needs, and remember the markup still downloads even when hidden, so this saves screen space rather than page weight.

**Show something only on mobile.** The inverse needs two rules, because the element has to be hidden by default:

```css
.mobile-only { display: none; }

@media screen and (max-width: 749px) {
  .mobile-only { display: block; }
}
```

**Shrink text that was sized for desktop.** Large headings are the usual culprit, since a 60px hero headline on a 390px screen wraps into five lines:

```css
@media screen and (max-width: 749px) {
  .banner__heading { font-size: 28px; }
}
```

Better still, use `clamp()` and skip the media query entirely: `font-size: clamp(28px, 5vw, 60px)` scales smoothly between the two rather than snapping at a breakpoint.

**Reorder stacked sections.** When a two-column layout stacks, the left column lands on top. If you want the image first:

```css
@media screen and (max-width: 749px) {
  .some-section { display: flex; flex-direction: column; }
  .some-section__media { order: -1; }
}
```

`order: -1` pulls an item ahead of its siblings without touching the markup. Note that it changes the *visual* order only. Screen readers and keyboard tab order follow the source, so do not use it to move anything interactive, or you create a layout where tabbing jumps around unpredictably.

## Finding the right selector

The fixes above are theme-specific. Yours will differ. The method does not.

Open your store on desktop, right-click the element and choose **Inspect**. In Chrome DevTools, click the **device toolbar** icon (or press Ctrl+Shift+M) and pick a phone size. Now you are looking at the mobile layout with the real class names.

Click the element and read the classes in the Styles panel. Test a rule by editing it live in DevTools. When it works, copy it into Custom CSS.

This matters because themes change. `.hero__content-wrapper` is Savor's. Dawn calls things `.banner__box`. Horizon uses web components with `ref` attributes. Copying a selector from a tutorial written for a different theme is the main reason mobile CSS "does not work".

## Testing it properly

**Resizing your browser window is not enough.** It gets the media query right, but not touch behaviour, not the real device pixel ratio, and not the mobile browser's own quirks.

Use Chrome DevTools device emulation for a quick check, then look at it on an actual phone before you call it done.

If you are previewing an unpublished theme, make sure the phone is on the **same preview URL**. A very common false alarm is editing a duplicate theme, previewing the live one on your phone, and concluding the CSS failed. Check the URL matches, and open it in a private window to rule out caching.

## If it is not working

**The rule applies on desktop too.** It is outside the media query, or a second copy exists lower in the file. Later rules win.

**Nothing changes anywhere.** The selector is wrong for your theme. Inspect and read the real classes rather than trusting a tutorial.

**It works in DevTools but not on your phone.** Cache. Hard refresh, or open a private window.

**The rule is right but loses.** Something more specific is beating it. Add a parent class to raise specificity before reaching for `!important`, which wins the fight but makes the next change harder.

**You see the change on desktop preview but not mobile.** Usually two different themes, as above. Confirm both devices are on the same preview URL.

## What this comes down to

There is no `{% if mobile %}` in Liquid because Liquid runs before the browser exists and the page it produces is cached and shared. Screen size is a browser-side fact, so it needs a browser-side answer.

`@media screen and (max-width: 749px)` is that answer. It matches the breakpoint your theme already uses, it responds when someone rotates their phone, and it leaves desktop untouched by construction rather than by luck.

Check for a theme setting first. When there is not one, this is the tool.


---

---
title: "Shopify Multi Language Links Going to /en? Here Is the Fix"
description: "On Shopify multi language stores, links on main-language pages started pointing to the /en English version. How to check your store, the script that puts the links back, and what to send Shopify Support."
---

## The problem

You run a Shopify multi language store: two or more languages on the same domain. The main language sits at the root of your domain, and English lives in a subfolder, so English pages start with `/en`. Then one morning the links on your main-language pages start pointing at the English pages instead.

A banner button, a slideshow link, a menu item, a link inside a paragraph of text: every one of them now goes to `/en/...`. A shopper reading your store in Turkish or German clicks a product and lands on the English version. You never changed a single link.

That is exactly what an agency reported on the Shopify Community on 28 September 2026. They saw it on most of their multi-language client stores, and a second merchant replied within minutes with the same problem on several of theirs.

We checked it on live stores. On one of them, 322 links on the Turkish homepage pointed to `/en`. On another, 121 did. A German store with no connection to that agency showed the same thing: 164 links on the German homepage pointed to the English pages.

## What is going wrong

A theme builds every internal link from one starting address that Shopify gives it for the page being shown. On a main-language page that starting address should be `/`. On an English page it should be `/en/`.

On the affected stores, Shopify is handing the theme `/en/` while the page itself is still in the main language. The page text is Turkish or German, but every link the theme writes starts with `/en`. Menus, buttons, sliders and rich text links are all built the same way, which is why every kind of link is affected at once.

Two details make it confusing to chase:

- **It does not happen on every visit.** We fetched the same page many times with different tools. Some requests came back with correct links and some came back with `/en` links. Browsers like Chrome were getting the broken version.
- **It is not your theme.** We saw it on stores running Prestige, Symmetry and other themes. Nothing in the theme changed.

So you did not break anything in your settings. The fix belongs to Shopify. Until they ship it, a small script can put the links back.

## How to check if your store is affected

You can confirm it in under a minute.

- Open your store's homepage in the main language, in Chrome.
- Hover over a menu link or a banner button and look at the address that appears in the bottom corner of the window.
- If it starts with your domain followed by `/en/` (or your second language's code) while the page is in your main language, your store is affected.

Check two or three links in different places: the menu, a slideshow button, and a link inside a text block. On affected stores they all show the same `/en` prefix.

## The fix: a script that puts the links back

The script below runs in the shopper's browser after the page loads. It only acts when the page is in one language and the links point to another. In that case it removes the wrong language prefix from each link, so `/en/collections/summer` becomes `/collections/summer` again.

It leaves everything else alone:

- **English pages are not touched.** On an English page the links are supposed to start with `/en`, and the script sees that the page and the links agree.
- **The language switcher keeps working.** The switcher is a small form, and the script skips it.
- **Market folders are not touched.** If your store uses folders like `/en-us` for a market, the script sees that the page language matches the folder and does nothing.

### Where to paste it

The code goes into `theme.liquid`, the file that wraps every page of your store. You open it from the theme code editor.

- Go to Online Store in your Shopify admin.
- Click the three dots next to your live theme, then click Edit code.

![Online Store, the three-dot menu on the theme, and Edit code](/images/blog/shopify-multi-language-links-en/01-themes-edit-code.png)

- In the file list on the left, open `layout/theme.liquid`.

![layout/theme.liquid open in the code editor](/images/blog/shopify-multi-language-links-en/02-theme-liquid-open.png)

- Find the line that says `</body>`. It is near the bottom of the file. Paste the code just above it.

```html
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var s = window.Shopify || {};
    var root = (s.routes && s.routes.root) || '/';
    var prefix = root.replace(/\/$/, '');
    var lang = (s.locale || '').split('-')[0].toLowerCase();
    if (!prefix || !lang || prefix.slice(1).split('-')[0].toLowerCase() === lang) return;
    var host = location.origin;
    document.querySelectorAll('a[href]').forEach(function (a) {
      if (a.hasAttribute('hreflang') || a.closest('form[action*="localization"]')) return;
      var href = a.getAttribute('href');
      var abs = href.indexOf(host) === 0;
      var path = abs ? href.slice(host.length) : href;
      if (path === prefix || path.indexOf(prefix + '/') === 0 || path.indexOf(prefix + '?') === 0 || path.indexOf(prefix + '#') === 0) {
        a.setAttribute('href', (abs ? host : '') + (path.slice(prefix.length) || '/'));
      }
    });
  });
</script>
```

![The script pasted above the closing body tag](/images/blog/shopify-multi-language-links-en/03-code-pasted.png)

- Click Save.

![Save in the code editor](/images/blog/shopify-multi-language-links-en/04-save-button.png)

Open your homepage again in Chrome and hover over the same links. They should show your domain without `/en` in front.

### What we saw when we tested it

We ran the script on three affected stores, on their main-language homepages:

- A Turkish store on the Prestige theme went from 121 links pointing at `/en` to none.
- A Turkish store on the Symmetry theme went from 315 to none.
- A German store went from 164 to none.

On the English version of the same pages, the number of `/en` links stayed exactly the same before and after, because those links are correct there.

## Report it to Shopify Support

The script hides the problem for shoppers, but Shopify has to fix the cause. When you contact Shopify Support, give them enough to reproduce it quickly:

- Your store URL and your main language.
- One page and one link on it, with the address it should have and the address it has now.
- The time you first noticed it. For the stores we checked it was 28 September 2026.
- That the page is in the main language while the links carry the second language's prefix, and that it happens in Chrome but not on every request.

If you manage several stores, list them all in one ticket. It shows the problem is not tied to one store's setup.

## Remove the script once Shopify fixes it

The script is a stopgap. When Shopify fixes the bug, the links will be correct without it, and the script will simply find nothing to change. It is still good practice to remove it so your theme has no leftover code.

To remove it, open `layout/theme.liquid` again, delete the block from `<script>` to `</script>` above `</body>`, and click Save.

A quick way to know the fix has landed: comment out the script, hover over a few links on your main-language homepage, and check that they no longer start with `/en`.

## Questions merchants ask about this

### Will this hurt my SEO?

While the bug is live, search engines crawling your main-language pages see links pointing at the English pages. That can send crawlers to the wrong language version. Your hreflang tags, the tags that tell search engines which page is which language, are not part of the problem, so the language versions stay correctly paired. The script corrects the links for shoppers. For crawlers, the lasting fix is Shopify's, which is one more reason to report it.

### Does it slow the store down?

No. The script is a few lines that run once when the page loads and only loop over the links on that page. There is nothing to download.

### I use a translation app. Does this still apply?

If the second language comes from Shopify's own language settings and lives in a subfolder like `/en`, yes. Translation apps that write their own links may behave differently, so check a few links after adding the script.

### Could this be something I changed?

On the stores we checked, nothing changed on the merchant side. The same pages served correct links on some requests and broken links on others, which a store setting cannot cause.

## Terms used in this article

- **Subfolder.** The part of the address after your domain that marks a language, like `/en` in `yourstore.com/en/products/mug`.
- **Main language.** The language your store shows at the root of the domain, with no subfolder.
- **The `theme.liquid` file.** The theme file that wraps every page of your store. Code placed here runs on every page.
- **Theme code editor.** The editor you reach from Online Store, the three-dot menu, then Edit code.
- **hreflang.** Tags in the page head that tell search engines which page is the same content in another language.

The thread this came from: <a href="https://community.shopify.com/t/all-the-links-are-added-en/688787" rel="nofollow">All the links are added /en</a> on the Shopify Community.


---

---
title: Shopify Multiple Currencies Without Shopify Payments
description: Shopify's native multi-currency needs Shopify Payments, which is not available in every country. Here is how to show local currencies with a converter app, what checkout will still do, and the one code fix custom prices need.
---

## The problem

A merchant asked me about this. They sell from Malaysia, where Shopify Payments is not available yet. They wanted shoppers in Singapore and elsewhere to see prices in their own currency.

They turned on Markets, expected a currency option, and found it was not there. The prices stayed in Malaysian ringgit in every market.

This trips up a lot of stores. Shopify does support multiple currencies. It just ties that feature to something not every country can use.

Here is what is actually going on, and the setup that works when the native option is off the table.

## Why Shopify will not show a second currency here

Shopify's built-in multi-currency is called presentment currencies. It shows and charges prices in the shopper's local currency, and it is part of Shopify Markets.

The catch is that presentment currencies only work with Shopify Payments. In a few regions Shopify Plus can use Adyen instead, but for most stores it is Shopify Payments or nothing.

Shopify Payments is not available in every country. Malaysia is one example. There are many others.

So if your country has no Shopify Payments, that native currency option is switched off. Markets can still do a few useful things, like sending visitors to the right region, translating your content, and setting different catalogs per market. What it cannot do is show or charge a second currency. Checkout stays in your one store currency.

That is not a bug and it is not something a setting will unlock. It is a platform limit.

## What Shopify Markets can still do for you

Even with the currency piece off, Shopify Markets is not useless in your country. It is worth turning on for what it does give you.

Markets can detect where a visitor is and send them to the right version of your store. It can serve translated content per region, so a French visitor reads French. It can run a separate catalog or product selection per market. And it can adjust prices per market by a percentage, so a region can be a little higher or lower.

None of that needs Shopify Payments. The only locked part is showing and charging a second currency.

So the sensible setup is Markets for the regional and language side, plus a converter app for the currency display. They sit together fine.

## The setup that works: a currency converter app

Since the native route is closed, the practical answer is a currency converter app.

A converter app does one job. It looks at where the visitor is, works out their local currency, and rewrites the prices on the page to that currency. It also adds a small currency switcher so shoppers can change it themselves.

The important word is display. The app changes what the shopper sees. It does not change what Shopify charges.

![A diagram showing a converter app changes the displayed price to the shopper's currency, while Shopify checkout still charges the store currency](/images/blog/shopify-multiple-currencies-without-shopify-payments/01-display-vs-checkout-currency.png)

So a shopper in Singapore browses your store and sees prices in Singapore dollars, which feels local and builds trust. At checkout the order is charged in your store currency, and their own bank does the real conversion on their card statement.

For a store without Shopify Payments, this is the normal and expected way to sell internationally. It is what most stores in that situation do.

## How to set it up with a converter app

The steps are the same across the popular apps. I will use GLC Geolocation and GEO Currency as the example, because a merchant I helped uses it, but BEST Currency Converter and Currency Converter Plus work the same way.

1. Install the app from the Shopify App Store. Most have a free tier that covers the basics.
2. Turn on automatic geolocation. This is what shows each visitor their local currency without them doing anything.
3. Choose the currencies you want to offer. Add the ones your real customers use. You do not need every currency in the world.
4. Add the currency switcher to your header or footer, so shoppers can change it by hand too. Most apps place this for you or give you a block to drop in.
5. Set your rounding. Converted prices come out messy, like 32.47. Rounding to a clean number, like 32 or 32.99, looks far more professional.
6. Save and preview your store from an incognito window to check the prices convert.

That is the whole setup. Once it is on, prices convert on their own for each visitor.

## Set expectations at checkout

This is the one thing to be clear about with yourself and, ideally, with your shoppers.

The converter changes the price on your product and cart pages. When the shopper reaches checkout, Shopify charges in your store currency, because that is the only currency your store can actually process.

Their bank then converts that amount at its own rate. The final figure on their statement will be close to what they saw, not exact to the cent.

Add a short line near the cart or checkout, something like "Prices shown in your local currency are an estimate. You will be charged in ringgit." It sets the right expectation and heads off confused emails.

None of this is unusual, and shoppers are used to it. It only becomes a problem if the difference is a surprise.

## When a custom price does not convert

Here is a snag that catches stores with any custom theme code or an app that draws its own price.

Converter apps find prices by looking for Shopify's price class, called money, and they usually run once when the page loads. A plain theme price sits in that class, so it gets converted.

But a custom price is different. A subscribe and one-time selector, a bundle widget, or any block that writes its own price with JavaScript often prints plain text with no money class, and writes it after the app has already run. The app never sees it, so that one price stays in your store currency while everything else converts.

The fix is to make the custom price a real money price, and to re-create it whenever it changes.

![Before and after code: find the plain textContent price line and replace it with a version wrapped in a money span](/images/blog/shopify-multiple-currencies-without-shopify-payments/02-money-class-code-edit.png)

In practice that means wrapping the value in a money span, so it becomes the same kind of element the converter already handles, and making sure it is written fresh each time the shopper changes an option. Then the converter treats it like any other price.

If yours still will not convert after that, the app may only convert on load and need a nudge after the price updates. Most converter apps expose a refresh function you can call for exactly this.

## Popular Shopify currency converter apps

If you are choosing one, these are the common picks, and all have a free tier to start:

- GLC Geolocation and GEO Currency
- BEST Currency Converter
- Currency Converter Plus
- Coin, by Roar

They all do display conversion and a switcher. Pick on the switcher style you like and whether the free tier covers your currencies.

## What you still cannot do without Shopify Payments

It is worth being honest about the ceiling here.

Without Shopify Payments you cannot actually charge in another currency, and you cannot offer the local payment methods that ride on top of it. A converter app does not change that. It is display only.

If charging in the real local currency matters to your business, the options are bigger moves. You can use a third-party payment gateway that supports multi-currency, where one is available for your country. Some sellers set up a business entity in a country where Shopify Payments is supported. Both are real projects, not a settings toggle.

For most stores, display conversion plus a clear checkout note is enough to sell across borders comfortably.

## Quick answers

**Can I show multiple currencies on Shopify without Shopify Payments?** Yes, for display, using a converter app. You cannot charge in a second currency without Shopify Payments.

**Does Shopify have a free currency converter built in?** The native one only works with Shopify Payments. Where that is unavailable, the free tiers of the converter apps above are the closest thing.

**Will customers be charged in their own currency?** No. Checkout charges your store currency, and their bank converts. The app only changes the displayed price.

**Why is one price not converting?** It is almost always a custom or app-drawn price that is not in the money class. See the code fix above.

That is the full picture. Native multi-currency is gated behind Shopify Payments, so where that is unavailable, a converter app gives your shoppers local prices, and a short checkout note keeps the charge itself clear.


---

---
title: "Add Multiple Tracking Numbers to One Shopify Order"
---

## The problem

You packed one order into two boxes. One box goes out with FedEx, the other with UPS. Now you open the order in Shopify to add the tracking, and you hit a wall: Shopify lets you type several tracking numbers, but it makes them all use the **same carrier**.

A merchant raised this on the Shopify Community. They wanted one fulfillment to hold multiple packages, each with its own tracking number, carrier, and tracking link. Their words: mixed-carrier multi-box orders force staff to "create separate fulfillments just to store carrier-specific tracking, which adds unnecessary admin work and increases fulfillment errors."

They are right about the limit. There is no single-fulfillment, multi-carrier option in Shopify today. But you can still ship a mixed-carrier order cleanly, get a correct tracking link on every box, and cut the manual work down. I reproduced the whole thing on a test store to show each step.

This guide covers both cases, because people land here wanting one of two different things:

- **Same carrier, several tracking numbers** (one order, three UPS boxes). This one is easy and built in.
- **Different carriers on one order** (one box FedEx, one box UPS). This one needs a split, and that is what the merchant above was asking about.

## Why it happens

The reason is in how Shopify models an order.

Under the hood, Shopify treats **one fulfillment as one shipment with one carrier**. A fulfillment is the record that says "these items left the warehouse, here is the tracking." That record has a single carrier field.

You can attach more than one tracking number to that record, but every tracking number on it inherits the same carrier. That is why the moment your second box uses a different carrier, a single fulfillment can no longer describe your order. You need a second fulfillment.

So the rule to remember is simple: **one carrier per fulfillment**. Same carrier, stay in one fulfillment. Different carriers, use one fulfillment per carrier.

## Case 1: same carrier, multiple tracking numbers

If all your boxes ship with the same carrier, you do not need to split anything.

- Open the order and click **Mark as fulfilled** (or **Add tracking** if it is already fulfilled).
- Enter the first tracking number and pick the carrier.
- Click **Add another tracking number** and enter the next one.
- Repeat for each box, then **Save**.

All the numbers sit on one fulfillment, share the one carrier, and the customer gets them together. This is the case Shopify handles natively, and it is what most "multiple tracking numbers" questions actually need.

The wall only appears when box two is on a different carrier. That is Case 2.

## Case 2: different carriers on one order

Here you split the order into one fulfillment per carrier. Each fulfillment then gets its own carrier and its own tracking. I tested this on a two-item order: a Black Leather Bag going FedEx, and a water fountain going UPS.

**Step 1. Start the first shipment.**

On the order, click **Mark as fulfilled**.

![A Shopify order with two unfulfilled items, ready to fulfill](/images/blog/shopify-multiple-tracking-numbers-one-order/01-order-two-unfulfilled-items.png)

**Step 2. Pick only the items for the first carrier.**

This is the step that does the whole job, and it is the one people miss. Untick the items that are going out on the other carrier, so only the first carrier's items stay selected. Then fulfil just those.

![Untick the items for the other carrier so only the first box is selected](/images/blog/shopify-multiple-tracking-numbers-one-order/02-tick-items-first-carrier.png)

**Step 3. Add the tracking and choose the carrier.**

On the new fulfillment, click **Add tracking**. Enter the tracking number, pick the carrier, and Save. Shopify even guesses the carrier from the tracking number format, so FedEx and UPS numbers usually fill themselves in.

![Enter the tracking number and choose the carrier for this box](/images/blog/shopify-multiple-tracking-numbers-one-order/03-add-tracking-choose-carrier.png)

**Step 4. Do the same for the rest.**

The items you left behind stay on the order as a second unfulfilled group. Fulfil those, click **Add tracking**, and this time pick the second carrier.

![One order with two shipments, each on its own carrier](/images/blog/shopify-multiple-tracking-numbers-one-order/04-two-shipments-two-carriers.jpeg)

You end with one order and two shipments. On my test store, one fulfillment showed **FedEx** tracking and the other showed **UPS** tracking, on the same order. Each box carries the correct carrier and a working tracking link, which is what you were after.

## The one tradeoff to know about

Splitting works, but it has a customer-facing cost that is easy to forget.

**Each fulfillment sends its own shipping confirmation email.** So a two-box order emails the customer twice, once when box one ships and again when box two ships. A three-carrier order emails them three times.

That is not always bad. Two boxes genuinely are two shipments, and a separate tracking link per box is often clearer for the buyer. But if you would rather the customer got a single notification, you have two choices:

- Hold off fulfilling until both boxes are ready, then fulfil them close together so the emails arrive back to back.
- Turn off the automatic shipping confirmation and send one combined update yourself. You can adjust the shipping notification under **Settings > Notifications**.

Decide which you want before you start clicking, because the emails go out the moment you save each fulfillment.

## Automate it if you ship multi-box often

Doing the split by hand is fine for the occasional order. If mixed-carrier boxes are your daily normal, an app removes the manual work entirely.

A multi-carrier shipping app such as **Shippo, ShipStation, EasyShip, or AfterShip** buys the labels, creates the per-carrier fulfillments for you, and writes each box's carrier and tracking back onto the Shopify order automatically. Your staff stop opening each order to type tracking by hand, which is exactly the admin overhead the original merchant was complaining about.

These apps also tend to give the customer a single branded tracking page that covers every box, which sidesteps the double-email problem above.

If you write your own integration, the same rule applies at the API level. One fulfillment takes one tracking company, so you create a separate fulfillment per carrier. Developers usually reach for the fulfillment order and fulfillment create operations in the Admin API, splitting the line items across carriers the same way the admin does.

## Can I add two tracking numbers to one Shopify order?

Yes. How you do it depends on the carriers.

- **Same carrier:** add both numbers to one fulfillment with **Add another tracking number**. This is fully native.
- **Different carriers:** create two fulfillments, one per carrier, each with its own tracking. There is no way to keep two carriers inside a single fulfillment.

Either way the order still shows as one order in your admin and to the customer. It is only the shipment records underneath that differ.

## Does the customer get both tracking links?

Yes. Every fulfillment that has tracking gives the customer a tracking link.

- With a same-carrier fulfillment, the numbers appear together.
- With split fulfillments, each shipment carries its own link, and the customer sees both on the order status page.

The order status page lists each shipment and its tracking, so the buyer can follow both boxes. The cost, again, is that each shipment also triggers its own email.

## Partial fulfillment is the same mechanism

If you have ever fulfilled only part of an order because the rest was on backorder, you have already used this. That is a **partial fulfillment**: some items ship now, the rest ship later, and each batch becomes its own fulfillment with its own tracking.

Mixed-carrier shipping is the same tool used on purpose. Instead of splitting by "what is in stock," you split by "which carrier." Shopify does not care why you split, only that each fulfillment ends up with one carrier.

## Fulfillment vs shipment vs tracking number

These three words get mixed up, and the confusion is what makes the limit feel worse than it is.

- A **tracking number** is one parcel's code from one carrier.
- A **fulfillment** is Shopify's record that a set of items shipped. It holds one carrier and one or more tracking numbers.
- A **shipment** is the physical box. In Shopify, one fulfillment usually maps to one shipment, but a same-carrier fulfillment can cover several boxes if they share the carrier.

The whole limitation is just this: a fulfillment holds one carrier. Everything else follows from that.

## What to check if it did not work

- **All tracking numbers turned into the same carrier.** That means they are on one fulfillment. To use two carriers you must split the items into two fulfillments first, then add tracking to each.
- **You cannot untick items at fulfillment.** Make sure you clicked **Mark as fulfilled** to open the item picker. The tick boxes appear there, one per line item.
- **The order already shows fully fulfilled.** If you fulfilled everything in one go by mistake, you can add tracking to that fulfillment, but you cannot retro-split it by carrier. In that case, cancel the fulfillment and redo it in parts.
- **The carrier did not auto-detect.** Shopify guesses from the number format and is not always right. Just pick the carrier from the dropdown by hand.
- **The tracking link points nowhere.** Confirm the carrier you chose matches the number. A UPS number under FedEx will build a dead link.

## The short version

Shopify allows one carrier per fulfillment. So:

- **Same carrier, many boxes:** one fulfillment, use **Add another tracking number**.
- **Different carriers:** at **Mark as fulfilled**, untick the other carrier's items and fulfil the rest, add that carrier's tracking, then repeat for the remaining items with the second carrier.

You get one order with two shipments, each on the right carrier with a working link. The only catch is a separate shipping email per shipment, so time them together or send one update yourself. And if you ship multi-box every day, a multi-carrier app does all of this for you and keeps the customer to a single notification.


---

---
title: Create a Nested Dropdown Menu in Shopify
description: Build a proper dropdown (nested) navigation menu in Shopify so top links reveal sub-links on hover or tap.
---

## The problem

A merchant asked about this on the Shopify Community. Her top menu had a link called Shop. Under Shop she had three sub-links: Scent Rituals, Layering Rituals, and Atmosphere Rituals.

She wanted a dropdown. Hover Shop on desktop, and the three sub-links should appear below it.

She had set the menu up correctly. But when she hovered over Shop, nothing showed. The dropdown looked empty or broken.

She was on the Savor theme, a free Shopify theme. She had already confirmed that a clean copy of Savor worked. So she assumed her theme code was the problem.

I reproduced it on a test store on the same theme. The menu was fine. The dropdown was fine. The links were even loading on hover. They were just invisible.

Here is what a "broken" Savor dropdown looked like on hover. The three links are there. You cannot see them.

![Savor dropdown open on hover but the three sub-links are invisible against the cream background](/images/blog/shopify-nested-dropdown-menu/01-dropdown-links-invisible.png)

This article covers two things. First, how to build a nested dropdown menu in Shopify from scratch. Second, the exact reason a nested menu can be set up right and still show nothing, plus the one-setting fix.

## Why it happens

A dropdown in Shopify is not a special feature you switch on. It is just a menu with nesting.

Nesting means a link that sits under another link. In Shopify, the parent link (like Shop) becomes the button. The links you drag under it become the dropdown items. Your theme reads that structure and draws the dropdown.

So there are two separate layers, and people confuse them:

- The menu structure. This lives in Content then Menus. It decides which links are parents and which are children.
- The theme rendering. This decides how the dropdown looks. Colors, spacing, hover, tap.

If the structure is wrong, you get flat links with no dropdown. If the structure is right but the colors are wrong, you get a dropdown that opens but shows nothing.

The merchant's case was the second one. Her nested menu was correct. Her theme was drawing the submenu. But in the theme editor, the submenu Text color was set to the same cream as the submenu Background color. Cream text on a cream background is invisible.

That is the mechanism most forum answers skip. They tell you to hunt through CSS for a `visibility: hidden` rule. On a clean, up-to-date free theme like Savor, the real cause is almost always a color setting, not broken code.

## First, build the nested menu

If your dropdown shows nothing, check the structure before you touch anything else. If you are starting fresh, this is the whole build.

A Shopify menu is a list of links. To make a dropdown, you put child links under a parent link.

Do this:

- From your admin, go to Content, then Menus.
- Click the menu that shows in your header. On most themes it is called Main menu.
- Click Add menu item to create your parent, for example Shop. Give it a name and a link. The link can point to a collection, a page, or even a placeholder.
- Click Add menu item again for each sub-link, for example Scent Rituals.
- Now drag each sub-link to the right, so it sits slightly indented under Shop. That indent is the nesting. It is what turns Shop into a dropdown.
- Click Save menu.

That indent is the entire trick. A link indented under a parent becomes a dropdown item. A link with nothing indented under it stays a plain top link.

Shopify allows up to three levels of nesting. So you can have a sub-link that itself has sub-links. More on that below.

## The fix for an invisible dropdown

If your nested menu is correct but the dropdown opens empty, the color is the cause. This is the fix I tested on the Savor store.

It is one setting in the theme editor. No code.

- Go to Online Store, then Themes, then click Customize.
- In the preview, click the Header at the top.
- In the left panel, under Header, click Menu.
- Open the Appearance section. On Savor it is labelled "Affects submenus on desktop and the main menu on mobile."
- Look at Background color and Text color. If they are the same value, that is your bug.

In the reproduced store both were set to `\#FDF6F0`, the same cream. So every submenu link was cream text on a cream panel.

![Savor Header Menu block Appearance panel showing Text color set to the same cream as Background color](/images/blog/shopify-nested-dropdown-menu/02-menu-text-color-setting.png)

Now fix it:

- Set Text color to a dark shade. A near-black works well on a light theme.
- Leave Background color as it is. You only need to change the Text color.
- Click Save.

That is the whole fix. Reopen the dropdown and the links come back.

![Savor dropdown after the fix, with the three sub-links now visible in dark text](/images/blog/shopify-nested-dropdown-menu/03-dropdown-links-visible.png)

I tested this on a Savor store. Cream Text color made the entire dropdown invisible. A dark Text color brought all three links back at once. Nothing else changed.

Two notes from the same test:

- The top links (Home, Shop) can still look fine even when the dropdown is invisible. On the home page they often use the transparent-header text color, which is a separate setting. So do not trust the top links as proof the submenu color is right.
- If you want the dropdown to sit on a solid, contrasting panel, give the Background color a color with contrast too. Text color and Background color are independent.

## An alternative: a solid dropdown panel

Some brands do not want a dark link on a pale panel. They want a bold panel, like a dark box with light text.

You can do that with the same two settings, reversed. Set the submenu Background color to a dark shade. Set the Text color to white or cream. Now the dropdown reads as a solid card that stands out from the page.

This is still no-code. It is the same Appearance block. The only rule that matters is contrast. As long as Text color and Background color are clearly different, the dropdown will be readable.

If your theme has no submenu color controls at all, you would fall back to a small piece of CSS in a custom section. But most current free themes, Savor included, expose these colors in the editor, so you rarely need code.

## How to add a dropdown menu in Shopify

This is the most common way people phrase it, so here is the short version in one place.

To add a dropdown menu in Shopify, you do not install anything. You nest links inside an existing menu.

- Content, then Menus.
- Open your Main menu.
- Add the parent link and the child links.
- Drag each child link to the right so it indents under the parent.
- Save.

Your theme turns that nesting into a Shopify menu dropdown automatically. The parent becomes the hover or tap target. The children become the dropdown list.

## How to make a nested menu inside a nested menu

A Shopify nested menu can go three levels deep. Level one is your top link. Level two is the dropdown. Level three is a group inside that dropdown, which most themes show as a mega menu column.

To build it:

- Create your top link, for example Shop.
- Indent your sub-links under it, for example Fragrance and Home.
- Then indent more links under Fragrance, for example Scent Rituals and Layering Rituals.

The second indent creates the third level. Themes handle level three differently. Some draw a wide mega menu with headings and columns. Some only support two levels and will ignore the third. Test it in your own theme before you rely on it.

## Why is my Shopify dropdown menu not showing

If your Shopify dropdown menu is not showing, work through these in order. This is the checklist I use.

- Check the nesting. Open Content, then Menus. The sub-links must be indented under the parent. A flat list gives no dropdown.
- Check the submenu color. This was the merchant's real cause. Header, Menu, Appearance. If Text color equals Background color, the links are there but invisible.
- Check that you saved both the menu and the theme editor. They are two separate saves.
- Check on desktop and mobile. Desktop uses hover. Mobile uses tap and often an arrow or plus icon. A dropdown can work on one and look off on the other.
- Only after all of that, look at custom code. If you added CSS or an app, temporarily remove it and test. On a clean free theme, code is rarely the cause.

## Does my Shopify theme support dropdown menus

Almost every modern Shopify theme supports a submenu on hover or tap. Free themes like Savor, Dawn, and the newer block themes all do.

What varies is depth and styling:

- Two levels (a top link plus one dropdown) is universal.
- Three levels (the mega menu) depends on the theme. Not all themes render the third level.
- Styling controls vary. Some themes give you submenu color, size, and font in the editor. Others give you very little and expect CSS.

So the feature is standard. The polish is theme by theme. If a nested menu is not appearing at all, it is far more likely a structure or color issue than a theme that cannot do dropdowns.

## If it did not work

If you did the fix and the dropdown is still wrong, check these.

- You changed the wrong color block. The Header has more than one color area. Make sure you are in the Menu block Appearance, not the header background or the announcement bar.
- You only changed one state. If your header is transparent over a banner, the top links and the submenu can use different color settings. Set both.
- You forgot to Save in the theme editor. A preview can show the change before it is saved. Refresh the live site to confirm.
- The links are indented under the wrong parent. Drag them out and back in under the correct parent, then save the menu.
- Browser cache. Hard refresh the storefront, or view it in a private window, to be sure you are seeing the saved version.

## Definitions people confuse

A few terms get mixed up in these threads, so here is plain language for each.

- Menu. The list of links in Content, then Menus. It is data, not design. One store can have several menus.
- Nested menu, submenu, dropdown. These describe the same thing from different angles. A Shopify nested menu is a menu with indented child links. A submenu is that group of child links. A dropdown is how the theme reveals the submenu on hover or tap. So a Shopify submenu and a Shopify menu dropdown are the same links, just named after the structure or the behavior.
- Mega menu. A large, multi-column dropdown, usually built from the third level of nesting. It is still just a nested menu underneath.
- Text color versus Background color. Two independent submenu settings in the theme editor. The dropdown is only readable when they contrast. Matching them is exactly what made the merchant's links vanish.

Build the nesting first, give the submenu contrast second, and the dropdown behaves.


---

---
title: "Make a Shopify Numbered List Start From Any Number"
---

## Why a Shopify numbered list always starts at 1

You add a numbered list to a page. It runs 1, 2, 3. Lower down you add a second list, and you want it to carry on at 4, 5, 6. It starts again at 1.

A merchant hit exactly this on the Shopify Community. They wanted their second list to begin at 4, tried adding some code to fix it, and got a JSON error instead.

The numbered-list button in the text editor cannot set a starting number. It only makes a plain list, and every new list it makes begins at 1. There is no field for "start at 4".

The starting number lives in one small piece of the page's HTML. HTML is the code a web page is built from. A numbered list in HTML looks like this:

```
<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
```

`<ol>` means ordered list, which is the numbered kind. Each `<li>` is one list item, one line. To make the list start at 4, you add `start="4"` to the opening `<ol>` tag:

```
<ol start="4">
  <li>Fourth item</li>
  <li>Fifth item</li>
</ol>
```

`start="4"` is called an attribute. It is a setting attached to the tag. The text editor's list button never writes it, so you add it yourself.

The merchant's JSON error came from putting this in the wrong place. They edited the theme's code files, and those files are JSON, so raw HTML breaks them. You do not touch the theme code for this. You edit the page's own HTML.

## Change the numbered list on a normal page

Most pages you write, like an About or a guide, live under Online Store, then Pages. That editor has an HTML view built in.

Below, the second list restarts at 1. That is the thing to fix.

![A Shopify page where the second numbered list restarts at 1 instead of continuing at 4](/images/blog/shopify-numbered-list-start-number/01-numbered-list-restarts-at-1.png)

Open the page in the admin. Go to Online Store, then Pages, and click the page you want.

In the Content box there is a toolbar. At the far right of it is a **`< >`** button. That is the HTML view. Click it.

![The Content box toolbar on a Shopify page, with the code button highlighted](/images/blog/shopify-numbered-list-start-number/02-shopify-page-code-button.png)

The box now shows your page as HTML. Find your second list. It begins with `<ol>`. Change that one tag to `<ol start="4">`. Leave everything else as it is.

![The page HTML with start equals 4 added to the second ordered list tag](/images/blog/shopify-numbered-list-start-number/03-add-ol-start-attribute.png)

Click **Save**.

![The Shopify page editor showing the second numbered list now starting at 4](/images/blog/shopify-numbered-list-start-number/04-numbered-list-starts-at-4.png)

I reproduced this on a test store. Before the edit the second list read 1, 2. After it read 4, 5, and the live page matched.

While you are still in the editor, the visual preview may keep showing the list starting at 1. That preview does not read the `start` value. Save the page and open it on your storefront, and the real page shows 4. I edited the list again afterwards and saved a second time, and the 4 held, so the setting sticks.

## When the list is inside a theme section

Some pages are built in the theme editor instead. You reach it from Online Store, then Themes, then Customize. There you stack sections down the page, and a section might have a text box where you typed your list.

That kind of text box strips the starting number out. It only keeps plain formatting, so `start="4"` is removed the moment you save. The `< >` trick above does not apply, because there is no page HTML view to open.

For that setup, use a Custom Liquid section. Liquid is the code Shopify themes are built from, and a Custom Liquid section is a box in the theme editor where you paste raw code. It keeps your HTML exactly as written.

In the theme editor, add a new section and pick Custom Liquid from the list. Paste your list into its box, with the start number on the `<ol>` tag, and save. Paste code like this:

```
<ol start="4">
  <li>Fourth item</li>
  <li>Fifth item</li>
</ol>
```

The Custom Liquid section renders that list starting at 4. A community reply suggested this route, and it works. The page-HTML method above is quicker when your list sits on a normal page, so try that one first.

## Continue one long list across several blocks

The reason people want a start number is usually a single list broken into parts. Steps 1 to 3 sit above an image or a note, and steps 4 to 6 sit below it.

There is no automatic way to make a second list "know" where the first one ended. You set the number yourself with `start`. If the first list has three items, the second one gets `start="4"`. If you later add an item to the first list, update the second list's start to match.

For a short, fixed set of steps this is fine. If your list changes often and you dread re-counting, keep all the steps in one `<ol>` and put your image or note between two `<li>` items instead of splitting into two lists. One list never loses count.

## Set a single item to a specific number

Sometimes you do not want the whole list renumbered, just one line jumped to a value. A list that should read 1, 2, then 7, 8 for example.

Each `<li>` can carry its own `value`. Put it on the item where the jump happens:

```
<ol>
  <li>One</li>
  <li>Two</li>
  <li value="7">Seven</li>
  <li>Eight</li>
</ol>
```

The list counts 1, 2, then picks up at 7 and continues 8. `start` on the `<ol>` sets where the whole list begins. `value` on an `<li>` overrides a single line from that point on. Use whichever fits.

## The same fix on blog posts and product descriptions

Pages are not the only place this comes up. A blog post and a product description use the same text editor, with the same `< >` button in the corner of the toolbar.

So the method carries across. To start a numbered list at 4 in a blog post, go to Online Store, then Blog posts, open the post, click `< >`, and change your `<ol>` to `<ol start="4">`. For a product, open the product in the admin, click `< >` above the Description box, and do the same.

The behaviour is identical in all three. The editor preview may still show 1 while you type, and the saved, live version shows 4. If you ever move a description into a theme section or a block added by an app, the plain-text stripping returns, and the Custom Liquid route is the fallback again.

One place it does not reach is a list Shopify builds for you from data, like the steps an app prints or a table pulled from your products. Those are generated, not typed, so there is no HTML box for you to edit. Changing their numbering means a setting in that app, not this edit.

## If the number still shows as 1

A few things to check when the fix does not seem to take.

**You are looking at the editor preview, not the live page.** The Pages editor preview ignores `start`. Open the page on your actual storefront to see the real number.

**The `start` went on the wrong list.** Every `<ol>` counts on its own. Make sure `start="4"` is on the second list's opening tag, not the first.

**Your list is inside a theme section after all.** If the text box you typed into is in Online Store, Themes, Customize, it will strip the number. Move that list to a Custom Liquid section as described above.

**The quote marks got changed.** Copying code from a document can turn straight quotes into curly ones, and `start=“4”` with curly quotes is ignored. Retype the quotes in the editor so they read `start="4"`.

## Ordered list, unordered list, and the start number

Two quick distinctions that come up when people search for this.

An ordered list is `<ol>`, the numbered kind. An unordered list is `<ul>`, the bulleted kind. Only `<ol>` counts, so `start` and `value` only do anything on an ordered list. A bulleted list has no numbers to change.

The list button in the toolbar has both. One makes numbers, one makes bullets. If your list shows bullets and you wanted numbers, switch it to the numbered one first, then add `start` in the HTML view.

The `start` attribute is plain HTML that every browser has supported for years. It is not a Shopify feature you enable, and it is not something an app is needed for. It is one small edit in the code your page already has.

## Recap

A Shopify numbered list restarts at 1 because the toolbar button cannot set a starting number. The number lives in the page HTML.

On a normal page, click the `< >` button in the Content toolbar and change `<ol>` to `<ol start="4">`. Inside a theme section, paste the same into a Custom Liquid section. To jump a single line, use `<li value="7">`.

I tested all of this on a Dawn store, and the second list rendered from 4 on the live page.


---

---
title: "Shopify Order Confirmation Email: Logo by Location"
description: "A merchant wanted a different brand logo on the order email for each POS location. The location logic came back blank in the Order confirmation email. Here is why, and the template that actually works, with screenshots."
---

## The problem

A merchant asked about this on the Shopify Community, and it is a common one for anyone running more than one brand from a single Shopify store.

They sell in person with Shopify POS across several locations. Two of those locations are different brands. One is BAGGU, one is CORKCICLE. They wanted the logo at the top of the customer's order email to match the brand of the store where the purchase happened.

So a customer who buys at the BAGGU counter should get an email with the BAGGU logo. A customer at a CORKCICLE store should get the CORKCICLE logo. One store, one email template, but a logo that changes based on the physical location.

That is a reasonable thing to want, and Shopify Support told them it was possible with a bit of Liquid. Liquid is the small template language Shopify uses inside email notifications and themes. You can add simple "if this, show that" logic to it.

So the merchant edited their **Order confirmation** email and added this:

```
{% if location.name == "Baggu Ashta District 8" %}
  <img src="BAGGU_LOGO_URL" alt="BAGGU" width="{{ shop.email_logo_width }}">
{% else %}
  <img src="CORKCICLE_LOGO_URL" alt="CORKCICLE" width="{{ shop.email_logo_width }}">
{% endif %}
```

The template saved fine. But when they placed a real test order at the BAGGU counter, the email still showed the CORKCICLE logo. The condition never matched.

They then tested the values directly. They printed `location.name`, `location.id`, and `order.location.name` into the email. All three came back blank on a real POS order. Every path they tried returned nothing.

If you have hit this, you have almost certainly reached the same dead end. You are not guessing the wrong variable name. The variable is empty in that email, and here is why.

## Why the location is always blank

There are two separate things going on, and both point to the same fix.

**First, a POS sale does not send the Order confirmation email.**

When a customer buys something in person and asks for a receipt, Shopify does not send them the standard online Order confirmation. It sends a different notification called **POS and mobile receipt**. That is a separate template with its own code. So any change you make to the Order confirmation email never runs for an in-person sale.

![The Order confirmation notification is for online orders only, so POS edits to it never run](/images/blog/shopify-order-confirmation-email-location-logo/01-order-confirmation-online-only.png)

**Second, `location` is a POS-only variable.**

Shopify only fills in the `location` object on POS notifications, like the POS receipt. On the online Order confirmation email there is no physical location, because online orders do not have one. So `location.name` and `location.id` have nothing to read, and they render blank.

Put those two facts together and the whole picture makes sense. The merchant was editing the online email, where the location is always empty, for a sale type that does not even use that email. Both problems have the same answer: use the POS receipt template instead.

## Which email does your POS customer actually get?

Before you change any code, it helps to know the templates involved. Open **Settings > Notifications > Customer notifications** in your Shopify admin.

You will see the emails grouped into sections. Two of them matter here.

- **Order confirmation**, under Order processing. This says "Sent when a customer places an order." This is the online checkout email. This is the one the merchant was editing.
- **POS and mobile receipt**, under Point of Sale. This says "Sent when a customer places an in-person order and requests a receipt." This is the email your in-person customers actually get.

![The POS and mobile receipt notification is the email in-person customers get](/images/blog/shopify-order-confirmation-email-location-logo/02-pos-and-mobile-receipt.png)

That description is the key. If the sale happened at the register and the customer chose an email receipt, the email came from **POS and mobile receipt**, not Order confirmation.

## The fix: move the code to the POS receipt template

The logic the merchant wrote is correct. It just needs to live in the right template, where the location is actually filled in.

Here are the steps.

**1. Open the POS receipt template.**

Go to **Settings > Notifications > Customer notifications**. Scroll to **Point of Sale** and open **POS and mobile receipt**. Do not open Order confirmation.

**2. Find the logo block.**

In the Email body, look near the top for the logo. The quickest way is to search the code for `shop.email_logo_url`. You will find a block that looks like this:

```
{%- if shop.email_logo_url %}
  <img src="{{ shop.email_logo_url }}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
  <h1 class="shop-name__text">{{ shop.name }}</h1>
{%- endif %}
```

This is the default logo. It shows your one store logo on every receipt.

![Find the logo block in the POS receipt template and replace it](/images/blog/shopify-order-confirmation-email-location-logo/03-find-logo-block.png)

**3. Replace that whole block with your own condition.**

```
{% if location.id == 123456789 %}
  <img src="YOUR_BAGGU_LOGO_URL" alt="BAGGU" width="{{ shop.email_logo_width }}">
{% else %}
  <img src="YOUR_CORKCICLE_LOGO_URL" alt="CORKCICLE" width="{{ shop.email_logo_width }}">
{% endif %}
```

Keep your own logo image URLs in the two `src` slots. Then click **Save**.

**4. Get your location ID.**

Go to **Settings > Locations** and open the location you want to match, for example Baggu Ashta District 8. Look at the address bar. The number at the end of the URL, after `/locations/`, is that location's ID. Copy it and use it in place of `123456789`.

![Open a location and the number at the end of its URL is the location ID](/images/blog/shopify-order-confirmation-email-location-logo/04-location-id.png)

That is the whole change. On my test store, the POS receipt renders from the POS and mobile receipt template, and the `location` object is filled in there. That is exactly why the same code was blank when it sat in the Order confirmation email.

## Match by ID, not by name

The merchant's original code matched on the location name. Once the code is in the POS receipt template, that will actually work, because `location.name` is filled in there too:

```
{% if location.name == "Baggu Ashta District 8" %}
```

But matching on the ID is safer. A location name can be renamed later, in one click, by anyone with admin access. The moment someone edits "Baggu Ashta District 8" to "BAGGU Ashta", every name match breaks with no error and the logo flips back to the else branch. The ID never changes. So prefer the ID and use the name only if you cannot find the ID quickly.

## More than two locations

The same pattern extends to any number of brands. Chain the conditions with `elsif`:

```
{% if location.id == 111111111 %}
  <img src="BAGGU_LOGO_URL" alt="BAGGU" width="{{ shop.email_logo_width }}">
{% elsif location.id == 222222222 %}
  <img src="CORKCICLE_LOGO_URL" alt="CORKCICLE" width="{{ shop.email_logo_width }}">
{% else %}
  <img src="{{ shop.email_logo_url }}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{% endif %}
```

The final `else` is your safety net. If a sale comes from a location you have not listed, the customer still gets your default store logo rather than a broken image.

## Why is the location blank in my Shopify order confirmation email?

Because the Order confirmation email is the online checkout email, and online orders do not have a physical location. The `location` object is only filled in on POS notifications. If you print `location.name` in the Order confirmation email you will always get a blank, even on a POS order, because a POS order does not use that email in the first place. This is not a bug and it is not the wrong variable name. It is the wrong template.

## Does a Shopify POS order send an order confirmation email?

No. When a customer buys in person and asks for a receipt, Shopify sends the POS and mobile receipt, not the standard Order confirmation. That is why editing the Order confirmation email has no effect on your in-person sales. If you want to change what your POS customers receive, you edit **POS and mobile receipt** under the Point of Sale section of your customer notifications.

## How do I add a logo to my Shopify order confirmation email?

For a single logo across all emails, you do not touch the code at all. Go to **Settings > Notifications**, open **Customize email templates**, and set your logo there. Every notification, including the order confirmation, then shows `shop.email_logo_url` automatically. You only need Liquid, like the code above, when you want the logo to change based on something, such as the POS location.

## Can I have different email logos for different Shopify locations?

Yes, for POS sales, using the method in this article. You put an `if` condition on `location.id` inside the POS and mobile receipt template. You cannot do it for online orders this way, because an online order has no single physical location tied to it. If your brands are truly separate businesses, at some point running them as separate Shopify stores becomes cleaner than branching one template. But for a shared catalog with multiple in-person counters, the per-location POS receipt is the simplest working answer.

## What if it still shows the wrong logo?

A few things to check.

- **You are editing the right template.** Confirm the code is in POS and mobile receipt, not Order confirmation. This is the most common miss.
- **The location ID is correct.** Open the location and re-copy the number from the end of the URL. A single wrong digit sends every receipt to the else branch.
- **The image URLs load.** Paste each logo URL into a browser tab. If it does not open there, it will not show in the email either. Use the full public URL of the image, including `https://`.
- **You tested with a real POS receipt.** The email or text receipt the customer requests at checkout is the one that uses this template. The admin preview uses sample data and may not carry a location.

## The three receipts, and which is which

It is easy to mix these up, so here is the plain version.

- **Order confirmation** is the email for online store orders. It has no POS location.
- **POS and mobile receipt** is the email or text a customer requests after an in-person sale. This is where the `location` object works, and where the logo code belongs.
- **The printed receipt** is the paper slip from the receipt printer. That is set separately, inside your POS settings, and is not affected by any of the code above.

Change the email, and only the emailed and texted receipt updates. The printed slip and the online order confirmation are left alone, which is usually exactly what you want.

This came from a real question on the Shopify Community. The merchant had good code and had even confirmed the values were blank. The only thing wrong was the template it lived in. Move it to the POS and mobile receipt, match on the location ID, and the right brand logo shows up on the right receipt.


---

---
title: "Shopify Order Edits Don't Sync to Printify: The Fix"
---

## The problem: you edit the order in Shopify, and Printify never sees it

A customer messages you right after buying. Wrong size. Wrong address. Wrong color. You open the order in your Shopify admin, hit **Edit order**, fix it, and save. Shopify shows the order as updated. Job done, or so it looks.

It is not done. Printify still has the original order. The edit you just made lives only inside Shopify, and Printify keeps working from the version it imported first. Nothing warns you. The order looks resolved on the Shopify side and ships wrong.

A merchant raised exactly this on the Shopify Community. They edited an order in the admin, assumed it was fixed, and got this back from Printify support: changes made to an order in your sales channel do not sync to Printify, even if the order has not been imported yet. If you need to change the ordered product, do it in Printify before it goes into production.

They were right, and so was Printify. The real gap is that Shopify gives you no warning. It lets you edit the order, shows success, and never says "this will not reach your print provider."

I reproduced the setup on a test store and built the missing warning with a free Shopify tool. Here is what is actually happening and how to stop an unflagged mismatch from shipping.

## Why the edit does not sync

Printify is a sales-channel app. When an order comes in, Printify imports a copy of it into its own system. From that moment, Printify's copy is what gets produced and shipped.

Shopify's **Edit order** feature changes the order record inside Shopify. It does not push that change out to connected apps. There is no live two-way sync between a Shopify order and the imported Printify order. So editing on the Shopify side and editing on the Printify side are two separate actions, and doing one does nothing to the other.

This is the part that trips people up: the order can be sitting in Printify, not yet in production, looking editable, and your Shopify edit still will not appear there. "Not imported yet" does not mean "still linked to Shopify." Once Printify has the order, Shopify is no longer the source of truth for it.

That is why the fix is not "make Shopify sync." Shopify does not offer that for this case. The fix is to change your process so an un-synced edit can never slip through, and to build yourself the warning Shopify leaves out.

## Step 1: turn on manual approval in Printify (the important one)

This is the single change that closes the hole. Do this first.

In Printify, open **Settings > Orders** and set your orders to **hold for manual approval**. Turn off auto-send to production.

Now orders wait for you to approve them instead of going straight to the printer. Nothing prints until you press approve. So even if you forget to mirror an edit, the order pauses and gives you a chance to catch it. An unmirrored Shopify edit can no longer reach production on its own.

Yes, it adds a click per order. That click is the price of never shipping a wrong item because two systems disagreed. For most print-on-demand shops it is worth it.

## Step 2: make the change where Printify actually reads it

Once manual approval is on, put the correction in Printify, because that is the copy that ships.

- Open Printify and go to **My orders**.
- Find the order and edit the address or variant there directly.
- If Printify will not let you edit that product or variant inline, cancel the order in Printify and submit a fresh **manual order** with the correct item.
- If you already edited it on the Shopify side too, mirror the exact same change in Printify so the two records match.

Treat Printify as the source of truth for anything that affects what gets printed. Shopify holds the customer record; Printify holds the production record. Change the production record where production reads it.

## Step 3: build the missing warning yourself with Shopify Flow

Shopify will not pop up a warning when you edit an order. But you can build your own catch-net for free with **Shopify Flow**, the automation app Shopify includes on the Basic plan and up.

There is one honest limit to know first. Shopify Flow has **no "order edited" trigger** built in. So it cannot fire the instant you edit an order. You cannot get a real-time popup from Flow alone.

What Flow can do on its own is a daily sweep. Three steps:

- **Scheduled time** trigger, set to run once a day.
- **Get order data**, set to pull orders updated in the last day.
- **Send internal email** to yourself, listing those orders.

Every morning you get one email of the orders that changed in the last 24 hours. You open each one, check it against Printify, and fix any mismatch before you approve it. It is not instant, but paired with the manual-approval hold from Step 1, it is a reliable safety net.

![Shopify Flow daily digest: Scheduled time, then Get order data for orders updated in the last day, then Send internal email to re-check them in Printify](/images/blog/shopify-order-edit-not-syncing-printify/01-shopify-flow-daily-digest-edited-orders.png)

I built and tested this exact workflow on a dev store. Scheduled time set to daily, then Get order data for orders updated in the last day, then Send internal email with a subject like "Orders edited in the last day - re-check them in Printify." It runs on its own from then on.

To build it: open **Settings > Apps > Shopify Flow** (install it from the App Store first if you do not have it), click **Create workflow**, pick **Scheduled time** as the trigger, add a **Get order data** action, then add a **Send internal email** action. Turn the workflow on when you are happy with it.

## Want the warning to be instant instead of a daily digest?

The daily email is fine for most shops. If you want to know the moment an order changes, you need to give Flow a trigger it does not ship with.

Some apps add a real **order-edited** trigger to Shopify Flow. Once installed, that trigger fires when an order is edited, and your Flow can email you, tag the order, or ping Slack immediately, no waiting for the next morning's sweep.

Two that do this are **Cleverific Order Editing** and **Flow Companion**. They work by listening for Shopify's order-edited event behind the scenes and handing it to Flow as a new trigger you can build on. That is the same event Shopify has internally but does not expose in Flow by default.

If instant matters for your volume, an app like that plus the manual-approval hold gives you both belt and braces: you hear about the edit right away, and the order still cannot print until you approve it.

## If the order already went into production

If the order has already moved into production in Printify, it cannot be changed. That window has closed.

Contact Printify support immediately. If it is early enough they can sometimes stop it. If they cannot, it ships as originally ordered, and you reprint the corrected version. This is the exact case Step 1 exists to prevent, which is why the manual-approval hold is worth the extra click.

## This is not only a Printify problem

It is easy to read this as a Printify quirk. It is not. Printful, Gelato, and most print-on-demand and dropshipping apps work the same way. They import the order, then produce from their own copy. A sales-channel order edit in Shopify does not push to any of them.

So the rule generalizes. For any fulfillment app connected to your store, treat the app as the source of truth for changes to its orders. Edit in the app, not just in Shopify. The manual-approval hold and the daily Flow digest work the same way whichever provider you use, because the underlying gap is the same.

## Why Shopify does not just add the warning

Merchants keep asking why Shopify does not simply show a message like "this change will not sync with your fulfillment app." It is a fair question, and another community member in the same thread suggested exactly that wording.

The honest answer is that Shopify cannot reliably know what each connected app does with an order. Some apps sync edits, some do not, and Shopify's Edit order feature is generic. A blanket warning on every edit would be wrong half the time. The gap is real, and it is worth leaving as feedback for Shopify, but until they build it, the manual-approval hold is what actually protects you.

## Quick checklist

- Turn on **hold for manual approval** in Printify Settings > Orders. This is the fix.
- Make the real correction in **Printify > My orders**, not only in Shopify.
- Build a **daily Shopify Flow digest** of edited orders so nothing slips past you.
- Want it instant? Add an app that gives Flow a real order-edited trigger.
- Already in production? Contact Printify support fast, then reprint if needed.
- Same rules apply to Printful, Gelato, and other fulfillment apps.

The takeaway: Shopify order edits stop at Shopify. Make the change where your print provider reads it, hold orders for approval so a missed edit cannot ship, and let Shopify Flow email you a daily list of what changed. That combination gives you the warning Shopify does not.


---

---
title: "Shopify Order Invoice Email: Fix the Invoice Number"
description: "Shopify's Send invoice email labels itself Invoice #1143 using the order number, which clashes with the VAT invoice number. Here is why, and how to rename it, with screenshots."
---

## The problem

A merchant asked about this on the Shopify Community, and it is a genuinely confusing one for anyone selling business to business.

They run a made to order B2B store. Customers are on payment terms, so they do not pay when they order. They pay on dispatch. The merchant sends a payment request at that point.

Here is the clash. For a single order, Shopify produced two things that both call themselves an "invoice", each with a different number.

When the order is placed, Shopify auto-generates a VAT invoice with its own sequential number, something like **INV-GB-138**. That is the document the customer sees in their account.

Then, when the merchant clicks **Send invoice** (or **Resend invoice**) to request payment, the email that goes out is labelled **Invoice #1143**. But 1143 is the order number, not an invoice number. That label shows in both the email subject and the email body.

So the customer gets one email referencing "Invoice 1143" and sees another document in their account referencing "INV-GB-138", for the same order. It looks like two separate invoices with two separate numbers.

![The Shopify Order invoice email today, where the subject and heading both show the order number, not the VAT number](/images/blog/shopify-order-invoice-email-number/01-order-invoice-email-shows-order-number.png)

I reproduced this on a test store and confirmed exactly where every number comes from. The good news is that the email is fully editable, and the fix takes about a minute.

## Why the email says "Invoice #1143"

Let me explain the mechanism, because it tells you why you cannot simply swap in the VAT number.

Shopify has two separate systems here, and they do not talk to each other.

The first is the **native VAT invoice**. Shopify generates this automatically at order placement for stores in regions that require it, and gives it a sequential tax number like INV-GB-138. This is the real tax document, and it is the one shown to the customer in their account.

The second is the **Order invoice email**. This is a customer notification. It is the email your Send invoice and Resend invoice buttons send, and its whole job is to give the customer a "pay now" link for an order with an outstanding balance.

That email is built from a template. And in the default template, the word "Invoice" is followed by the **order number**, not the VAT number. Two spots do this:

The **subject** is `Invoice {{name}}`. The `{{name}}` variable prints the order name, so it renders "Invoice #1143".

The **body heading** is `Invoice {{ order_name }}`. Same idea, `{{ order_name }}` is the order name, so the big heading at the top of the email renders "INVOICE #1143".

Nothing is broken. The email is simply using your order number and calling it an invoice. That is what creates the appearance of a second, differently numbered invoice.

## It is theme text you can edit, not a fixed template

One of the merchant's questions was whether the payment request email is editable at all, or whether it is locked.

It is editable. Both the subject and the full HTML body can be changed. It lives in your store settings, not in any app, and you do not need code skills beyond finding and changing a couple of words.

Here is where it is. Go to **Settings**, then **Notifications**, then **Customer notifications**. Scroll to the **Order exceptions** group and open **Order invoice**. Its description reads "Sent when an order has an outstanding balance", which is exactly the payment terms situation.

![The Order invoice notification under Order exceptions in Shopify customer notifications](/images/blog/shopify-order-invoice-email-number/02-find-order-invoice-notification.png)

Open it, then click **Edit code**. That gives you the email subject field and the HTML body.

## The fix: rename it from Invoice to Payment request

The cleanest fix is to stop calling this email an invoice at all. Then it no longer competes with your VAT invoice, and the two documents each have one clear job.

You will change two things.

**Email subject.** Change `Invoice {{name}}` to `Payment request for order {{name}}`. Keep the `{{name}}` variable so the order number still appears.

**Email body.** In the body code, find the heading line `Invoice {{ order_name }}`. It is the big "INVOICE #..." near the top of the email. Change the word `Invoice` to `Payment request`. Keep `{{ order_name }}` in place.

![The two edits in the Order invoice template, the subject field and the body heading](/images/blog/shopify-order-invoice-email-number/03-edit-subject-and-body-heading.png)

Save, then use **Preview** or **Send test** to check it. The email will now read "Payment request for order #1143" in the subject and "Payment request #1143" as the heading.

Keep the order number in there. It is the reference the customer quotes when they pay, and it is how your own team matches the payment back to the order. You are not removing the number. You are only removing the word "Invoice" so the email stops posing as a tax invoice.

## Can I put the VAT invoice number (INV-GB-138) in the email instead?

This was the merchant's main hope: align the payment email with the actual VAT number so both documents match.

The short answer is no, and it is worth knowing why so you do not spend time hunting for a setting that does not exist.

The Order invoice email exposes a fixed set of Liquid variables, and they cover the order: its name, its line items, its totals, the customer, the payment terms. The **VAT invoice number is not one of them**. There is no variable that prints INV-GB-138 in this email, so there is no way to auto-insert it.

That is the reason the recommended fix is to relabel the email rather than renumber it. You cannot make the payment request carry the VAT number, but you can make it stop claiming to be an invoice. Once it is a "payment request", the number mismatch stops mattering, because only one of the two documents is now an invoice.

## The recommended B2B setup

Putting it together, here is a clean setup for a store that invoices on dispatch under payment terms.

**Treat the native VAT invoice as your single tax invoice.** INV-GB-138 is the customer-facing tax document in their account, and it is the one your accountant works from. Let it be the only thing called an invoice.

**Use the relabelled Order invoice email purely as the pay-now request.** After the rename above, it is a payment request that links to checkout for the outstanding balance. It references the order number so both sides can match it.

**Lean on native B2B payment terms.** The "Due on fulfillment" term matches a dispatch trigger nicely, since the balance becomes due exactly when you fulfil. Shopify also has a **Payment reminder** notification, described as "Sent on or after the due date for an unpaid order", which covers anything overdue without you chasing it manually.

The net result is one number the customer sees on the payment request, which is the order number, and one invoice number, which is the VAT number. No more two-invoices confusion.

One thing worth a quick word with your accountant: Shopify generates that VAT invoice at order placement, not at dispatch. If your tax point is dispatch, confirm that the placement-time invoice still matches what you are required to issue.

## Can I change the Shopify invoice number itself?

People often reach this problem while trying to change "the invoice number" directly, so it helps to separate what is and is not editable.

The **VAT invoice number** (INV-GB-138) is generated by Shopify and is not freely editable. It is sequential by design, because tax invoices are meant to be.

The **order number** (#1143) can be styled a little. Under **Settings**, then **General**, you can set an order ID **prefix** and **suffix**, for example turning #1143 into "INV-1143" or "1143-EU". You cannot set the starting number or the increment, and you cannot make it non-sequential.

So if your goal was really "make the payment email use a proper invoice number", the honest position is that Shopify does not let you renumber the payment email to match the VAT invoice. Relabelling it, as above, is the supported way to remove the confusion.

## Order invoice, Draft order invoice, and VAT invoice: the three documents

A lot of the confusion here comes from three different Shopify things sharing the word "invoice". Sorting them out helps.

**Order invoice** is the customer notification this article is about. It is the payment request email for a live order that has an outstanding balance. Editable under Settings, Notifications, Customer notifications.

**Draft order invoice** is a separate notification, sent when you create an invoice from the **draft orders** page, before the order is a real order. It is a different template with its own text, so do not edit this one expecting the payment email to change.

**VAT invoice** (or tax invoice) is the compliant PDF Shopify auto-generates for the order. It carries the INV-GB-138 style number and is the actual tax document. It is not a notification template and is not edited in the same place.

When something looks wrong, decide which of the three you are actually looking at first. It points you straight at the right screen.

## What to check if the email still says Invoice

If you renamed it and a test still shows "Invoice", run through these.

You edited a different notification. Make sure you were in **Order invoice** under Order exceptions, not **Draft order invoice** under Order processing.

You changed only one of the two spots. Both the subject and the body heading carry the label. Change both.

You are looking at the VAT PDF, not the email. The PDF in the customer account still says invoice, correctly, because it is the invoice. Only the email needed relabelling.

You saved but tested an old email. Re-send a fresh test after saving, since a previously sent email keeps its old wording.

## Prefer a proper branded invoice instead?

If your goal is not just to remove the clash but to hand customers a branded PDF invoice with your own sequential numbering, that is an app job rather than a settings change.

Invoicing apps like **Sufio**, **Order Printer Pro**, and **F+2: Invoices** generate branded PDF invoices with configurable numbering, and can attach or email them automatically. They sit alongside the native VAT invoice rather than replacing it, and they give you the control over invoice numbering that the built-in email does not.

For a store that just needs the payment email to stop calling itself an invoice, though, the two-word rename above is all it takes, and it is free.

## The short version

Shopify's Send invoice email is the **Order invoice** notification. It labels itself "Invoice #1143" because it prints your order number, not the native VAT invoice number, and there is no variable to swap the VAT number in.

Open Settings, Notifications, Customer notifications, Order invoice, Edit code. Change the subject from `Invoice {{name}}` to `Payment request for order {{name}}`, and change the body heading `Invoice {{ order_name }}` to `Payment request {{ order_name }}`. Save.

I reproduced this on a store running the native Order invoice template, and confirmed the default subject `Invoice {{name}}` and body heading `Invoice {{ order_name }}` are both editable, with no VAT-invoice-number variable available in that email.


---

---
title: Send Shopify Order Notifications to a Shared Team Inbox
description: Some Shopify payment notifications go to the store owner's address and nowhere else, and no notification setting changes that. A three-step Flow workflow routes them wherever you want.
---

## The problem

A merchant on the Shopify Community had a specific, very ordinary request. When they edit an order and send an additional invoice, and the customer pays it, the payment notification email goes to the **store owner's personal address**. They wanted it in their shared team inbox instead.

They had already done the obvious things:

- Changed **Settings > General > Store contact email** to the team mailbox
- Added the team address under **Settings > Notifications > Staff notifications**

Neither worked. The email kept arriving at the owner's address only.

The replies concluded that this particular notification is tied to the store owner, cannot be reconfigured, and that an email forwarding rule from the owner's inbox is the only workaround.

Forwarding works, but it means the routing lives in one person's mailbox. When that person leaves, or turns off the rule, the team stops, with nothing to flag it hearing about payments. That is a bad place for a business process to live.

Shopify Flow solves it properly, and Flow is free.

## Why the notification settings do not cover this

Worth understanding, because it explains why people burn an hour in Settings first.

Shopify's notification system has three different concepts that all look like "who gets emailed":

**Store contact email** is the address Shopify uses to contact *you* about your store: billing, platform notices, account issues. It is not a routing rule for order events.

**Sender email** is the from address on emails your store sends to *customers*. Changing it does not change who receives anything.

**Staff notifications** are a specific, finite list of events, each with its own recipient list. You can add a recipient to the events on that list. Events that are not on that list cannot be redirected, and this payment notification is one of them.

So the merchant was not missing a setting. There genuinely is no setting for this particular email, and no amount of clicking finds one.

The general rule: **Staff notifications is an allowlist, not a router.** If the event you care about is not one of the entries, Settings will not help you.

## The fix: a three-step Flow workflow

Flow is Shopify's free automation app. It listens for events and takes actions, and one of its actions is sending an internal email to whatever address you specify.

Here is the finished workflow.

![The finished Flow: Order transaction created, then keep only kind equals Sale, then Send internal email to your shared inbox](/images/blog/shopify-order-notification-email/01-finished-flow-transaction-created.png)

Three steps. Trigger, condition, action.

### Step 1: install Flow and create a workflow

If it is not installed, get **Shopify Flow** from the App Store. It is free and first party.

Open it and click **Create workflow**.

### Step 2: pick the Order transaction created trigger

Click **Select a trigger**, search for **transaction**, and choose **Order transaction created**.

This is the important choice, and it is the one that makes this work at all.

The obvious trigger is **Order paid**. Do not use it here. Order paid fires on the order's payment status changing to paid, and an additional invoice on an already-paid order does not always produce that transition. The payment happens, money moves, and the trigger never fires.

**Order transaction created** fires on the transaction itself. Every payment, on every order, edited or not, produces a transaction. It catches what Order paid misses.

### Step 3: filter out refunds and authorizations

A transaction is not necessarily a payment. Refunds, authorizations, voids and captures are all transactions, and you do not want an email for each one.

Add a condition:

**Order transaction kind** is equal to **Sale**.

If you want to be strict, add a second criterion: **Transaction status** is equal to **Success**. That excludes failed payment attempts, which otherwise generate an email saying money arrived when it did not.

### Step 4: send the internal email

Add the action **Send internal email**.

![The Send internal email step: put your shared team inbox in the To field](/images/blog/shopify-order-notification-email/03-send-internal-email-step.png)

Put your shared inbox in the **To** field. Write a subject and message, and use the variable picker to drop in the order name and the amount so the email is useful at a glance rather than something you have to click through.

A subject that works well:

```
Payment received: {{ order.name }} - {{ order.totalPriceSet.shopMoney.amount }}
```

Then click **Turn on workflow**.

Here is what actually arrived in the team inbox during testing.

![The notification email that arrived in the team inbox during the test](/images/blog/shopify-order-notification-email/02-notification-email-in-shared-inbox.png)

## Narrowing it to edited orders only

As built, this fires for **every** successful payment, not just the additional-invoice ones. For most teams that is what they want anyway: one inbox, every payment, no gaps.

If you only want the edited or additional-invoice payments, there are two ways to narrow it.

**Compare the transaction date to the order's created date.** An additional invoice is paid some time after the order was created, whereas the original payment lands within seconds of it. A condition that the transaction is more than, say, five minutes after order creation isolates the later ones reliably.

**Tag the orders and filter on the tag.** If you are editing the order anyway, add a tag like `additional-invoice` while you are in there, and add a condition that the order has that tag. More manual, but unambiguous, and it survives any change to how Shopify times transactions.

The tag route is the one I would pick if the distinction matters for accounting, because it is explicit rather than inferred.

## What else this pattern unlocks

Once you have this shape in your head, a lot of "Shopify will not email the right person" problems dissolve. The same three steps handle:

**High value order alerts.** Same trigger, add a condition on amount, send to a different address. Useful for fraud review.

**Per-supplier fulfilment notices.** Trigger on order created, condition on a product vendor, send to that vendor's address.

**Payment failure alerts.** Same trigger, condition on transaction status is not Success. This one is valuable and rarely built, because Shopify does not tell you when a payment attempt fails.

**Refund notifications to finance.** Same trigger, condition on kind is Refund.

All free, all in Flow, all keeping the routing in the store rather than in one person's mail client.

## Common questions

**Does Send internal email work for customer emails too?**

No, and this is the limit worth knowing. Shopify's documentation states you cannot use variables to customise the To address on this action. It is for staff addresses you type in. To email a customer from Flow, you need the **Send HTTP request** action and an external email provider.

**Can I send to more than one address?**

Yes, the To field accepts multiple addresses. Though if you are sending to several people, a shared inbox or a distribution list is easier to maintain than a list inside a workflow.

**Will this duplicate the email the owner already gets?**

Yes. Shopify's own notification still goes to the owner; Flow adds a second one to your inbox. If the duplicate bothers the owner, they can filter it, but there is no way to stop Shopify's original.

**Does Flow cost anything?**

No. It is free on all plans that have it, and this workflow uses no external services.

**How fast does it fire?**

Within seconds in practice. Flow is event driven, not polled, so there is no schedule to wait for.

**Can I include the customer's details in the email?**

Yes. The variable picker exposes the order, and through it the customer, line items, shipping address and more. Add whatever your team needs to act without opening the admin.

## If it did not work

**No email arrives at all.** Check the workflow is turned on, not just saved. Then open its run history: Flow logs every run and shows exactly which step stopped it and why.

**Emails arrive for refunds too.** The `kind is equal to Sale` condition is missing or is checking the wrong field.

**Emails arrive for failed payments.** Add the `Transaction status is equal to Success` criterion.

**The email lands in spam.** Send internal email comes from Shopify's infrastructure, so add the sender to your allowlist in the shared mailbox. This is common on Google Workspace shared inboxes specifically.

**The trigger never fires.** You are on **Order paid** rather than **Order transaction created**. That is the whole reason this build works, so it is worth double-checking.

## Why this beats a forwarding rule

The suggestion in the thread was a forwarding rule from the owner's inbox, and it does work today.

But it puts a business process inside one employee's mailbox. It breaks when they leave, when they reorganise their filters, or when their mail client decides the rule is stale. It goes unnoticed until someone asks why finance stopped seeing payments.

The Flow workflow lives in the store, is visible to anyone with admin access, logs every run, and keeps working when staff change. For the same fifteen minutes of setup, it is the version that is still working in two years.

## Tested on

Built and run on a Shopify dev store: created the workflow with the Order transaction created trigger and a Sale condition, processed a payment, and confirmed the internal email arrived at the target address with the order name and amount populated from the variable picker. The Order paid trigger was checked separately and did miss the additional-invoice case, which is why the transaction trigger is used here.


---

---
title: "Shopify Order Printer: Print Every Order in One Go"
description: Shopify's bulk Print menu offers packing slips and nothing else until you install Order Printer. Here is how to add it, how to change what the document says, and how to print fifty orders at once, with screenshots from a live admin.
---

## The problem

You have forty orders to pack. Each one needs a printed sheet on the bench, and the sheet needs the delivery note your customer service team typed, the tags that tell the packer which are rush, and the engraving text the buyer entered at checkout.

Shopify's Orders screen lets you select all forty. Then you open **Print**, and there is one option: Print packing slips. The packing slip carries the items and the shipping address and nothing else.

![The Shopify bulk Print menu on a store with no print app, offering only Print packing slips](/images/blog/shopify-order-printer/01-bulk-print-menu-packing-slips-only.png)

The answer is a free app published by Shopify itself. It adds a second entry to that same menu, it prints every selected order in one job, and the document it prints is one you design.

## What Order Printer is

**Shopify Order Printer** is a free app, listed by Shopify on the App Store, that adds printable documents to your admin. It comes with three ready-made ones: a pick list, a packing slip and an invoice. You can edit all three, and you can build new ones.

![The Shopify Order Printer listing on the App Store, free, published by Shopify](/images/blog/shopify-order-printer/02-shopify-order-printer-listing.png)

It has no plan requirement and no paid tier. Install it from the App Store listing and it appears in your admin under Apps.

Two things to know before you start:

- It prints up to **50 orders in one run**. Larger batches get worked in pages of 50.
- Customising a document means writing HTML, CSS and Liquid. Liquid is Shopify's template language, the thing that drops each order's real values into the page.

## Step 1: find the templates

In the admin, open **Order Printer** from the left sidebar, then **Templates**.

The three documents it ships with are listed as cards, each showing a preview. The **Create template** button in the corner starts a new one: you can begin from a copy of the invoice, packing slip or pick list, or from **Blank template** and build the whole thing yourself.

![The Order Printer Templates page with the Create template menu open, showing Blank template](/images/blog/shopify-order-printer/03-order-printer-templates-create.png)

There is a second way in, which is useful if you would rather your staff did not go rummaging through the Apps section. Go to **Settings > Shipping and delivery**, scroll to **Documents**, and open **Templates**.

![The Documents section of Shopify Shipping and delivery settings, with a Templates row](/images/blog/shopify-order-printer/07-settings-shipping-documents-templates.png)

Both routes open the same list.

## Step 2: change what the document says

Open any template and you get two tabs. **Edit code** holds the document itself. **Preview** renders it against a real order from your store, so you are not guessing at how a change will land.

![The Order Printer template editor with the Edit code and Preview tabs](/images/blog/shopify-order-printer/04-order-printer-template-editor.png)

There is also a **Print by default** checkbox at the top. Leave it ticked and the template is pre-selected every time you print; untick it and staff have to choose it deliberately.

The code is ordinary HTML and CSS with Liquid mixed in. Liquid is what pulls the order's real values into the page. A line like this:

```liquid
{{ order.order_name }}
```

prints `#1029` when you print order #1029.

### What you are allowed to put on it

The stock packing slip leaves out most of the order, and this table is what you replace it with. Shopify's reference for Order Printer templates gives you these, and this list is why the app can replace the order page rather than just decorate a packing slip:

| What you want on the sheet | The Liquid to use |
| --- | --- |
| Order number, date | `order.order_name`, `order.created_at` |
| The note staff typed on the order | `order.note` |
| Every tag on the order | `order.tags` |
| Cart attributes from checkout | `order.attributes` |
| Items, with SKU and options | `line_items` |
| Per-item instructions | `line_item.properties` |
| Tax breakdown | `tax_lines` |
| Delivery method chosen | `shipping_methods` |
| Payments taken, and how | `transactions` |
| What has shipped, with tracking | `fulfillments` |
| Money returned | `refunds` |
| Customer record | `customer` |
| Your own shop details | `shop.name`, `shop.address` |

The ones that matter most to a packing bench are **note**, **tags**, **attributes** and **line item properties**, because those four are where the human instructions live, and none of them appear on a stock packing slip.

A short example. To print the order note under a heading, but only when there is one:

```liquid
{% if order.note != blank %}
  <h3>Note</h3>
  <p>{{ order.note }}</p>
{% endif %}
```

The `{% if %}` guard matters. Without it, every order with no note prints an empty heading.

### Start from the invoice, not the packing slip

If you want a sheet that reads like the order page, duplicate the **Invoice** template rather than the packing slip. It already carries the billing address, line prices, discounts, tax, totals, the amount outstanding and a table of transactions. That is most of the way to a full order sheet before you have written a line.

## Step 3: print in bulk

Back on **Orders**, tick the orders you want. The bulk action bar appears along the top. Open **Print**, and Order Printer now sits in that menu alongside Print packing slips.

![The Shopify bulk Print menu after installing Order Printer](/images/blog/shopify-order-printer/05-bulk-print-menu-with-order-printer.png)

Choosing it opens a dialog listing every template you have. Tick the documents you want for this run, check the preview, then **Continue to print**. All the selected orders come out in one job.

![The Order Printer print dialog listing Pick list, Packing slip and Invoice with checkboxes](/images/blog/shopify-order-printer/06-order-printer-print-dialog.png)

The same Print menu on an individual order page offers the same templates, so a single reprint does not need a different process.

## Common questions

### Can I print more than 50 orders at once?

No. The listing states a cap of 50 orders per run. For a 200-order day, filter the Orders list, select 50, print, then move to the next 50. Sorting by order number first keeps the piles in a sensible order.

### Can I save the documents as PDFs instead of printing them?

Not directly. Order Printer sends the document to your browser's print dialog, and most browsers offer "Save as PDF" as a destination there. That produces one PDF for the whole batch rather than one file per order. If you need individual PDF files, or PDFs emailed to customers automatically, that is what the paid invoice apps are built for.

### Does it work on every Shopify plan?

Yes. The app is free with no paid tier, and nothing in its listing names a plan requirement.

### Why does my pick list only show some items?

By design. The dialog says it plainly: only unfulfilled items are included on the pick list. That is right for picking, since already-shipped items do not need picking again, but it surprises people who expected a complete item list. Edit the pick list template if you want every item.

### Can I add my logo?

Yes, the same way you would add an image to any web page. Upload the image under **Content > Files** in your admin, copy its URL, and put an `<img>` tag in the template with that URL as the source.

### Can I print purchase orders or POS receipts with it?

No to both. Purchase orders are a separate part of the admin that this app does not reach, and the listing states that customising POS printer receipts is not supported. POS receipts have their own editor in the Point of Sale channel.

## If it is not working

- **Order Printer is missing from the Print menu.** The app installed but the Orders page was already open. Reload the Orders list and select the orders again.
- **A template prints blank.** Usually a Liquid tag that was opened and not closed. Every `{% if %}` needs an `{% endif %}` and every `{% for %}` needs an `{% endfor %}`. The Preview tab shows the failure before you waste paper.
- **A field prints nothing.** The order may not have that value. Wrap it in an `{% if %}` and test on an order you know has one, using the Preview tab.
- **Page breaks land badly.** Add `page-break-after: always` in the template's CSS on the outermost wrapper so each order starts a fresh sheet.
- **The Documents section is missing from Shipping settings.** Use the Order Printer entry in the admin sidebar instead, shown in step 1 above. It opens the same list.

## Words that get mixed up

- **Packing slip**: the sheet that goes in the box. Items and shipping address, no prices.
- **Invoice**: a money document. Prices, tax, totals, what was paid.
- **Pick list**: a picking aid, grouped for walking the shelves. Unfulfilled items only, by default.
- **Template**: the design of one of those documents, written in HTML and Liquid.
- **Liquid**: the code Shopify uses to drop real order values into a template.
- **Line item property**: an instruction attached to one item, such as an engraving message, usually captured at checkout.
- **Order attribute**: an instruction attached to the whole order, such as a delivery window.

## Tested on

Checked in a live Shopify admin in September 2026. Before installing, the bulk Print menu on a selection of three orders offered Print packing slips and nothing else. After installing Shopify Order Printer, the same menu offered Order Printer, which opened one dialog listing Pick list, Packing slip and Invoice with a single Continue to print for the whole selection. The Templates page offered Invoice, Packing slip, Pick list and Blank template under Create template, and each template opened on an Edit code tab containing HTML, CSS and Liquid alongside a Preview tab. The same template list appeared at Settings > Shipping and delivery > Documents > Templates. The 50-order cap is quoted from the app's own App Store listing, not measured.


---

---
title: How to Edit a Packing Slip on Shopify to Show Big Product Photos
description: Shopify's order page shows each item as a 40 pixel thumbnail with no way to enlarge it. Here is how to edit the packing slip template so every line prints that exact variant's photo at a size you can check colours against.
---

## The problem

A merchant asked about this on the Shopify Community. They sell products where several variants look almost the same, such as shades of one colour.

Before they pack an order, they want to confirm the shade. The order page only shows a tiny thumbnail beside each item. To see it properly they had to leave the order, open the product, find the variant and open its media. With a stack of orders to pack, that adds up.

They asked for one thing: click the thumbnail on the order and see that variant's photo at full size.

I reproduced it on a test store. I made a lip tint with three shades, Rose 01, Rose 02 and Rose 03, deliberately close in colour. Then I placed an order for Rose 01 and two of Rose 03.

![The Shopify order page with two line items shown as small thumbnails](/images/blog/shopify-packing-slip-product-images/01-order-page-thumbnails.png)

On the order page each thumbnail measured 40 by 40 pixels. At that size Rose 01 and Rose 03 look like the same pink.

## What the order page lets you do today

Clicking the thumbnail does nothing. It is a plain image, not a link or a button, so no preview or larger view opens.

The item's name is a link, but it goes to the variant's edit page in Products. On that page, clicking the photo opens the image picker used to swap the variant's picture. It does not open a larger view either. So the admin has no one-click way to see a line item's photo at a readable size.

There is no setting that changes this. The order page layout is fixed by Shopify, and themes do not reach the admin.

The packing slip is different. It is the document you print from an order to go in the box. Shopify builds it from a template you can edit, and that template already includes each line item's photo. It just prints it small.

## How to edit the packing slip on Shopify

The packing slip template lives in your shipping settings. Here is the full path, one screen at a time.

### Step 1. Open Settings

Click **Settings** at the bottom left of the admin.

![The Settings link at the bottom of the Shopify admin menu](/images/blog/shopify-packing-slip-product-images/02-settings-link.png)

### Step 2. Open Shipping and delivery

In the settings menu, click **Shipping and delivery**.

![Shipping and delivery in the Shopify settings menu](/images/blog/shopify-packing-slip-product-images/03-shipping-and-delivery.png)

### Step 3. Open the document templates

Scroll down to the **Documents** card and click **Templates**. The row lists the three documents you can edit: Packing slip, Invoice and Pick list.

![The Documents card with the Templates row](/images/blog/shopify-packing-slip-product-images/04-documents-templates.png)

### Step 4. Open the Packing Slip template

Click **Packing Slip**.

![The Templates list with Packing Slip](/images/blog/shopify-packing-slip-product-images/05-templates-list.png)

The editor has two halves. On the left is the template's code. On the right is a preview of the slip.

The code is written in Liquid, the template language Shopify uses for its themes and documents. You do not need to know it for this change. You change one number and swap one line.

### Step 5. Change the image size from 58 to 250

Around line 109, just under a comment that says "To adjust the size of line item images, change desired_image_size", there is this line:

```liquid
{% assign desired_image_size = 58 %}
```

Change the number so it reads:

```liquid
{% assign desired_image_size = 250 %}
```

![The desired_image_size line changed to 250](/images/blog/shopify-packing-slip-product-images/06-change-58-to-250.png)

The number is the width of the photo frame on the slip, in pixels. Change only the number and leave the rest of the line as it is.

### Step 6. Replace the image line

About ten lines further down is the line that prints the photo:

```liquid
{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
```

Select the whole line and replace it with this one:

```liquid
{{ line_item.image | img_url: '1000x1000' | img_tag: '', 'aspect-ratio__content' }}
```

![The image line replaced with the 1000x1000 version](/images/blog/shopify-packing-slip-product-images/07-replace-image-line.png)

Keep the spaces at the start of the line. They do not change anything on the slip, but they keep the code tidy.

### Step 7. Save

Click **Save** in the bar at the top of the page.

![The Save button on the packing slip template](/images/blog/shopify-packing-slip-product-images/08-save.png)

### Step 8. Print a packing slip from an order

Open any order, click **More actions**, then **Print packing slips**. Shopify builds a PDF and opens it in a new tab.

![More actions menu with Print packing slips](/images/blog/shopify-packing-slip-product-images/09-print-packing-slips.png)

Here is the printed slip for my test order after both changes.

![The printed packing slip with a large photo for each shade](/images/blog/shopify-packing-slip-product-images/10-after-printed-slip.png)

Each line now shows the photo of the exact variant that was ordered, large enough to tell Rose 01 from Rose 03.

## Why changing the number alone is not enough

Shopify's own comment says the size number is all you need to change. On my test store that was not true.

With only the number changed to 250, the frame on the slip got bigger but the photo inside it did not. I opened the printed PDF and checked the photos embedded in it. Both were 100 by 100 pixels, the same as before the change.

The cause is in the default template. The line after the size number works out a print-quality size, about 1,042 pixels for a 250 frame. But the template stores that size with spaces and line breaks around it. Shopify does not accept that as a size, so it falls back to its standard small photo, which is 100 pixels wide. The same thing happens at the default of 58, so the slip has always printed that small copy.

The replacement line in step 6 asks for the photo at a fixed 1000 by 1000 pixels instead. After that change, the PDF held both photos at 1000 by 1000 pixels. They print about 5.4 cm (2.1 inches) wide at close to 470 dots per inch, which is sharp on any office printer.

The editor's Preview pane shows the same thing. With only the number changed, its photos stayed 100 pixels wide inside the bigger frame. After the new image line, they filled the 250 pixel frame.

## Which photo prints for each line

The slip prints the photo attached to the variant that was ordered, not just the first photo of the product. On my test order, Rose 01 and Rose 03 each printed their own shade.

That only works if each variant has its own photo. Check this before relying on the slip. Open the product, click each variant and confirm its photo is the right shade. If it is not, click the photo on the variant page and pick the correct one from the product's images.

## Picking a size that fits your printer

250 worked well on my test store. It leaves room for the item name, the variant name and the quantity beside the photo on an A4 or US Letter page.

A few guidelines if you want to adjust it:

- **150 to 200** keeps more items per page and is still big enough for most colour checks.
- **250 to 300** suits close shades like mine, where you want to compare them side by side.
- **Above 300**, check the Preview first. The item name and quantity sit beside the photo, so a very wide photo leaves them less room.

The Preview pane on the right of the editor updates as you type, so you can try a size before saving. The **Preview** button at the top lets you pick one of your real orders to show there.

## What to check if the photos did not change

**The frame is bigger but the photo is still small.** You changed the number but not the image line. Do step 6 as well.

**The photos are still small everywhere.** Make sure you edited the Packing Slip template and not Invoice or Pick list. They sit in the same list and look alike.

**The Preview pane shows a small photo inside a big empty frame.** The image line was not replaced, or not saved. Check step 6.

**The Save button never appeared.** The save bar only shows once the code changes. Click inside the code editor, make the edit again and wait for the bar at the top.

**Some lines show no photo at all.** The template only prints a photo when the item has one. Products without any image print as text only.

**Every shade shows the same picture.** Check that each variant has its own photo assigned on its variant page.

**You want the old slip back.** Click **Revert to default** at the top of the template editor. It appears once a template has been changed.

## Packing slip, invoice and pick list: which is which

Shopify's Templates list has three documents, and they are easy to mix up.

- **Packing slip.** Goes in the box. Lists what is in this shipment. You print it from an order with **Print packing slips**.
- **Invoice.** A bill for the customer, with prices and totals.
- **Pick list.** A list for whoever collects the items from the shelves, grouped across orders.

The fix in this article is for the packing slip, because that is the document in your hand when you pack. If you want invoices or several orders printed in one go, Shopify's Order Printer app covers that. I wrote a separate guide to [Shopify Order Printer](/blog/shopify-order-printer).

## Other ways to see a variant photo from an order

If printing is not how you work, there are two other routes.

**Open the variant from the order.** Click the item name on the order. It opens the variant page, where the photo is larger than the thumbnail. It is one click, but it takes you away from the order.

**Use a pick and pack app.** Apps such as iPacky and Scan Picker are built for packing checks. They show each item with its photo on a packing screen and some let you scan a barcode to confirm the right variant went in the box. They suit stores that pack many orders a day.

For most small stores, the packing slip change is enough. It takes a few minutes and costs nothing.


---

---
title: "Shopify Page Template: Make Selected Pages Wider"
description: A clean, maintainable way to make a few Shopify pages wider while every other page stays at its normal narrow width. Create one page template, widen just that template, and assign it. Tested on Horizon, with screenshots.
---

## The problem

A merchant asked about this on the Shopify Community, and it is one of those layout problems that looks simple and turns out to be about how the theme is built.

They were redesigning a handful of pages with more editorial layouts: image grids, two-column sections, card layouts. About, Imprints, Submissions, Support and a Start Here page. The trouble was that their theme keeps ordinary Pages inside a narrow reading column. On a normal blog-style page that narrow measure is good for reading. On an image-led landing page it looks squeezed, and the grids and columns feel cramped.

They had already tried the obvious thing: setting a width inside their own Custom Liquid or HTML. It did not fully work. The page kept constraining the whole content area no matter what they put inside it.

They wanted three things at once:

- Make these specific pages wider.
- Keep every other Page at its normal, narrower width.
- Stay responsive and correct on mobile, and not go completely full width.

I reproduced this on a Horizon store. Here is the narrow page body with some editorial content dropped in. Notice how the content sits in a thin column with wide empty margins on both sides.

![A Shopify page where the editorial content is locked to a narrow reading column with wide empty margins](/images/blog/shopify-page-template-wider-pages/01-before-narrow-page.png)

That empty space is the whole complaint. The theme is not broken. The width is doing exactly what the theme tells it to do, which is the part worth understanding before you touch anything.

## Why editing the HTML does not widen the page

Here is the key idea, and it is the thing that trips most people up.

In modern Shopify themes, width is set per section, not per page. Every section on a page has its own width setting. In Horizon you will see it as a Width control with options like Page width and Full width.

There is one exception, and it is the section that holds your typed page body. That section renders the content you write in the Pages editor. In Horizon it has no width control at all. It is hard-locked to a narrow reading width by a CSS class on its wrapper.

So when you paste a wide layout into your page body or into a Custom Liquid block inside that body, the outer container is still pinned to the narrow measure. Your grid can only fill the space its parent gives it, and the parent is narrow. That is why changing the width inside your own HTML does nothing. You are widening a child inside a box that will not grow.

Once you see it that way, the fix is obvious. You either move the content into a section that does have a width control, or you widen the locked container itself. And you do either one on a template that only these pages use, so the rest of the site is untouched.

## First, check if you even need to build anything

Before you create a new template, check whether the width you want already exists somewhere on your store.

The merchant said their existing Author page was already the width they wanted. That is a strong clue. If one page already looks right, open it in the admin and look at the Theme template dropdown on the right side. If it says anything other than Default page, that template already exists and already carries the width you are after.

If that is the case, you are done in one step. Assign that same template to the other pages and stop. No code, no new files.

Only build something new if the Author page is on the default template, or if the page you were comparing against is not actually a Page but a different resource, like a section on the homepage. It is worth two minutes to check, because the cleanest fix is the one you do not have to build.

## The clean, maintainable fix

If you do need to build it, here is the approach that keeps normal Pages narrow, stays responsive, and lives in one place you can maintain. I tested every step on a Horizon store.

### Step 1: Create a template for these pages only

Go to Content, then Pages, and open one of the pages you want to widen. On the right you will see a Template section with a dropdown. Open it and choose Create template. Name it something clear like editorial.

You now have a page template called page.editorial that these pages can use while every other Page stays on Default page.

![Creating and assigning a new page template from the Shopify Pages editor](/images/blog/shopify-page-template-wider-pages/02-create-page-template.png)

Assign that same editorial template to each page you want wide. In the merchant's case that was About, Imprints, Submissions, Support and Start Here. Everything else keeps the default template and its normal width.

This is the part that answers the real question. A separate template is what scopes the change. Nothing you do to the editorial template can touch a page that is still on Default page.

### Step 2: Widen just that template

Now go to Online Store, then Themes, then Customize, and switch to the editorial template. Add a section, and choose Custom Liquid. Paste this into it and Save:

```html
<style>
  .page-width-content { --page-content-width: 1100px; }
</style>
```

Change 1100px to whatever width you want. That single value is the one knob you adjust.

![Adding a Custom Liquid section on the editorial template and pasting the width CSS](/images/blog/shopify-page-template-wider-pages/03-custom-liquid-width-css.png)

Two things make this safe and tidy.

First, this Custom Liquid section only exists on the editorial template. It only loads on the pages that use that template. Your normal Pages never see it, so they stay narrow. You did not have to wrap the CSS in a theme-suffix check or worry about it leaking. The template is the scope.

Second, this uses the theme's own width variable rather than a blunt override. Only the page body uses that class, so your header and footer keep their own widths and are untouched. That matters, because a lot of themes reuse the same container class for the header, the footer and the page content. A broad width override can widen things you never meant to touch. Targeting the page body class avoids that.

Here is the same page on the editorial template. The content now uses the wider width, the two columns have room, and the image grid is much larger.

![The same Shopify page now using a wider editorial width, with roomy columns and a larger image grid](/images/blog/shopify-page-template-wider-pages/04-after-wider-page.png)

On the store I tested, the page body went from 672 pixels wide to 1100 pixels, still centered, still responsive.

## The no-code alternative: build with full-width sections

There is a second route that uses no code at all, and it is worth knowing.

Because width in these themes is a per-section setting, you can skip the page body entirely. Instead of typing your editorial content into the page body, build it out of sections on the editorial template: an image-with-text section, a multi-column section, a Custom Liquid section, and so on. Each of those sections has a Width control, so you set them to Full width or to whatever bounded width you like.

This keeps everything in the theme editor, gives you drag-and-drop control, and collapses to one column on mobile on its own. The trade-off is that your content now lives in the theme customizer rather than in the Pages editor. For image-led landing pages that is often exactly what you want anyway.

Pick whichever matches how you like to work. The CSS route widens the body you already typed. The sections route rebuilds the page out of blocks you can position. Both are scoped by the same editorial template, so both leave your other Pages alone.

## Will it stay responsive on mobile?

Yes, and this is the part that catches people who take a shortcut.

A common way to break out of a theme's container is to use 100vw or a negative-margin trick. Both work at a glance, but 100vw includes the width of the scrollbar. On desktop you often get a faint horizontal scrollbar, and on mobile you can end up able to swipe the whole page sideways a little. It looks fine until someone tests it on an actual phone.

The width-variable approach avoids that entirely. It sets a fixed, centered maximum width, so there is no horizontal scrollbar on desktop and no sideways swipe on mobile. The layout still respects the theme's side padding, and multi-column content still collapses to a single column on small screens. Load one of your new pages on a real phone and try swiping left and right. If nothing moves, you are set.

## What about building pages outside the theme?

The merchant's own first instinct was to build the pages entirely outside the theme's constraints, and that is a very natural reaction when the theme fights you.

It can work, but it comes with two hidden costs.

The first is the sideways-scroll problem above. Breaking out of the container usually means one of those full-width tricks, which is where the mobile swipe comes from.

The second is maintenance. If the width CSS ends up pasted into each page rather than sitting in one place, you now have five copies to keep in sync. Change your mind about the width and you are editing five pages. The template approach puts the width in exactly one section on one template, so a single edit updates all of the pages at once.

If you would rather not touch code at all, page builder apps like PageFly, Shogun or GemPages let you build wide editorial pages visually. They are a reasonable option, though for a handful of pages the native template route is lighter and has nothing extra to pay for or load.

## What to check if it did not work

- **The page still looks narrow.** Confirm the page is actually assigned to the editorial template in Content, then Pages. Duplicating or creating a template does not move a page onto it. You have to assign it.
- **Only some pages changed.** Each page has its own template assignment. Assign the editorial template to every page you want wide.
- **The whole site got wider.** You probably widened a shared container class or put the CSS on the Default page template. Keep the Custom Liquid section on the editorial template only, and target the page-body class rather than a generic wrapper.
- **The width jumps around on mobile.** Make sure you used a fixed centered width, not 100vw or a negative margin. Test on a real device.

## Template, section, page body: the words that get mixed up

These three terms get used loosely, and the confusion is behind most of the trouble.

- A **page template** lists which sections render on a page. It is the container. In most modern themes the template itself does not set width. It just says what appears.
- A **section** is a block on the page: a hero, a multi-column row, a Custom Liquid block. Sections are where the width setting lives. Most sections have a Width control.
- The **page body** is the content you type in the Pages editor. It is rendered by one special section that, in Horizon, has no width control and is locked to a narrow reading width.

Put together, the rule is simple. Duplicate the template to scope the change, then set the width on a section, because the template only decides what renders and the page-body section will not widen on its own. Once that clicks, making selected Shopify pages wider is a five-minute job, and every other page on your store stays exactly as it was.


---

---
title: How to Partially Fulfill an Order on Shopify (Tested)
description: Ship part of an order now and the rest later. The admin steps, plus the two catches that follow, what the customer's page actually shows and the email you cannot switch off.
---

## The problem

Half an order is ready. The other half is on back order, or waiting on a supplier, or sitting in a box that is not full yet.

You do not want to hold the whole thing. You want to send what you have.

Shopify calls this a partial fulfillment, and it is built in. It takes about four clicks. The catch is what happens afterward, on the customer's side, and that part causes more support tickets than the fulfillment itself.

I ran the whole thing on a test store. Here is the process, then the two catches.

## How to partially fulfill an order

Open the order from **Orders**. Anything not shipped yet sits in one block marked **Unfulfilled**, with a count next to it.

![Shopify order page showing three items in a single Unfulfilled block](/images/blog/shopify-partial-fulfillment/01-order-unfulfilled-three-items.png)

Click **Mark as fulfilled**. Every item arrives ticked by default, which is the step people miss. Shopify assumes you are sending the lot.

Untick everything that is not going out today. In the shot below only the tote is still ticked, so only the tote gets fulfilled.

![The fulfillment screen with two of three items unticked](/images/blog/shopify-partial-fulfillment/02-untick-items-not-ready.png)

You can also send part of a line. If a line says 5 and only 2 are ready, drop the quantity box to 2 and the other 3 stay open.

Click **Mark as fulfilled** to confirm. That is the whole job.

## What the order looks like afterward

The order now carries a **Partially fulfilled** badge, and the items split into two labelled blocks.

![The order after partial fulfillment, showing an Unfulfilled block of two items and a Fulfilled block](/images/blog/shopify-partial-fulfillment/03-partially-fulfilled-two-sections.png)

The fulfilled block gets its own number. Mine came out as `#1029-F1`, and the next one on the same order would be `#1029-F2`. Each block carries its own tracking, its own Mark as delivered button, and its own status.

When the rest arrives you repeat the process on what is left. An order can hold as many of these blocks as you need.

So far so good. This is where it stops being tidy.

## Catch one: the customer does not see that split

The two labelled blocks above are the **admin** view. They are for you.

The page the customer lands on reads an order level status instead. Once any one part of the order is fulfilled, that status is what the whole order wears, and the item list underneath is still every item they bought, with nothing marking which ones actually shipped.

A merchant running local pickup described exactly what that costs, in a thread I answered on the Shopify Community. Their customers get an email listing the 2 items that are ready, click through, and land on a page that reads as though all 5 are waiting. Some of those customers drive three hours each way to collect.

Their words: it "creates real confusion and erodes trust, and our staff end up doing damage control at pickup."

There is no setting that splits that list. Changing what the customer's order page prints per line means building a customer account UI extension, which is a piece of code you add to that page, and the order data available to it is summary level, so it needs a service of your own behind it to get the per-fulfillment detail. That is a build, not a checkbox.

## Catch two: the email lists everything too

This is the one that surprised me, and it is worth knowing before you write any clarifying wording.

Shopify's pickup and shipping notifications are scoped to the fulfillment, so the top of the email correctly lists only what is ready. But the template also carries a second list further down, and that one prints the whole order.

Here is the pickup template, read out of a live admin:

![The Ready for local pickup email template showing a partial check and a ready items loop](/images/blog/shopify-partial-fulfillment/04-pickup-email-template-code.png)

Two things are going on in that file.

`{% if prepared_package.item_count != item_count %}` means the template already knows the fulfillment is partial. When it is, it prints an **Items ready for pickup** heading and loops through only the ready ones.

Then further down it prints an **Order summary** heading and loops through `subtotal_line_items`, which is everything.

So a customer who scrolls past the first block sees the full list anyway. If you have added a note saying "only the items above are ready", it is competing with a complete item list a few hundred pixels below it.

## Can I stop the notification going out on every partial fulfillment?

No, and I checked this one carefully because it gets asked a lot.

Every time you fulfill part of an order, Shopify emails the customer. Fulfill three separate times and they get three emails before the order is complete.

I counted every customer notification in a live admin. There are 46. Exactly 5 of them carry an on/off switch:

- Order out for local delivery
- Order locally delivered
- Order missed local delivery
- Out for delivery
- Delivered

Shipping confirmation is not one of them. Neither is Ready for local pickup. Here are the two groups sitting next to each other in the same settings page, one with switches and one without.

![Shopify notification settings with Local pick up showing no switches and Local delivery showing three](/images/blog/shopify-partial-fulfillment/05-notification-switches.png)

The plumbing for a per notification switch clearly exists. It has just not been extended to these. If this matters to your store, that side by side is worth quoting when you ask Shopify for it.

## Labelling each line in the email

You can fix the email, even though you cannot fix the page. From the notification list in the screenshot above, open the one you want and scroll to the Email body box.

Just above the `Order summary` loop, build a list of the ids that are actually ready:

```liquid
{% assign ready_ids = "" %}
{% for l in prepared_package.prepared_package_line_items %}
  {% assign ready_ids = ready_ids | append: l.line_item.id | append: "," %}
{% endfor %}
```

Then inside `{% for line in subtotal_line_items %}`, next to the product title:

```liquid
{% if ready_ids contains line.id %}
  <span style="color:#1e6f50;font-weight:600">Ready today</span>
{% else %}
  <span style="color:#9a6b00;font-weight:600">Still being prepared</span>
{% endif %}
```

Now every line in the summary says which group it belongs to, rather than sitting in one undifferentiated list.

Two things to watch. Copy the template into a text file first, because Revert to default is all or nothing and there is no undo. And a line that is partly ready, 2 of 3 of the same product, will read as Ready today under that rule, so if you split by quantity rather than by product you want to compare quantities instead of matching ids.

## Sending one notification instead of three

If the repeat emails are the actual problem, the way out is to stop treating Shopify's automatic email as the one that matters.

Fulfill the parts as they are ready, so your records stay accurate. Then use Shopify Flow, which is Shopify's free automation app, to watch for the order becoming fully fulfilled and send your own email at that point.

For a pickup business that is the difference between a customer driving over for a part order and driving over once, for everything. Better wording does not prevent that trip. Not sending the signal until the order is complete does.

## Does partial fulfillment split the order?

No. It stays one order, with one order number and one payment.

What splits is the fulfillment. Each batch you send becomes its own record hanging off that order, numbered `-F1`, `-F2` and so on.

That matters for reporting. Your order count does not go up when you ship in two batches, and refunds still work against the single order.

## Can I use a different tracking number for each part?

Yes, and this is one of the better reasons to fulfill in parts deliberately. Each fulfillment block has its own **Add tracking** button and holds its own carrier and number.

If you are shipping one order in two boxes with two different carriers, partial fulfillment is the mechanism that lets you do it. That case has its own walkthrough in [adding multiple tracking numbers to one Shopify order](/blog/shopify-multiple-tracking-numbers-one-order).

## What if I fulfilled the wrong items?

Open the fulfillment block, use the **...** menu on it, and cancel that fulfillment. The items drop back into the Unfulfilled block and you can start again.

Cancelling does not un-send the email the customer already received. If you fulfilled the wrong line, assume they have been told about it.

## Partial fulfillment versus splitting the order

These sound similar and are not.

**Partial fulfillment** keeps one order and ships it in batches. The customer keeps one order number.

**Splitting an order** creates separate orders from the original. Each new order gets its own number, its own status page and its own emails. It costs you an extra order in reporting, and it changes what the customer sees, which is sometimes exactly what you want when two halves of an order are weeks apart.

For most stores shipping a back ordered item a few days later, partial fulfillment is the right tool. For a pickup order where one half is weeks behind the other, the second is worth considering.

## What to check on your own store

Fulfill part of a test order and read your own notification as the customer gets it, all the way to the bottom. Most merchants have never scrolled past the first block.

Then open the order page the way a customer sees it and ask whether someone skim reading it would know which items are actually on the way.

If the answer is no, the email is the surface you can fix today. The page needs a developer.


---

---
title: Shopify Password Page: Schedule It for Early Access
description: Can you schedule the Shopify password page to lock and unlock on its own? Here is what the password page can and cannot do, and the free, native way to run a VIP early-access launch instead.
---

## The problem

A merchant asked about this on the Shopify Community. They wanted their store to run a timed launch on its own.

The idea was a VIP window. From 8am to noon, only their email and SMS list could shop, with exclusive early pricing. At noon, the store would open to the public at normal prices. All of it automatic, and all of it free.

Their first instinct was the Shopify password page. Lock the store, hand the password to the list, then unlock at noon. The question was simple: can Shopify flip that password on a schedule by itself, for free?

I dug into this on a test store. The short answer is no, the password page cannot be scheduled natively. The longer answer is that you do not need it, and there is a cleaner free way to get exactly what they wanted.

![Restricting a Shopify discount to the Email subscribers customer segment, so only that list gets the price](/images/blog/shopify-password-page-schedule/01-discount-eligibility-email-subscribers.png)

## What the Shopify password page actually is

Let me keep this in plain words, because the password page is often misunderstood.

The password page is a single gate over your whole online store. You turn it on in Online Store, then Preferences, under Password protection. When it is on, every visitor sees a login screen and must type one shared password to get in.

Three things follow from that, and they matter for a launch:

- It is one password for every visitor. It is not a per-customer login. Anyone you give it to can get in, and anyone they forward it to can get in.
- It hides the entire store. Not one page, the whole thing. Search engines cannot crawl it while it is on.
- It is a manual on and off switch. You tick a box to enable it, and untick it to disable it.

That last point is the whole issue. There is no schedule field next to that box.

## Can you schedule the Shopify password page?

Not with a native setting, and not for free with built-in tools.

Shopify does not give the password page a start time or an end time. There is no calendar, no automation trigger, and no way to say turn off at noon. You either flip it by hand, or something outside Shopify flips it for you.

People often ask whether Shopify Flow can do it. It cannot. Flow automates orders, customers, inventory, and tags. It has no action that toggles the store password or the online store status.

So a truly free, native, self-unlocking password page does not exist. If you must hide the whole store on a timer, you need an app that schedules a password or coming-soon page, or you flip the switch manually at the set time.

But hiding the whole store is usually the wrong tool for a launch. Here is why, and what to do instead.

## The better way: gate the price, not the store

Go back to what the merchant actually wanted. Early pricing for their list, then public pricing for the rest of the list at noon. That is a pricing rule with a schedule, not a locked store.

Shopify does pricing rules with schedules natively, for free, and they run themselves. The tool is a discount.

Two settings make it do everything they asked:

- Restrict the discount to a customer segment, so only the list gets the price.
- Give the discount a start and end time, so it turns on and off on its own.

No password. No app. No manual step at noon.

### Step 1: restrict the price to your list

Create the discount in Discounts, then Create discount. Set your early-access deal, a percentage or an amount off the bundle.

Then set Eligibility to Customer segments and choose your email and SMS audience. Shopify has a built-in Email subscribers segment, or you can build your own from a customer tag.

Now the discount only applies to people in that segment. The public browsing your store sees normal prices, even on the product page. The early price is never exposed to them.

This is the part that answers the real worry with a plain discount code. A code with All customers eligibility is not shown to the public, but a guessable code can leak to a coupon site. Restricting to a segment removes that risk, because there is no code to share.

### Step 2: put it on a schedule

Scroll to Active dates. Set the Start date and time to your opening, for example 8am. Tick Set end date and set the End to noon.

That is the automation. The discount switches on at your start time and off at your end time, with nothing for you to do. When it ends, prices return to normal, which is your public release.

![The Active dates section of a Shopify discount, with a start and end time so it turns on and off automatically](/images/blog/shopify-password-page-schedule/02-discount-active-dates-schedule.png)

Save, and the discount shows as Scheduled. It sits inactive until the start time, applies only to your list during the window, and deactivates itself at the end. On my test store it behaved exactly like that.

## Getting your list into a segment

The one requirement is that your list exists as customers, because a segment is a group of customers.

- Your email and SMS platform, like Klaviyo, Postscript, or Shopify Email, syncs subscribers into Shopify as customers. The Email subscribers segment is then ready to use, or you can tag them and build a segment from the tag.
- Customer segment pricing applies when the shopper is signed in, so their account is recognised. Send a sign-in link in your campaign so the price applies the moment they land.
- If your list are not account holders, use a discount code instead. Put the code in the email or SMS. Only people with it get the price. Make it a random string, not a guessable word, and set a usage limit so it cannot spread.

## Does the password page hurt SEO?

While the password page is on, search engines cannot see your store, so nothing gets indexed. That is fine for a store that has not launched.

But for a live store running a short VIP window, locking everything for a few hours also hides you from Google and from every non-VIP shopper for that time. That is a lot of collateral damage for a four hour sale. Gating the price leaves the store open and visible the whole time, which is another reason it is the better fit.

## How do I find or change my Shopify password page password?

It is in Online Store, then Preferences, under Password protection. Enable the toggle, and the password field appears there. You set or change the shared password in that same spot, and untick the box to remove the page.

Remember it is one shared password for the whole store, so treat it like a key you are handing to a group, not a personal login.

## Can I password protect only one page in Shopify?

Not with the native password page, which is all or nothing for the whole store.

If you need to lock a single page or collection, that is an access-control job for an app like Locksmith, which can hide specific pages behind a customer login, a tag, or a passcode. For a launch, though, the scheduled discount above usually does what you need without locking anything.

## What if I really do want the store hidden first?

Then accept that the timing is the manual part. Turn the password page on before the window, hand the password to your list, and turn it off at noon yourself, or use a coming-soon or password app that adds a schedule.

Just know the trade-offs going in. One shared password, the whole store hidden, no free native timer, and no SEO while it is on. For most VIP launches, the scheduled discount is simpler and does more.

## Quick distinctions people mix up

- Password page. One shared password over the whole store. Manual on and off. No schedule.
- Coming soon page. Usually the same password page, sometimes dressed up by an app that can schedule it.
- Discount, scheduled. A price rule with a start and end time. Runs itself, free, native.
- Customer segment. A group of customers, like your email subscribers, that a discount can be limited to.
- Locksmith and similar apps. Lock specific pages by customer, tag, or passcode, rather than the whole store.

## The short version

The Shopify password page cannot be scheduled natively, and Flow cannot toggle it. A free, self-running, hidden-then-public store is not something Shopify does on its own.

You almost certainly do not need it. For a VIP early-access launch, create a discount, restrict Eligibility to your customer segment, and set Active dates for the window. Only your list gets the price, the store stays open and indexable, and the discount turns itself off at your set time.

Tested on a store: a scheduled discount limited to the Email subscribers segment shows as Scheduled, applies only to that list, and deactivates on its own at the end time. No app, no password, nothing to switch at launch.


---

---
title: How to Pin a Product to the Top of a Shopify Collection
description: Manual sort loses to customer sorting. Here is a Dawn section setting that pins a product above the grid no matter how visitors sort, with the pagination caveat stated up front.
---

## The problem: manual sort only lasts until someone sorts

You want one product first on a collection page. A new arrival, a promotion, the thing your buyer is trying to move.

Shopify's collection has a **Manually** sort order, so you drag it to position one and it works. Then a customer picks "Price, low to high" from the sort dropdown and your product is somewhere on page two.

That is not a bug. Manual sort sets the **default** order. The sort dropdown replaces it entirely. There is no native "pin" that survives sorting, the way a pinned thread stays at the top of a forum.

A merchant asked about this after trying a sorting app that did not behave the way they expected. The thread turned up several partial answers: remove the sort dropdown entirely, put a block above the grid, use a merchandising app, or accept manual sort.

I built an actual pin on a Dawn test store. It works, and it has one real trade-off that I want to state before the code rather than after.

![The pinned product still first when sorted by price, high to low](/images/blog/shopify-pin-product-to-top-of-collection/01-pinned-product-first-when-sorted-high-to-low.jpeg)

That screenshot is sorted **Price, high to low**. The Navy Sports Jacket at Rs. 60 sits above jackets at Rs. 80 and Rs. 110. The sort ran; the pin ignored it.

## Why there is no native setting

Worth understanding, because it tells you what any solution has to do.

When a customer picks a sort option, Shopify re-queries the collection and returns `collection.products` in that order. Your theme loops over that list and renders a card each.

The sort happens **before** your theme sees anything. By the time Liquid runs, the order is already decided, and nothing in the loop can promote an item without breaking the pagination that was calculated alongside it.

So a pin cannot live inside the loop. It has to be rendered **before** the loop, as a separate card, with the product then skipped inside the loop so it does not appear twice.

That is exactly what the code below does, and it is also the source of the trade-off.

## The trade-off, up front

Rendering an extra card before the loop means the first page shows **one more product than the pagination expects**.

If your grid is 16 per page across 4 columns, page one now has 17 cards: the pin plus 16. In a 4-column grid that leaves a single card hanging on its own row.

Concretely:

- **Page one has one extra card.** Every other page is normal.
- **The product count can read one high** relative to what is displayed, depending on how your theme counts.
- **In a 4-column grid, 17 cards means a row of 4, 4, 4, 4, then 1.**

Two ways to make this tidy, and you should pick one before shipping:

- Set **products per page** to a number that leaves room. With 4 columns, 15 per page plus the pin gives 16, which fills four clean rows.
- Accept the hanging card. On a 2-column mobile grid it is barely noticeable, and on desktop many stores have uneven last rows anyway.

This was raised in the original thread and it is a fair criticism. It is a presentation cost, not a correctness bug, but you should know about it before a customer does.

## The code

**Duplicate your theme first.** Online Store > Themes > ... > Duplicate.

Open `sections/main-collection-product-grid.liquid`. Find the opening of the product grid, just after the `<ul id="product-grid" ...>` and the `{% assign skip_card_product_styles = false %}` line.

Insert the pinned block **before** the `{%- for product in collection.products -%}` loop:

```liquid
{%- comment -%}
  Pinned product: render it first, only on page 1, so it stays at the very
  top of the collection no matter how the customer sorts. Sorting only
  reorders `collection.products` below - it never touches this block.
{%- endcomment -%}
{%- assign pinned_product = section.settings.pinned_product -%}
{%- if pinned_product != blank and paginate.current_page == 1 -%}
  <li class="grid__item grid__item--pinned{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
    {% if settings.animations_reveal_on_scroll %}
      data-cascade
      style="--animation-order: 0;"
    {% endif %}
  >
    {% render 'card-product',
      card_product: pinned_product,
      media_aspect_ratio: section.settings.image_ratio,
      image_shape: section.settings.image_shape,
      show_secondary_image: section.settings.show_secondary_image,
      show_vendor: section.settings.show_vendor,
      show_rating: section.settings.show_rating,
      lazy_load: false,
      skip_styles: skip_card_product_styles,
      quick_add: section.settings.quick_add,
      section_id: section.id
    %}
  </li>
  {%- assign skip_card_product_styles = true -%}
{%- endif -%}
```

![The pinned block rendered before the product loop](/images/blog/shopify-pin-product-to-top-of-collection/02-pinned-block-in-product-grid.png)

Then, as the **first thing inside** the existing loop, skip the pinned product so it cannot appear twice:

```liquid
{%- for product in collection.products -%}
  {%- if pinned_product != blank and product.id == pinned_product.id -%}
    {%- continue -%}
  {%- endif -%}
```

Finally, add the setting to the section's `{% schema %}`, at the top of the `settings` array:

```json
{
  "type": "header",
  "content": "Pinned product"
},
{
  "type": "product",
  "id": "pinned_product",
  "label": "Pinned product",
  "info": "Always shows first on this collection page, no matter how customers sort. Leave empty for none."
}
```

![The pinned product setting in the section schema](/images/blog/shopify-pin-product-to-top-of-collection/03-pinned-product-schema-setting.png)

Save.

### What each piece does

**`"type": "product"`** gives you a real product picker in the theme editor, not a handle you have to type. Merchandisers can change the pin without touching code, which is the difference between this being useful and being a developer task every week.

**`paginate.current_page == 1`** keeps the pin off pages two and beyond. Without it the product repeats at the top of every page.

**`{%- continue -%}`** is what stops the duplicate. The pinned product is still in `collection.products`, so without this it renders twice: once pinned, once in its sorted position.

**`skip_card_product_styles`** is Dawn's own optimisation. Card CSS is emitted once with the first card. Since the pin is now first, it has to take over that job, which is why it sets the flag to `true` afterwards.

**`lazy_load: false`** on the pin, because it is above the fold by definition.

## Setting it

**Online Store > Themes > Customize**, navigate to a collection page, and click the **Product grid** section. A **Pinned product** picker now sits at the top of its settings.

Pick a product and save. Leave it empty and the collection behaves exactly as before, which means the change is safe to ship even on collections you do not want to use it on.

One important detail: this is a **section setting**, so it applies to every collection using that template. To pin different products on different collections, duplicate the collection template and assign it per collection, the same way you would for any other per-collection customisation.

## Pinning more than one product

The same shape scales, with the caveat getting proportionally worse: two pins means two extra cards on page one.

Add a second setting to the schema with a different id, `pinned_product_2`, then render both before the loop and skip both inside it. The skip condition becomes:

```liquid
{%- if pinned_product != blank and product.id == pinned_product.id -%}
  {%- continue -%}
{%- endif -%}
{%- if pinned_product_2 != blank and product.id == pinned_product_2.id -%}
  {%- continue -%}
{%- endif -%}
```

Past two or three, stop. The schema gets unwieldy, the pagination drift gets noticeable, and you are rebuilding a merchandising app badly. At that point buy one, or reorder the underlying collection query rather than the markup.

A cleaner variant for several products: pin by **tag** instead of by picker. Give the products a tag like `pinned`, then loop `collection.products` twice, once emitting only tagged products and once skipping them. It avoids a schema entry per product, but it costs you the theme-editor picker, so merchandisers need to manage tags instead. Which is better depends entirely on who does the merchandising.

## Doing this on other themes

This code is Dawn's. It will not paste cleanly into Ella, Impulse, Prestige or any other non-Dawn theme, and that matters: the merchant who asked the original question was on **Ella**, not Dawn.

The approach transfers, the identifiers do not. In your theme, find:

- The **collection product loop**, usually in `sections/main-collection-product-grid.liquid` or, on vintage themes, `sections/collection-template.liquid`.
- The **card snippet** your theme renders inside the loop. Dawn uses `card-product`. Yours may use `product-card`, `product-grid-item` or similar.
- The **grid item wrapper** markup, so your pinned card matches the others.

Then apply the same three moves: render before the loop, `continue` inside the loop, add a `product` setting to the schema.

If your theme is heavily customised or you are not comfortable with Liquid, the alternatives below are genuinely reasonable.

## The alternatives, and when they are better

**A featured block above the grid.** Add a Featured product section above the collection. It is not in the grid, so no pagination issue at all, and it can be styled to stand out more than a normal card. This is what the merchant in the original thread ended up doing on Ella, using the collection description, and they were happy with it. If your goal is *draw attention to this product* rather than *make it literally first in the grid*, this is the better answer and it needs no code.

**Remove the sort dropdown.** In the Product grid section settings, turn off **Enable sorting**. Manual order then always wins because customers cannot change it. Blunt, and it costs shoppers a genuinely useful control, but it is one checkbox.

**A merchandising app.** Apps in this space can pin, boost and demote products with rules, and they handle counts and pagination properly because they reorder the query rather than the markup. Worth it if merchandising is a regular job rather than a one-off. Note the merchant tried one and found it did not pin the way they expected, so test against your actual sort behaviour before committing.

**Just use manual sort.** If most visitors never touch the sort dropdown, manual order may be sufficient. Check your analytics before building anything: if sorting is rarely used, this is a problem you may not have.

## What I confirmed on the test store

On Dawn:

- The pinned product stayed **first under every sort option**, including Price high to low, Price low to high, and Best selling, which is what manual sort cannot do.
- It appeared **once**, not twice, thanks to the `continue`.
- It appeared **only on page one**.
- With the setting **empty**, the collection rendered exactly as stock Dawn.
- Page one carried **one extra card**, as expected.

The honest summary: Shopify has no native pin because sorting happens before your theme runs, so any pin has to sit outside the sorted list. That works, and the cost is one extra card on page one. If that cost bothers you more than the problem does, a featured section above the grid gets you most of the benefit for none of the code.


---

---
title: "Shopify Policy Pages: Fix Invisible Links in the Footer"
description: "Shopify writes your refund, privacy and shipping policies into their own pages and links them from the footer. If that footer link opens an empty white box, one theme colour setting is the cause. Here is where the pages live and how to fix the box."
---

## The problem

A merchant asked about this on the Shopify Community. The link at the bottom of their store said "Terms and policies". Clicking it opened a white box with nothing in it.

The links were not missing. Highlighting the box with the mouse revealed them, sitting there as white text on a white panel. They could not change the text colour and they could not change the box colour either.

![A footer policies link opening an empty white box](/images/blog/shopify-policy-pages/01-empty-white-box.png)

That is one theme setting, in a place few merchants look. But before the fix, it is worth knowing how Shopify handles policies at all, because the reason this is confusing is that policy pages are not normal pages.

## Where Shopify policy pages actually live

Shopify gives every store a set of built-in legal pages. They are not in Online Store, Pages, where the rest of your content lives. They are in **Settings, Policies**.

There are eight of them:

- Refund policy
- Privacy policy
- Terms of service
- Shipping policy
- Terms of sale
- Legal notice
- Subscription policy
- Contact information

You will not see all eight on every store. Which ones appear depends on your region and what you sell. Subscription policy shows up once you sell subscriptions, for example.

Each one you fill in gets its own address automatically, in the form `yourstore.com/policies/privacy-policy`. You do not create the page and you cannot rename the URL.

Shopify also provides a starting template for several of them. There is a button to insert it. Treat it as a draft to give your lawyer, not a finished document, because it cannot know your business.

The important part for this article: **a policy page only exists once you write something in it.** An empty policy is not published, has no URL, and does not appear anywhere on your storefront.

## How your theme finds them

You never link policy pages by hand, and you should not try.

Themes read the list of filled-in policies directly from your store and build the links themselves. In Liquid, the theme's templating language, that list is `shop.policies`.

This is why the links appear in the footer the moment you save a policy, and vanish if you clear one. It is also why the block often has no obvious settings. There is nothing to configure. It just prints whatever you have written.

Different themes present the same list differently. Some print them as plain links across the footer. Newer themes, including Shopify's Horizon, collapse them into a single "Terms and policies" link that opens a small popup holding the list. That popup is where this problem lives.

## Why the box is empty

The popup is not styled by the footer. It is styled by a separate group of theme settings that covers every popup and modal on the store at once.

In Horizon that group sets a background colour and a text colour for all of them. If those two end up the same colour, the panel still opens, the links are still there, and you see nothing.

That is exactly what happened here. Background white, text white.

It usually happens by accident, and there are two normal routes to it. Either someone set the popup text colour to white on purpose while trying to fix a different popup. Or the store's colour palette was changed to a dark theme, which flipped the shared text colour to white, and the popup background stayed light.

Left blank, the setting is smart: the theme works out a readable colour against whatever background you chose. It only goes wrong once a specific colour is pinned there.

## The fix, step by step

No code. Five clicks.

**1. Open your theme editor.** Online Store, Themes, then Edit theme, or Customize, on the theme you are actually using.

![Online Store, Themes, then Edit theme](/images/blog/shopify-policy-pages/02-themes-edit-theme.png)

**2. Click the gear icon** in the top left of the editor. That is Theme settings, and it is separate from the section list you land on.

![The gear icon at the top left of the theme editor](/images/blog/shopify-policy-pages/03-theme-settings-gear.png)

**3. Scroll down the list and open Popovers and modals.**

![Popovers and modals in the theme settings list](/images/blog/shopify-policy-pages/04-popovers-and-modals.png)

**4. Look at Text color.** On a store with this problem it will be `#FFFFFF`, white.

![Text color set to FFFFFF](/images/blog/shopify-policy-pages/05-text-color-white.png)

**5. Click the swatch and set a dark colour**, for example `000000`. Then Save.

![Setting the colour to 000000 and saving](/images/blog/shopify-policy-pages/06-set-dark-and-save.png)

Reload your storefront and the links are readable again.

![The policy links visible in the popup](/images/blog/shopify-policy-pages/07-links-visible.png)

I tested this on a Horizon store. With Text color at `#FFFFFF` the popup was an empty white box. Setting it to `000000` brought the links back immediately.

## Two things to know before you save

**Background color is right above it.** That is the white box the merchant could not recolour. It is in the same panel, so if you want the popup to match your brand rather than be plain white, change it there.

**This panel styles every popup in your theme, not just the policies box.** Search results, cart tooltips, the country and language selector all read the same two colours. So after you save, click through those and check none of them has gone the other way and ended up dark text on a dark panel.

**Clearing the field is often better than picking a colour.** Leave Text color blank and Horizon calculates a readable colour against your chosen background automatically. That keeps working if you change your palette later. Pinning a specific colour does not.

## If your theme does not have this setting

Older and third-party themes often print the policy links straight into the footer rather than in a popup, so there is nothing to fix. If yours does use a popup and there is no Popovers and modals group, the colour is coming from your general theme colour settings instead.

The reliable way to find it on any theme:

1. Right-click the invisible text and choose Inspect.
2. Find the highlighted link element in the panel that opens.
3. Look at Computed styles, find `color`, and compare it to `background-color` on the panel around it.

If they match, you have the same problem, and the setting controlling that colour is the one to change. Themes with a Custom CSS box in Theme settings let you override it directly without hunting.

## Why are my policy links not showing at all?

Different problem, and worth ruling out.

**The policy is empty.** Shopify only publishes and links a policy once it has content. A blank Refund policy simply does not exist.

**The footer block was removed.** In the theme editor, open the Footer section and check whether the policy block is still there. It can be deleted like any other block, and added back the same way.

**They are there but they are white.** That is this article. Highlight the area with your mouse and see whether text appears.

## Can I add my policy pages to a menu?

Yes, and many stores do it instead of relying on the automatic block.

Go to Content, Menus, open your footer menu, and add a menu item. When you pick the link target, choose Policies, and the list of your filled-in policies appears. Pick one.

This gives you control over the wording and the order, which the automatic block does not. It also means the link is a normal menu item styled by your footer, so the popup colours in this article do not apply to it.

The trade-off is that it stops being automatic. Add a new policy later and you have to remember to add the menu item too. For the rest of what the footer can do, see [How to Edit the Footer in Shopify](/blog/shopify-edit-footer).

## Policy pages versus regular pages

These get mixed up constantly, so here is the distinction.

**Policy pages** live in Settings, Policies. They have fixed URLs under `/policies/`, they are created for you, and themes can find them automatically. You cannot change their handles, apply a page template to them, or add sections to them.

**Regular pages** live in Online Store, Pages. You create them, name them, choose their URL, and can assign them a template with whatever sections you like.

If you want a policy with real design on it, the usual approach is to write a normal page and link that from your footer menu instead. Be aware that some regions and some payment providers expect the standard policy URLs to exist, so most stores keep both.

## What to check if it still looks wrong

- **Check you edited the live theme.** The theme editor happily opens a draft copy. If nothing changed on your storefront, confirm the theme you edited is the published one.
- **Hard refresh.** Theme settings are cached. Reload with the cache bypassed before concluding it did not work.
- **Check the other popups.** Search, cart tooltips and the language selector share the setting. Fixing one can break another if your palette is unusual.
- **Check the border and shadow.** If the box is still hard to see against your page, the same panel has Border color, Border thickness and Drop shadow. A one pixel border does more for a white popup on a white page than any text colour will.

The whole thing is one colour field. The reason it takes people so long to find is that the policies popup looks like part of the footer, and the setting that controls it sits in a completely different part of the theme editor, under a name that does not mention policies at all.


---

---
title: "How to Create a Pop Up Discount on Shopify, Free"
description: "Shopify's own free Forms app builds a discount popup in about five minutes. Here is every step, including the theme setting that decides whether it appears at all. Tested live."
---

## The problem

A discount popup is the standard way stores turn a first-time visitor into an email address. "Get 10% off your first order", a name and an email, then a code.

Most merchants assume they need a paid app for it. They do not. Shopify has its own free app, **Shopify Forms**, and it does the whole job including attaching the discount code.

I built one on a test store from scratch. Below is every step with the real screens, plus the one setting that stops, with nothing to flag it the popup from ever showing.

## Install Shopify Forms

Search the App Store for **Shopify Forms** and install it. It is published by Shopify, it is free, and there is no plan to choose.

Once installed it appears in your admin sidebar under **Apps** as **Forms**.

## Create the popup

Open Forms and click **Create form**.

![The Create form dialog with Popup form and Inline form as the two types, and a form name field](/images/blog/shopify-pop-up-discount/01-create-popup-form.png)

Two choices:

- **Popup form** - displays on top of a page
- **Inline form** - embedded in a page

Pick **Popup form**, give it a name only you will see, and click Create. The Create button stays disabled until you have picked a type, which is easy to miss because the popup card does not look unselected.

You land in the form editor. The defaults are sensible: an overlay popup, a first name and email field, a Submit button, and a consent line. You can ship it as it stands.

## Attach the discount

The discount control sits further down the page than you would expect. Scroll to the **Success** section. Under **Confirmation behavior** there is a block headed **Discount (optional)** with the line "Display a discount to customers after they submit". Click **Select a discount**.

![The Select discount dialog listing existing discount codes, with a notice that only discount codes are supported](/images/blog/shopify-pop-up-discount/02-only-discount-codes-supported.png)

Note the message at the top: **"At this time, only discount codes are supported."**

That is a real limitation. You cannot attach an automatic discount to a form, because the whole point is to hand the shopper a code they type in later. If your list is empty, there is a **Create new discount** button at the bottom of this dialog, or you can make one first following [how to create a discount code in Shopify](/blog/shopify-create-discount-code).

I picked a 10% off code with a one-use-per-customer limit. The preview on the right updates straight away.

![The form editor with the discount attached, and a preview reading Here's your discount followed by the code and its terms](/images/blog/shopify-pop-up-discount/03-discount-shown-after-submit.png)

The success panel reads *"Here's your discount: WILLKOMMEN10 - 10% off one-time purchase products - One use per customer"*, with a copy button beside the code. The wording under the code is generated from the discount itself, so if you edit the discount later the popup follows.

Press **Save**, then **Turn form on**. The status badge goes from Inactive to Active.

## The step that gets skipped

The moment the form is created, Shopify shows this:

![An orange banner reading Your form was created, now install the Forms theme app embed](/images/blog/shopify-pop-up-discount/04-install-the-forms-theme-app-embed.png)

*"Your form was created. Now install the Forms theme app embed. In order for your forms to work on your storefront, go to your online store editor and turn on the Forms theme app embed."*

An app embed is a piece an app loads on every page of your store, switched on from the theme editor rather than placed on one page.

**An active form does not appear on your store until you do this.** The form says Active. The preview looks right. The storefront shows nothing. This is the single most common reason a Shopify Forms popup "does not work".

Click **Go to online store**, or go to **Online Store → Customize**. In the theme editor, click the **App embeds** icon in the left rail, find **Forms**, and turn the toggle on.

![The theme editor App embeds panel with the Forms toggle on and the popup rendering live in the preview](/images/blog/shopify-pop-up-discount/05-forms-app-embed-turned-on.png)

The popup appears in the preview the instant you flip it. Press **Save**.

One thing to remember: the app embed is a **per theme** setting. Enable it, then change theme or duplicate the theme and publish the copy, and the popup is gone again. If a popup stops appearing after a redesign, this is why.

## Seeing it live

With the embed on, I loaded the storefront.

![The storefront home page with the discount popup over it, headed 10 percent off one-time purchase products, with First name and Email fields and a Submit button](/images/blog/shopify-pop-up-discount/06-popup-live-on-the-storefront.png)

The popup opens on the first page view with a dimmed overlay behind it. The headline is taken from the discount summary rather than typed by hand, which is handy but also means you should override it if you want real marketing copy.

And the code works. Applied at checkout on a \$40 cart:

![Checkout with the code applied, showing a 4.00 order discount and a total of 42.48](/images/blog/shopify-pop-up-discount/07-code-applied-at-checkout.png)

\$4.00 off, total \$42.48, savings \$4.00. End to end, from popup to money off.

## Settings worth changing before you launch

The defaults will run, but four of them are worth a look. They are all in the form editor.

**Trigger.** By default the popup fires on **first page view** after **0 seconds**, meaning instantly. That is aggressive. Under **Behavior → Trigger** you can move it to the second or third page view, or add a delay. A short delay converts better and annoys less.

**Exit intent.** In the same section there is a checkbox for "Show form when visitors attempt to leave page". Desktop only. Pairs well with a later page view trigger.

**Teaser.** Under **Popup display** there is a Teaser setting, defaulting to "If the customer closes the form without subscribing". That leaves a small tab in the corner so a shopper who dismissed the popup can bring it back. Set it to Never if you want to ask once and leave it at that.

**Devices.** Under **Behavior → Devices** you can limit the popup to desktop or mobile. A full-screen overlay on a phone is worth thinking about carefully.

**Pages.** By default the popup shows everywhere. "Show only on specific page types" lets you keep it off the cart and checkout, which is usually the right call.

## Floating versus overlay

Under **Popup display** there are two shapes:

- **Overlay** dims the page and centres the form. Higher signup rate, more interruption.
- **Floating** sits in a corner without dimming anything, and you choose the position.

Overlay is the default. If your traffic is mostly returning customers, floating is the less costly choice.

## Doing it without any app at all

You can, but you should know what you are giving up.

Every free Shopify theme has an email signup form built into the footer, and Dawn also ships a **Email signup** section you can add to any page. Neither is a popup and neither hands out a code. They collect the email; you then have to email the discount separately.

If you will not install anything, "popup discount without an app" comes down to a Custom Liquid section holding a `<dialog>` element with your code in it and a small script to open it after a delay. A Custom Liquid block is an empty box in the theme editor where you paste your own code. That gives you the popup and the code, but no email capture, no customer record, and no marketing consent, which is the part that made the popup worth building.

Shopify Forms is free, made by Shopify, and captures the consent properly. There is not much of a case for hand-rolling this one.

## Popup apps, if you want more

The category is crowded. The names that come up most are Privy, OptiMonk and Klaviyo's own onsite forms.

What they add over Shopify Forms is mostly targeting and testing: A/B tests on the copy, rules by traffic source or country, spin-to-win wheels, and deeper reporting. If you are running a serious acquisition programme those matter. For "collect emails and give 10% off", Forms already does it.

One point in Forms' favour beyond price: it writes straight into your Shopify customer list with consent recorded, so no sync step and no second system holding your subscribers.

## Common problems

**The popup does not appear on the storefront.** The theme app embed is off. This is the answer nine times out of ten. Online Store → Customize → App embeds → Forms.

**It appeared once and never again.** Forms remembers that you dismissed it. Test in a private window, or clear site data.

**It does not appear after switching theme.** App embeds are per theme. Turn it on again in the new one.

**The discount picker is empty.** You have no discount **codes**. Automatic discounts do not show and cannot be attached. Create a code first.

**The code does not work at checkout.** Check whether another discount is already on the cart. By default two discounts refuse to run together and one is dropped without a message, which [discount combinations](/blog/shopify-discount-combinations) explains.

**Submissions are not arriving by email.** In the form editor, tick "Send an email for each submission to this form" under Email notifications. It is off by default, and notifications go to your store contact email.

## The main points
- **Shopify Forms** is free, made by Shopify, and does discount popups natively.
- Forms → **Create form** → **Popup form** → name it → Create.
- Attach the code in the **Success** section under **Discount (optional)**. **Only discount codes work**, never automatic discounts.
- **Save**, then **Turn form on**.
- Then the step that gets skipped: **Online Store → Customize → App embeds → turn Forms on → Save.** Without it an active form shows nothing, and the setting is per theme.
- Change the **Trigger** off "first page view, 0 seconds" before you launch.
- Verified live: popup on the storefront, code applied at checkout, \$4.00 off a \$40 cart.


---

---
title: "How to Build a Shopify Portfolio Gallery (No App)"
description: "Show a filterable gallery of non-product images on your Shopify portfolio site. Keep every photo in one place, tag it by category, and let each page show its own group. Free, native, tested, with the full code and screenshots."
---

## The problem

Shopify is built to sell products, so it has no built-in home for a portfolio: a set of images that are not products, that you want to group by category and show across several pages.

A designer moving from Squarespace asked exactly this on the Shopify Community. They had about 50 portfolio images, wanted to tag them into three categories, and show them as a filtered carousel on four pages: one page per category, plus an all page.

The usual answers are an app, or a hack like turning every image into a blog post. Neither is great. You can do it natively, for free, and keep one clean list of images that feeds every page.

## The idea in one line

Store the photos as metaobjects (Shopify's built-in custom content), then add one small theme section that reads that list and shows only the category you pick per page.

Two things make this work:

- Metaobjects give you a single source of truth. You upload and tag each photo once.
- A custom section can loop through every metaobject entry in Liquid and filter it, so the same section on four pages produces four different galleries.

If metaobjects are new to you, they are just structured records you define yourself. This guide keeps it to the two fields you actually need.

## Step 1: create the data holder

Go to Settings, then Custom data, then Metaobjects, and Add definition. Name it Portfolio image. Give it these fields:

- Image, type File (image).
- Category, type Single line text, set to a list so one photo can sit in more than one category.
- Caption, optional, a single line of text.

![Create a Portfolio image metaobject with an Image field and a Category list](/images/blog/shopify-portfolio-gallery/01-metaobject-definition.png)

One setting matters for later: open the definition options and make sure storefront access is on, so your theme can read the entries.

## Step 2: add your photos

Open Portfolio image and Add entry. Upload the image, type its Category, for example Weddings, and Save. Repeat for every photo. Fifty entries sounds like a lot, but it is the only place you ever add an image, and it replaces re-uploading the same photo onto four different pages.

Because Category is a list, a single photo can carry two tags, for example Portraits and Events, and it will show up on both pages.

![Add each photo as an entry and tag its Category, so one list feeds every page](/images/blog/shopify-portfolio-gallery/02-entries-one-source.jpeg)

This entry list is your single source of truth. Change a photo here and every page that uses it updates at once.

## Step 3: add the gallery section

This is the only code step, and you do it once.

Go to Online Store, Themes, then the three dots menu and Edit code. Under Sections, choose Add a new section, name it portfolio-gallery, delete the sample content, paste the code below, and Save.

```liquid
{%- comment -%}
  Filterable portfolio carousel, sourced from "Portfolio image" metaobjects.
  One source of truth (Settings > Custom data > Portfolio image); each page
  sets its own Category to show only that group. Leave Category blank for All.
{%- endcomment -%}

{%- assign filter_category = section.settings.category | strip -%}
{%- assign cw = section.settings.card_width -%}
{%- assign ch = section.settings.card_height -%}

<style>
  #pf-{{ section.id }}{padding:{{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;}
  #pf-{{ section.id }} .pf-head{max-width:var(--page-width,1200px);margin:0 auto 18px;padding:0 20px;}
  #pf-{{ section.id }} .pf-head h2{margin:0;}
  #pf-{{ section.id }} .pf-wrap{position:relative;max-width:var(--page-width,1200px);margin:0 auto;padding:0 20px;}
  #pf-{{ section.id }} .pf-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;scrollbar-width:thin;}
  #pf-{{ section.id }} .pf-item{flex:0 0 auto;width:{{ cw }}px;max-width:78vw;scroll-snap-align:start;margin:0;}
  #pf-{{ section.id }} .pf-item img{width:100%;height:{{ ch }}px;object-fit:cover;border-radius:{{ section.settings.radius }}px;display:block;background:#eee;}
  #pf-{{ section.id }} .pf-cap{margin-top:8px;font-size:.9rem;opacity:.8;}
  #pf-{{ section.id }} .pf-arrow{position:absolute;top:calc(({{ ch }}px / 2) - 4px);transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:rgba(0,0,0,.6);color:#fff;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;}
  #pf-{{ section.id }} .pf-prev{left:8px;}
  #pf-{{ section.id }} .pf-next{right:8px;}
  #pf-{{ section.id }} .pf-empty{padding:40px 20px;opacity:.7;}
</style>

<div id="pf-{{ section.id }}">
  {%- if section.settings.heading != blank -%}
    <div class="pf-head"><h2>{{ section.settings.heading }}</h2></div>
  {%- endif -%}
  <div class="pf-wrap">
    <button class="pf-arrow pf-prev" aria-label="Previous" data-pf-prev>&#8249;</button>
    <div class="pf-track" data-pf-track>
      {%- assign shown = 0 -%}
      {%- for item in shop.metaobjects.portfolio_image.values -%}
        {%- assign cats = item.category.value -%}
        {%- if filter_category == blank or cats contains filter_category -%}
          {%- assign media = item.image.value -%}
          <figure class="pf-item">
            {%- if media != blank -%}
              <img src="{{ media | image_url: width: 900 }}" alt="{{ item.caption | escape }}" loading="lazy" width="{{ cw }}" height="{{ ch }}">
            {%- endif -%}
            {%- if item.caption != blank -%}<figcaption class="pf-cap">{{ item.caption }}</figcaption>{%- endif -%}
          </figure>
          {%- assign shown = shown | plus: 1 -%}
        {%- endif -%}
      {%- endfor -%}
      {%- if shown == 0 -%}<p class="pf-empty">No portfolio images in this category yet. Add them in Settings &gt; Custom data &gt; Portfolio image.</p>{%- endif -%}
    </div>
    <button class="pf-arrow pf-next" aria-label="Next" data-pf-next>&#8250;</button>
  </div>
</div>

<script>
  (function(){
    var root=document.getElementById('pf-{{ section.id }}');
    if(!root)return;
    var track=root.querySelector('[data-pf-track]');
    function step(){var c=track.querySelector('.pf-item');return c?c.getBoundingClientRect().width+16:300;}
    root.querySelector('[data-pf-next]').addEventListener('click',function(){track.scrollBy({left:step(),behavior:'smooth'});});
    root.querySelector('[data-pf-prev]').addEventListener('click',function(){track.scrollBy({left:-step(),behavior:'smooth'});});
  })();
</script>

{% schema %}
{
  "name": "Portfolio gallery",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Portfolio" },
    { "type": "text", "id": "category", "label": "Category to show", "info": "Type one category exactly as tagged (e.g. Weddings). Leave blank to show all." },
    { "type": "range", "id": "card_width", "min": 180, "max": 480, "step": 20, "unit": "px", "label": "Card width", "default": 320 },
    { "type": "range", "id": "card_height", "min": 180, "max": 520, "step": 20, "unit": "px", "label": "Card height", "default": 380 },
    { "type": "range", "id": "radius", "min": 0, "max": 32, "step": 2, "unit": "px", "label": "Corner radius", "default": 12 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Top padding", "default": 40 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 40 }
  ],
  "presets": [ { "name": "Portfolio gallery" } ]
}
{% endschema %}
```

A few notes on what the code does, so you can adjust it:

- It loops `shop.metaobjects.portfolio_image.values`, which is every entry you created.
- It shows an entry only when its Category matches the section setting, or when that setting is left blank.
- It lays the images out as a horizontal carousel using CSS scroll snap, with arrow buttons and native swipe on mobile.
- Card width, height, corner radius and spacing are all section settings, so you never touch the code again to restyle it.

## Step 4: put it on your pages

Create your pages first: Weddings, Portraits, Events, and an All page. Then customize each page, Add section, pick Portfolio gallery, and set Category to show. Type the category exactly as you tagged it. Leave it blank on the All page so it shows everything.

![In the theme editor, add the Portfolio gallery section and set Category to show](/images/blog/shopify-portfolio-gallery/03-section-category-setting.png)

That is the whole build. The same section, with one setting different, becomes a different gallery on each page.

## The result

Each page reads the same photo list and shows only its category. Here is the Weddings page, which shows only the photos tagged Weddings:

![The Weddings page shows only Weddings photos, in a carousel](/images/blog/shopify-portfolio-gallery/04-weddings-page-filtered.png)

And the All page, where Category is left blank, shows every photo:

![The All page leaves Category blank and shows every photo](/images/blog/shopify-portfolio-gallery/05-all-page.png)

## Why this beats the common workarounds

- No separate app to pay for, learn, or keep updated.
- No turning images into blog posts, which clutters your blog and mixes portfolio work with articles.
- One list of images, not four copies. Add a photo once and it appears wherever its category is shown.
- It is theme-native, so it inherits your fonts and colors and survives most theme updates because it is a self-contained section.

## Adjusting it

- To add a fourth or fifth category, you do nothing to the code. Tag photos with the new category and set a page to show it.
- To change the look, use the section settings for card size and corners, or edit the small CSS block at the top of the section.
- To show captions, fill the Caption field on each entry. Leave it empty to hide it.

## The no-code alternative

If you would rather not paste code at all, a gallery app that supports categories will do the job: Foto Gallery, POWR Image Gallery, or Common Ninja are common picks. You trade a monthly fee and an extra app for skipping the one code step. For a portfolio site that mostly shows off work, the native route above is usually the better long-term choice.

## The short version

- Shopify has no built-in portfolio, but metaobjects plus one section give you a filterable gallery for free.
- Create a Portfolio image metaobject with an Image field and a Category list, then add your photos once.
- Add the portfolio-gallery section, put it on each page, and set the Category to show. Blank shows all.
- One list of images feeds every page, so nothing is duplicated.

Tested on a Dawn store: six photos across Weddings, Portraits and Events, shown on four pages that each filter to their own category.


---

---
title: "Shopify POS Discount Code: Where the Controls Are"
description: "A discount code is Online Store only, and the POS switch lives on the discount, not in POS settings. Here is what each control actually does, checked in a live admin."
---

## The problem

You made a discount. It works online. A customer walks into the shop, the cashier tries to use it, and nothing happens.

So you open **Point of Sale → Settings** looking for the discount section, and there isn't one.

That is not a bug, and there is no page you have missed. The POS discount controls are somewhere else entirely, and they are not the same for a code as they are for an automatic discount. I went through the admin on a live store to map exactly which control does what.

## POS settings has no discount section

Start by ruling out the obvious place. Open the **Point of Sale** channel and click **Settings**. You get four groups:

![Point of Sale settings in the Shopify admin, showing the General, Customization and Register groups, with no discount section anywhere on the page](/images/blog/shopify-pos-discount-code/05-pos-settings-no-discount-section.png)

- **General** - retail staff, locations, language, activity log
- **Customization** - POS app, customer display, printed receipts
- **Register** - cash management, recent carts
- **Returns** - policy, store credit, return reasons

No discounts anywhere. Every POS discount control lives on the **discount itself**, over in the Discounts section of your admin.

## A discount code is Online Store only

Here is the first surprise, and it is the answer to most of these questions.

Open any **discount code** and look at the right hand **Details** panel.

![A Shopify discount code page with the Details sidebar reading For Online Store, and no POS control anywhere on the page](/images/blog/shopify-pos-discount-code/04-discount-code-online-store-only.png)

It reads **"For Online Store"**.

Now scroll the whole page. Discount value, purchase type, eligibility, minimum purchase, maximum uses, combinations, active dates. There is **no POS control at all** on a discount code. Not a checkbox, not a dropdown, not a channel picker.

The one channel-ish thing on the page is **Sales channel access → "Allow discount to be featured on selected channels"**, tucked under the sidebar. Read that carefully: it is about *featuring* the discount, promoting it in a channel's surfaces. It is not a switch that grants a code to your till.

So if your question is "how do I make my discount code work in POS", the first answer is that the code page gives you nothing to turn on.

## An automatic discount does have a POS switch

Now open an **automatic** discount instead. Under **Eligibility** there is a checkbox that does not exist on codes:

**Apply on POS Pro locations**

Leave it unticked and the Details sidebar says this:

![An automatic discount with the Details sidebar reading POS excluded](/images/blog/shopify-pos-discount-code/02-pos-excluded.png)

**"POS excluded."** In plain words, on the page, without you having to guess.

Tick the box, press Save, and the same line changes:

![The same discount after ticking the box, with the Details sidebar now reading POS Pro included](/images/blog/shopify-pos-discount-code/03-pos-pro-included.png)

**"POS Pro included."**

That one line is the fastest way to audit a discount. You do not need to scroll to the checkbox; the sidebar tells you the state.

Note the exact wording: **POS Pro**, not POS. That is a paid tier of Shopify POS, not the free POS Lite that comes with every plan. If you are on Lite, ticking the box does not buy you the behaviour.

## What the cashier actually uses

Most in-store discounting never touches the Discounts page at all. It happens on the till, through a tile.

Go to **Point of Sale → Settings → Customization → POS app**. You get an editor with a live picture of the register screen.

![The Shopify POS smart grid editor showing an Apply discount tile next to Add custom sale and Add staff to sale, with a live cart on the right](/images/blog/shopify-pos-discount-code/01-pos-smart-grid-apply-discount.png)

On the smart grid, beside **Add custom sale** and **Add staff to sale**, there is a tile called **Apply discount**.

That is the everyday in-store discount: the cashier taps it and takes money off the cart there and then. It is a **manual** discount. It has nothing to do with the Discounts page, it does not need a code, and it is not restricted by any of the settings above.

This is the piece that resolves most of the confusion. There are two completely separate systems:

- **Discounts page** - promotions you configure in advance, and only automatic ones carry a POS switch
- **Apply discount tile** - a cashier taking money off a specific sale, on the spot

If what you want is "let my staff give a customer 10% off at the counter", you do not need a discount code at all. You need the tile, and you need staff permissions that allow discounts.

## Setting up an in-store only promotion

Putting the pieces together, here is the shape that works for "15% off, in store only, no code needed":

1. **Discounts → Create discount → Amount off products**, and choose **Automatic discount** rather than a code.
2. Set the value and pick the products or collections it applies to.
3. Under **Eligibility**, tick **Apply on POS Pro locations**.
4. Save, and confirm the sidebar says **POS Pro included**.

The reverse case matters just as much. If you have an online promotion that must **not** apply in store, leave that box unticked and confirm the sidebar says **POS excluded**. That is the default, so an automatic discount you built for the website is already excluded from the shop unless you deliberately opted in.

## Why "POS Pro" and not just "POS"

Shopify POS comes in two tiers. **POS Lite** is included with every plan. **POS Pro** is a paid add-on per location.

The checkbox names the tier on purpose. Location-aware discounting is a Pro feature, along with things like custom staff permissions and smart grid customisation depth.

Before you plan a campaign around it, check which tier your locations are on. It is worth doing this before you write the promotion into a poster, not after.

## Making the product available in store at all

One layer below discounts, and easy to miss: a product has to be **published to the Point of Sale channel** before it can be sold there, let alone discounted.

Open a product and check the sales channel list. If Point of Sale is not included, the product does not exist as far as the till is concerned. You can fix a batch at once from **Products**, selecting them and using **Include in sales channels**.

If a discount seems to be ignored on one product in store, check its channels before you touch the discount.

## Discount combinations apply in store too

A POS sale runs the same discount engine as the website, so the same combining rules bite.

By default a discount refuses to run alongside any other discount, and when two want to apply Shopify keeps one and drops the other, with nothing on the till to say so. A cashier who applies a manual discount on top of an automatic promotion may find the promotion is dropped rather than stacking.

That mechanism, and the setting that changes it, is covered in [discount combinations](/blog/shopify-discount-combinations). The rule to know is that **both** discounts have to allow each other, not just one.

## One caveat

I set all of this up in a real admin and watched the sidebar flip from "POS excluded" to "POS Pro included" when I ticked the box and saved. That part is shown above.

I did not stand at a till and ring up a sale, because that needs the POS app on a device signed in to a Pro location. So the steps here are the setup, which is where every one of these questions actually gets stuck.

## Quick answers

**Can POS use discount codes at all?** The code's own page offers no POS control, and its Details line says "For Online Store". Plan in-store promotions as automatic discounts with the POS Pro box ticked, or as manual discounts through the Apply discount tile.

**Why isn't my automatic discount applying in store?** Almost certainly the **Apply on POS Pro locations** box. Open the discount and read the sidebar: "POS excluded" means it will never fire at a till.

**Where do I turn on discounts in POS settings?** You do not. POS settings has General, Customization, Register and Returns, and no discount section.

**How does a cashier give an ad hoc discount?** The **Apply discount** tile on the smart grid. Configure the grid in Point of Sale → Settings → Customization → POS app.

**Do I need POS Pro?** For the automatic discount switch, yes, the label says POS Pro. The Apply discount tile is the everyday alternative.

## The main points
- POS **Settings** has no discount section. Every control is on the discount itself.
- A **discount code** has no POS control at all, and its Details line reads **"For Online Store"**.
- An **automatic** discount has one: **Eligibility → Apply on POS Pro locations**.
- The Details sidebar states the result in words: **"POS excluded"** by default, **"POS Pro included"** once ticked. Verified by ticking the box and saving.
- The label says **POS Pro**, a paid tier, not the free POS Lite.
- The tool cashiers actually use is the **Apply discount** tile on the smart grid, which is a manual discount and unrelated to the Discounts page.
- Products must be published to the Point of Sale channel before any of this matters.


---

---
title: "Shopify POS Payment Methods: No Saved Cards for B2B"
description: Shopify POS takes cash, cards, gift cards and store credit, but it cannot keep a trade customer's card on file or bill a company on terms. Here is the setup that does, with screenshots from a live admin.
---

## The problem

A trade customer walks into your shop, picks up stock, and expects it on their account. You want to tap their card once, keep it on file, and charge it at the end of the month like every other wholesale order.

Shopify POS will not do that. It has no way to save a card, and it has no idea that the person at the counter belongs to a company account.

A Shopify Partner asked about this on the Shopify Community in September 2026: a way to keep B2B credit cards on file while POS is the till. The answer is that the card has to be saved somewhere else first, and the sale has to be written up somewhere else too. Both places are free and already in your admin.

## What Shopify POS can actually charge

Shopify's POS payment list is short and fixed:

- Cash
- Payment cards, through a card reader or Tap to Pay
- Gift cards
- Store credit
- Shop Pay Installments
- Interac debit, and local methods in some countries
- Multiple or partial payments across the above

Nothing on that list is a stored card. Every card payment in POS is a one-off: the card is read, the money moves, and nothing is kept for next time.

That is the first half of the answer. The second half is that POS also has no concept of a **company**, which is Shopify's record for a business you sell to. A POS cart can be given a customer, and that is all. Company pricing, payment terms and saved cards all hang off the company record, so none of them reach a POS sale.

The wholesale apps built for POS do not change this. They add tiered pricing and minimum order quantities inside the POS app. They do not add a stored card, because the storing part is not theirs to do.

## Who is allowed to save a card

On Shopify, saving a card for later use is called **vaulting**: the card details go to the payment processor, and your store keeps a token it can charge again. For B2B it works at the **company location** level, which is the individual address or branch you sell to.

Two rules decide the whole workflow:

1. Vaulting needs **Shopify Payments**. Third-party gateways do not offer it.
2. Only the buyer can do it. Shopify's documentation is direct: credit cards can be vaulted only by B2B customers, and card details typed into the Shopify admin cannot be vaulted.

So there is no screen where a staff member adds a card for a customer, and the company location page shows it. Payment methods sits in the sidebar with no edit or add control next to it, unlike Payment terms and Checkout just below.

![Company location page in the Shopify admin showing the Payment methods section with no add button](/images/blog/shopify-pos-payment-methods-b2b/01-company-location-payment-methods.png)

The buyer has two ways to put a card there:

- Tick the save-card box during a B2B checkout on your online store.
- Sign in to their customer account and add a card to the company location.

Either one takes a minute, and it only happens once. In a shop, the practical version is handing them an iPad with your store's customer account login open while you pack the order.

## Before any of this: are they a company?

B2B on Shopify means the buyer sits under **Customers > Companies**, not just in your customer list. A company can hold several contacts, its own price list, its own payment terms and its own saved cards.

Since April 2026 this is no longer a Shopify Plus feature. Company profiles, custom catalogs and payment terms are included on Basic, Grow and Advanced as well.

If your trade customers are currently plain customers with a wholesale tag, nothing in this article applies to them yet. Set up the company and the location first, add the person as a contact, then carry on.

## Step 1: write the in-store sale as a company order

Since POS cannot hold the company, the sale is written up in the admin instead. Two routes reach the same place:

- **Customers > Companies**, open the location, then **Create order**.
- **Orders > Drafts > Create order**, search for the contact, then pick the company location from the list that appears under their name.

The second route is the one that catches people out. Searching for a customer who is also a company contact gives you a choice: the company location, or **Personal order**. Personal order writes an ordinary retail order with retail pricing. The company location is the one that applies wholesale pricing and payment terms.

![Shopify draft order customer search showing the company location and a Personal order option](/images/blog/shopify-pos-payment-methods-b2b/02-draft-order-company-location.png)

Once the company location is attached, the order gains a PO number field, the company's catalog prices, and its payment terms. Add the products the customer is taking, exactly as you would ring them up.

One thing to watch is stock. An order written in the admin is not a POS sale, so it does not automatically draw down the shop's counter stock the way a till sale does. Check which location the order is fulfilled from before you mark it fulfilled.

## Step 2: take the money, or put it on terms

The Payment panel on a company order has three controls:

- **Collect payment**, which charges now. If the buyer has saved a card, it is listed here, so a single click bills the card they saved.
- **Send invoice**, which emails the buyer a link to pay the order themselves.
- **Payment due later**, which places the order on the company's payment terms, such as Net 30.

![The Payment panel on a Shopify B2B order with the Collect payment menu open](/images/blog/shopify-pos-payment-methods-b2b/03-collect-payment-b2b-order.png)

For a counter sale to an account customer, Payment due later plus the company's terms is usually what you want. The customer leaves with the goods, the order shows as payment pending, and the money is collected when the term is up.

## Step 3: charge the saved card when the term is due

Shopify does not charge a vaulted card by itself when payment terms expire. Somebody has to trigger it, either by hand or with automation.

By hand it is the same Collect payment button, on the order, after the due date.

Automatically, it is two blocks in **Shopify Flow**, Shopify's free automation app:

- Trigger: **Payment schedule is due**
- Action: **Charge vaulted payment for B2B order**

![Shopify Flow workflow with the Payment schedule is due trigger and the Charge vaulted payment for B2B order action](/images/blog/shopify-pos-payment-methods-b2b/04-flow-charge-vaulted-payment.png)

The action fills in the payment schedule for you and charges the buyer's saved card for that schedule's balance. Turn the workflow on once and every company order with terms bills itself on its due date.

Two things it needs: Shopify Payments as your processor, and a vaulted payment method on the order. An order from a company that has never saved a card will not be charged by the workflow, so a monthly check of orders still sitting on payment pending is worth keeping.

## Common questions

### Can I add the customer's card to their account myself?

No. The card has to be entered by the customer, at an online checkout or in their own customer account. Shopify does not accept manually entered card details into the vault from the admin.

### Can an app save a card during a POS sale?

Not into Shopify's vault. The API that creates a saved card from raw card details needs a PCI-compliant card session, which app developers do not get, and the other route only imports cards that already exist in Stripe, Authorize.Net or Braintree. An app can vault a card in its own payment provider and charge it there, which means a second processor, a second set of fees and payments that do not show up as Shopify Payments payouts.

### Does POS apply my B2B price list?

No. A POS cart can carry a customer, not a company location, so catalog prices and volume rules for that company are not applied. POS apps handle this with their own pricing rules, which are configured separately from your B2B catalogs.

### Can I start the sale in POS and finish it in the admin?

Partly. POS Pro can save a cart as a draft order, and it can email the cart to the customer so they pay through an online checkout link. What it cannot do is attach the company, so the draft arrives as an ordinary customer order. The quicker path is writing the order from the company location in the first place.

### What about house accounts and running tabs?

Payment terms are the native version of a house account. Set them on the company location, and every order written for that location inherits them. There is no separate credit-limit feature in the admin, so a limit has to be tracked with a third-party app or by hand.

## If it did not work

- **No saved card in Collect payment.** The buyer has not vaulted one yet, or you are looking at a personal order rather than a company order. Open the company location and check whether Payment methods still reads None.
- **No payment terms on the order.** Terms come from the company location. Set them under Payment terms on that location, then write a new order.
- **The Flow action does not appear.** Search the action list for "vaulted". It is a Shopify action, so it needs no extra app, but it will not run without Shopify Payments.
- **The customer search only offers Personal order.** That contact is not attached to a company location. Add them as a contact on the location first.

## Words that get mixed up

- **Customer**: one person in your customer list. This is all POS understands.
- **Company**: the business you sell to, holding contacts, price lists and terms.
- **Company location**: the branch or address you invoice. Catalogs, payment terms and saved cards all attach here, not to the company as a whole.
- **Vaulted card**: a card the buyer saved for reuse. Your store holds a token, never the number.
- **Payment terms**: how long the company has to pay, such as Net 30. Sold now, paid later.

## Tested on

Checked on a Shopify store with B2B turned on, September 2026. The company location's Payment methods block is read-only, a draft order offers the company location alongside Personal order, the company order's Payment panel carries Collect payment, Send invoice and Payment due later, and Flow lists Charge vaulted payment for B2B order under the Payment schedule is due trigger. The store used for the screenshots does not run Shopify Payments, so the saved-card entry in Collect payment is not pictured.


---

---
title: "Shopify POS UI Extensions: What They Can and Cannot Add"
description: POS UI extensions are how an app puts its own screens inside Shopify POS. Here is what the smart grid already does for free, what an extension can add on top, and the limits worth knowing before you pay for one.
---

## The question behind this

A retailer with an image-heavy catalog wanted one thing from Shopify POS: browse a collection as a grid of photos instead of a list of product names. Their staff recognise a ceramic bowl faster by sight than by reading "Stoneware Bowl, Speckled Grey, 16cm" off a list.

Shopify POS does not have a list-to-grid toggle. They asked on the Shopify Community in September 2026, and the follow-up question is the one that matters to any shop owner: can an app do it, and what would it cost to find out?

The answer runs through **POS UI extensions**, which are the pieces an installed app is allowed to add inside the POS app on your iPad or phone. Most of what an app can do at the till, it does through one of these. Before you go shopping for an app, it is worth knowing how much of the job the built-in POS editor already does.

## Start with the smart grid, because it is free

The **smart grid** is the home screen of the POS app: the page of square buttons your staff see before they ring anything up. Each button is a **tile**, and you decide what the tiles are.

Two of the tile types carry a real photograph, and that is what makes the smart grid the closest thing POS has to a visual product browser today.

### Open the POS editor

The editor lives in the Shopify admin, not on the device.

Go to **Sales channels > Point of Sale > Settings**, then under **Customization** click **POS app**.

![Shopify Point of Sale settings with the Customization card and the POS app row](/images/blog/shopify-pos-ui-extensions/01-pos-settings-customization-pos-app.png)

Shopify's own documentation sends you somewhere else: to the Point of Sale overview page, where a **Customize the in-store experience** card has an **Edit** button for the POS app. That card appears only after a POS device has been set up on the store. On a store that has never signed a device in, the card is not on the page at all. The Settings route above works either way, so use it if the card is missing.

### Add the tiles

Inside the editor, pick a page in the left sidebar and click **Add tile**. Eight tile types are offered: Action, Link, Fee, Discount, Product, Collection, Fulfillment and Embedded Apps.

![The Add tile menu in the Shopify POS editor listing all eight tile types](/images/blog/shopify-pos-ui-extensions/04-pos-add-tile-types.png)

**Product** and **Collection** are the only two that render a real photo as the face of the tile. The rest take an icon in a colour you pick. A collection tile also carries a small badge with the number of products in it, which updates as the collection does.

Here is a page built from one collection tile and three product tiles, in the editor's live POS preview:

![A Shopify POS smart grid page with product and collection tiles showing product photography](/images/blog/shopify-pos-ui-extensions/05-pos-product-collection-tiles.png)

That is a visual picker, built with no code and no app, and it is worth building before spending money on anything else.

### The catch: a product with no photo

A product tile for a product that has no image gives you a flat dark rectangle with the title and price on it. It still works, but it stops the page being scannable, which was the entire point.

![A Shopify POS product tile for a product with no image, showing only the title and price](/images/blog/shopify-pos-ui-extensions/06-pos-tile-without-product-image.png)

Fill in the missing product photos before you build the page, or leave those items to search.

### Different layouts per shop, already supported

The original request included wanting different layouts per location. That part exists.

A **smart grid template** is one saved layout. Open the **"..."** menu beside the template name in the editor:

![The Shopify POS smart grid template menu with Rename, Duplicate and Assign to locations](/images/blog/shopify-pos-ui-extensions/02-smart-grid-template-menu.png)

- **Duplicate** makes a second template you can edit independently.
- **Rename** lets you call it something staff will recognise, like "Homewares counter".
- **Assign to locations** opens a dialog where you pick All locations, or tick individual shops.

![The Edit locations dialog assigning a Shopify POS smart grid template to specific shops](/images/blog/shopify-pos-ui-extensions/03-assign-smart-grid-to-locations.png)

So a two-shop retailer can run one grid at the flagship and a different one at the concession, from the same admin, at no extra cost.

## Where the built-in editor stops

Tiles only cover the products you place by hand. Tap a collection tile and you are into Shopify's own browse screen, and nothing in the POS editor changes how that screen is laid out.

The editor's **Settings** tab holds five things: Receipt options, Required customer information, Add staff to sale, Nearby device log in and Gift cards.

![The Settings tab of the Shopify POS editor, with no option for browse layout](/images/blog/shopify-pos-ui-extensions/07-pos-editor-settings-tab.png)

There is no view or layout control. For a catalog of a few thousand items, a curated page of tiles per department is as far as the free tools go.

## What a POS UI extension actually is

An app you install can add its own pieces to the POS app. Those pieces are POS UI extensions, and each one attaches to a fixed spot Shopify calls a **target**. An extension cannot appear wherever it likes; it appears where a target exists.

The targets most relevant to a browsing problem are these two:

- A **home screen tile**, which is an app's own tile sitting among yours on the smart grid.
- A **home screen modal**, which is the full screen the app opens when that tile is tapped.

That pairing is the standard shape. The tile is the entry point and can show a short label plus a badge; the real work happens in the modal, which gets the whole screen.

Inside the modal the app is not writing free-form HTML. It assembles Shopify's own components, which keeps it looking like POS rather than like a website embedded in POS. The set includes images, stacks for laying things out in rows and columns, clickable wrappers, buttons, a search field, scroll boxes, headings, badges, text fields and a handful of pickers.

There is no ready-made grid component. The documentation says so directly: complex grid-like layouts need nested stacks. So a photo grid is built from a stack of rows, each row a stack of image-plus-label cells, each cell wrapped in a clickable. That is ordinary work, not a blocker.

### What it can read and write

Two APIs carry the weight for this kind of screen.

The **product search API** is POS's own search, exposed to the extension. It can run a text query, page through results 50 at a time, sort alphabetically or by date added, look up products or variants by ID in batches of up to 50, and read each product's featured image as a URL. That last part is what makes a photo grid possible at all.

The **cart API** is what turns a tapped photo into a sale. It can add a line item, add properties or a discount to a line, set the customer, attribute staff, and clear the cart.

So the round trip works: search or fetch products, draw them as photos, and add the tapped one to the cart without leaving the screen.

### The two limits worth knowing before you commission one

Both of these shape the price of the work, so hand them to whoever quotes for it.

**POS product search has no collection filter.** It takes a search string and a sort order, and that is the whole input. There is no "products in collection X" query. An app that wants to show you a collection has to get that list from its own server, using Shopify's admin API, then look the products up in POS by ID.

**Bulk product lookup is capped at 50 per call.** Extra IDs beyond 50 are dropped rather than queued. A 400-product department means eight calls and some paging logic, which is fine, but it is work that has to be written and it is why "just show me the collection" is not a one-afternoon build.

## Common questions

### Does a POS UI extension need POS Pro?

The extension mechanism itself is not the gate. Individual features are: the Fulfillment tile type in the smart grid, for example, is available only at locations on Shopify POS Pro. Check the app's own listing for what it requires, and check your locations' plan before assuming.

### Can an app change the existing POS product list?

No. An extension adds its own screens at the targets Shopify provides. It does not restyle or replace screens that POS already draws, so the collection browse screen stays as it is whatever you install. An app's grid is a second, parallel way in, reached from its own tile.

### Will an app's grid show my B2B prices?

Not by itself. A POS cart carries a customer, not a company, so company catalog pricing does not reach the till. Any app-side pricing is the app's own rules, configured separately from your Shopify catalogs. That is a separate problem with its own answer, covered in [Shopify POS payment methods](/blog/shopify-pos-payment-methods-b2b).

### Are there apps that already do this?

Nothing on the App Store does collection browsing as a photo grid. The nearest listings extend a different part of the till: one adds a predefined product list to the cart from a smart grid tile, another extends POS search so staff can match on a part number or on a metafield, which is an extra field you add to a product to hold your own information. Both are POS UI extensions, which is a useful proof that the mechanism works for this kind of screen.

### Where do I ask Shopify for the toggle itself?

The Shopify Community boards are merchants and partners, so a feature request posted there reaches other shop owners rather than the team that builds POS. Shopify's developer community at community.shopify.dev is where product staff take part.

## If the tiles are not behaving

- **The Customize the in-store experience card is missing.** No POS device has been set up on the store yet. Use Sales channels > Point of Sale > Settings > Customization > POS app instead.
- **A tile shows no image.** It is a Product tile for a product without a featured image, or it is a tile type other than Product and Collection. Only those two carry photographs.
- **Changes are not on the device.** Save in the editor, then check the device is signed in to a location the template is assigned to. A template assigned to All locations covers every shop.
- **The collection tile count looks wrong.** The badge counts products in the collection, which for an automated collection can move as products change. Open the collection in the admin to see the current members.

## Words that get mixed up

- **Smart grid**: the home screen of the POS app, made of tiles.
- **Smart grid template**: one saved smart grid layout. You can have several and assign each to particular shops.
- **Tile**: one button on the smart grid. Eight types exist; Product and Collection are the two that show a photo.
- **POS UI extension**: a screen or tile an installed app adds inside POS.
- **Target**: the fixed spot in POS where an extension is allowed to appear, such as the home screen tile or the modal it opens.
- **POS Pro**: the paid POS tier. Some tile types and features need it.

## Tested on

Checked in the Shopify POS editor on a live store in September 2026. The tile types are Action, Link, Fee, Discount, Product, Collection, Fulfillment and Embedded Apps. A product tile with a featured image renders the photo; the same tile for a product with no image renders the title and price on a flat background. The template menu offers Rename, Duplicate, Assign to locations, Set as default and Delete, and Assign to locations lists every store location individually. The editor's Settings tab carries no layout or view option. The extension components, targets and API limits come from Shopify's POS UI extensions reference, not from a device test.


---

---
title: "Shopify Pre Order Emails: Recurring Updates With Flow"
description: Shopify Flow has no action that emails a customer freely, but it can read a product metafield off an order line item. Here is a workflow that sends a pre-order ETA update every five days per order, tested end to end.
---

## The problem

A merchant on the Shopify Community sells pre-orders and wanted to keep buyers informed automatically. Their requirement was specific:

- Every open pre-order gets an update email
- The email contains the current estimated ship date, which lives on a product metafield
- It repeats roughly every five days
- It stops when the order ships or is cancelled

Three people replied. All three converged on the same conclusion: Shopify Email cannot render a product metafield, so move the whole journey to Klaviyo or Listrak.

That conclusion is half right, and it is right for the wrong reason. The wrong reason matters, because it pushes you into a migration you may not need.

I built the whole thing in Shopify Flow to find out where the real wall is.

## Flow can read the metafield. That is not the blocker.

The premise the thread was built on is that the ETA is hard to get at. It is not.

Flow reads a product metafield straight off an order line item. In the Flow editor, add a variable and walk the path `lineItems / product / metafield`, then enter your namespace and key.

![Flow resolving a product metafield off an order line item into a plain String](/images/blog/shopify-pre-order-emails/01-metafield-off-order-line-item.png)

An unstructured entry of `custom.preorder_eta` yields a variable at `getOrderDataForeachitem/lineItems/product/preorderEta` with a `value` of type **String**.

This matters more than it looks, because it settles a debate the thread spent several replies on: whether you need to copy the ETA onto an *order* metafield at checkout so the email has something to read.

You do not, and you should not. Copying it at checkout takes a snapshot. Move the product's ETA from Early August to Late September and order #1041 still says Early August, until you build a second workflow to go back and re-sync every open order. Read it live off the product and there is nothing to re-sync: one edit on the product updates every future email for every buyer.

## The real blocker is the send

Search Flow's action list for "email". You get exactly five results, and not one of them sends a custom email to a customer.

![All five email actions in Shopify Flow, none of which emails a customer freely](/images/blog/shopify-pre-order-emails/02-five-email-actions-in-flow.png)

- **Send internal email** goes to your staff. Shopify's own documentation states you cannot use variables to customise the email address, so you cannot point it at the buyer.
- **Send B2B access email to company contact** is a fixed template for a specific purpose.
- **Send payment reminder** is a fixed template.
- **Send order invoice** is a fixed template.
- **Send draft order invoice** is a fixed template.

So the delivery genuinely does have to leave Shopify. The thread's conclusion was correct on that point.

But "delivery leaves Shopify" is a much smaller statement than "move the journey to another platform". Flow has a **Send HTTP request** action. Any transactional email provider will send a message from a single POST. So Flow can keep the selection, the schedule, the state and the data, and hand off only the rendering.

## The build

Six steps. Trigger, query, loop, gate, send, write back.

![The finished workflow, ending with the step that writes the send date back to the order](/images/blog/shopify-pre-order-emails/04-finished-workflow-write-back.png)

### 1. Scheduled time, daily

Flow's **Scheduled time** trigger runs once per occurrence, with a minimum interval of ten minutes. Set it to daily.

Run it daily even though you want a five day cadence. The reason is in the cadence section below and it is the single most important design decision here.

### 2. Get order data

This is the selection step. One query picks the orders that still need chasing.

![The Get order data step with the pre-order query and the 100 order cap](/images/blog/shopify-pre-order-emails/03-get-order-data-query.png)

```
fulfillment_status:unshipped AND status:open AND tag:'pre-order'
  AND updated_at:<'{{ scheduledAt | date_minus: "5 days" }}'
```

Note the cap: **Get order data returns at most 100 orders per run.** The field is capped at 100 in the UI and the helper text says so. Past that, narrow the query or run the workflow more than once a day.

### 3. For each loop

The trigger fires once. The query returns a list. The **For each loop** runs the rest of the workflow once per order in that list.

### 4. A condition

Gate on the metafield existing, so an order containing a product with no ETA set does not send a blank email.

`Preorder eta value` **is not empty and exists**.

### 5. Send HTTP request

POST to your email provider's send endpoint. The body carries the customer's email, the order name, and the ETA.

One thing will bite you here. Inside the request body, the condition's `lineItems_item` variable does not resolve. Flow rejects it with *"lineItems\_item is invalid. Replace this variable."* Use the documented loop form instead:

```liquid
{% for li in getOrderDataForeachitem.lineItems %}{{ li.product.preorderEta.value }}{% endfor %}
```

That validates.

### 6. Update order metafield, last

Write the send date back to the order. Namespace `custom`, key `last_eta_sent`, type **Date and time**, value `{{ scheduledAt }}`. Flow auto-binds the order for you inside the loop.

**This step must sit after the send, not before.** If it runs first and the send then fails, the order is marked as done and that buyer misses their update.

## Send it transactional, not marketing

Worth being explicit about, because it is a failure mode with no alert behind it.

If you route these through a marketing stream, the send gates on marketing consent. In Flow you see it as `Customer does not accept marketing for customer id=[ID]`, and the email is simply not sent.

A pre-order ETA update is a transactional message about an order the customer has already paid for. It is not marketing, and it should not be filtered by a marketing subscription checkbox. Use your provider's transactional stream, not its campaign or marketing stream.

Every provider separates these. On most of them it is a different API endpoint or a different message stream ID, so getting it right costs nothing at setup time and everything if you get it wrong.

## The cadence has to be per order, not per schedule

This is the part that decides whether the whole thing feels right to your customers.

The obvious build is to set the schedule itself to every five days. Do not do that. It mails every customer on the same days, regardless of when they ordered. Someone who bought yesterday gets an ETA update tomorrow, then nothing for five days.

You want each order on its own five day clock, counted from its own last email.

**And the gap has to live in the query, not in a condition.** This is a hard limitation worth knowing before you build it the other way round.

A metafield comes back to Flow as a **String**, and a condition on a String only offers string operators. The full list Flow gives you is: equal to, not equal to, includes, does not include, is at least one of, is not any of, starts with, does not start with, ends with, does not end with, empty or does not exist, not empty and exists.

There is no "is before" and no "less than". **You cannot compare dates in a Flow condition.**

So the recency test goes into the search query, using `updated_at`:

```
updated_at:<'{{ scheduledAt | date_minus: "5 days" }}'
```

That returns only orders nothing has touched for five days. And because step 6 writes a metafield, it touches the order and bumps `updated_at`. Each order therefore pauses for its own five days after its own email, and the schedule can run daily to catch whichever orders have come due.

Still write the metafield, even though the query is what does the gating. It is a readable record of when each order was last emailed, which you will want the first time a customer asks.

## Stopping needs no exit logic

A nice property of doing the selection in the query: you do not have to build an unsubscribe or a stop condition.

`fulfillment_status:unshipped AND status:open` stops matching the moment an order ships or is cancelled. The order drops out of the result set on the next run and the emails stop on their own.

That is one fewer piece of state to maintain, and one fewer way for a customer to keep getting emails about an order that already arrived.

## What this costs versus a platform migration

The thread's recommendation was to move to a marketing automation platform. Worth comparing what each option actually asks of you.

**Flow plus an HTTP call.** Flow is free and already installed. You need a transactional email provider, which for this volume is usually free or a few dollars a month. You verify a sending domain once. Total setup is an afternoon.

**A marketing automation platform.** You rebuild the customer data sync, learn a second templating system, pay a monthly fee that scales with contact count, and now maintain order state in two places. You also inherit the marketing consent problem above unless you are careful to use their transactional path.

The migration is the right answer if you also want campaigns, segmentation and flows for everything else. It is a large answer to the narrow question of "how do I send a templated email from an automation".

## On the sending domain

Whichever provider you pick, you verify your domain with them and add two DNS records. Using Postmark as the example, since that is what I set up:

- **DKIM** as a `TXT` record
- **Return-Path** as a `CNAME`, hostname `pm_bounces`, value `pm.mtasv.net`

The from address stays yours, so customers see your domain rather than the provider's.

One thing to plan for: Shopify keeps sending its own order and shipping confirmations through Shopify. So you end up with two sending paths on the same domain. Most people point the new one at a subdomain, so this mail builds its own reputation without affecting the main domain.

## Common questions

**Can I do this without a metafield at all?**

Yes, if the ETA is the same for everything. Put the date in the email body as literal text and edit the workflow when it changes. The metafield earns its place when different products have different dates.

**What if an order contains several pre-order products with different ETAs?**

The Liquid loop above prints all of them. If you want one line per item, put the surrounding markup inside the loop rather than around it.

**Does the 100 order cap mean this breaks at scale?**

It means you need more than one run per day past 100 open pre-orders. Splitting the query by tag or by product, and scheduling each variant at a different hour, is the usual answer.

**Can Flow send the email itself if I only need internal notifications?**

Yes. **Send internal email** is fine when the recipient is your team. It is only customer-facing sends that need the HTTP hand-off.

**Why not use the Order paid trigger and skip the schedule?**

Because you want a repeating email, not a one-off. A trigger-based workflow fires once per event. The schedule plus query pattern is what gives you recurrence.

## If it did not work

**Flow rejects a variable in the request body.** The `lineItems_item` form does not resolve inside an action. Use the `{% for li in ... %}` loop shown above.

**`{{scheduledAt}}` autocompletes to something malformed.** The editor closes Liquid braces for you. Type `{{scheduledAt` and let it finish, rather than typing both closing braces yourself.

**Emails go to some customers and not others.** You are on a marketing stream and non-subscribers are being dropped. Switch to the transactional stream.

**Every order gets an email every day.** The `updated_at` clause is missing, or step 6 is not running, so nothing is touching the order to reset its clock.

**Nothing sends at all.** Check the workflow is turned on, then check the run history. Flow logs each run and shows which step failed and why.

## Tested on

Built end to end in Shopify Flow on a dev store: confirmed the product metafield resolves off the order line item as a String, confirmed the search query and the 100 order cap behave as described, confirmed the request body validates once the Liquid loop replaces `lineItems_item`, and confirmed the condition operator list for a String metafield contains no date comparison. The workflow was left as a draft and not wired to a live email provider, so the send itself was validated at the request level rather than by receiving mail.


---

---
title: "Shopify Pre-Order Without an App: Message at Checkout"
description: "Run a Shopify pre-order and show a pre-order message at checkout without an app or Plus, using the name of an automatic discount."
date: "2026-08-12"
---

## Show a pre-order message at checkout without an app

A merchant asked this on the Shopify Community. They are launching a denim set: a jacket that is ready to ship, and jeans that are a pre-order until September. The jacket and jeans sell as a set at a bundle price.

They wanted one thing. When a customer buys the set, the checkout should say the order is now a pre-order because the jeans ship in September. When someone buys just the jacket, it should stay a normal ready-to-ship order with no pre-order message.

So the message has to be conditional. It appears only for the set, not for every order. And they did not want to pay for an app or move to Shopify Plus to do it.

This is very doable. I set it up on a test store and the whole thing takes about two minutes. The trick is to reuse something the set already has: its automatic discount.

## Why this is normally hard

On a standard Shopify plan, the native checkout is locked. You cannot drop a custom text block into the checkout page and you cannot add "if the cart contains X, show this message" logic there. That control only opens up on Shopify Plus, through a feature called checkout extensibility.

That is why most answers to this question say the same two things. Either "you need Plus," or "add a note that shows on every product." A store-wide note is easy, but it is not what this merchant asked for. A pre-order warning that shows on every order, including plain jacket orders, is worse than no message. It confuses the people buying an in-stock item.

The paid route is a pre-order app. Those work, and for full pre-order handling they are the right tool. But this merchant only needed the message, and they had already built the set with a native automatic discount. So an app was overkill.

## The prerequisite: the set already has an automatic discount

Here is the part that makes the free method work.

This merchant had already set up their denim set as a native "Buy X Get Y" automatic discount. Buy the jacket, get the jeans at the bundle price. That discount only applies when both items are in the cart. A jacket on its own does not trigger it. Two jackets do not trigger it. Only the real set does.

If you have not built that yet, do it first. It is the cleanest way to price a "1 of each" bundle on Shopify with no app. We wrote it up here: [create an automatic bundle discount in Shopify](/blog/shopify-bundle-discount-automatic).

Once that discount exists, you already have a piece of text that shows up in the cart and at checkout, and only when the set is present. That piece of text is the discount's name.

## The fix: rename the discount to your pre-order message

Every automatic discount has a title. Shopify prints that title wherever the discount appears, which includes the cart and the checkout order summary. It shows only when the discount actually applies.

So you turn the title into your message.

1. In your Shopify admin, go to **Discounts**.
2. Open the automatic discount you created for the set.
3. Change the **Title** to your message. For example: `Denim Set: pre-order - jeans ship in September`.
4. Click **Save**.

That is the whole change. No code, no app, no Plus.

![Rename the automatic discount to your pre-order message](/images/blog/shopify-pre-order-without-app/01-rename-discount-checkout-message.png)

Look at the note Shopify itself prints right under the title field: "Customers will see this in their cart and at checkout." That is Shopify confirming the behavior. The title is customer-facing text.

Because the discount only fires for the set, the result is exactly what the merchant wanted:

- Jacket on its own: no discount, no message, normal ready-to-ship order.
- Jacket and jeans together: the discount fires and your pre-order line appears in the cart and at checkout.

If you built your set through a bundle app instead of a native discount, the same idea works. Rename the bundle inside that app, since its name shows on the order the same way.

## Add a bigger notice on the cart page

The discount title is short. It sits in the totals area next to the saving, so it reads as a small line, not a banner.

If you want a louder, more obvious notice before checkout, add one to the cart page. This is still no app and no Plus, and it is still conditional. It only needs a small block of Liquid, which is Shopify's template language.

In your theme, go to **Online Store > Themes > Customize**, open the **Cart** page, choose **Add section**, and add a **Custom Liquid** block. Paste this in and swap in your real product handles:

```liquid
{% assign has_jacket = false %}
{% assign has_jeans = false %}
{% for item in cart.items %}
  {% if item.product.handle == 'your-jacket-handle' %}{% assign has_jacket = true %}{% endif %}
  {% if item.product.handle == 'your-jeans-handle' %}{% assign has_jeans = true %}{% endif %}
{% endfor %}
{% if has_jacket and has_jeans %}
  <p style="padding:12px;background:#fff4e5;border:1px solid #e0a900;border-radius:6px;">
    Pre-order: your denim set ships in September once the jeans arrive.
  </p>
{% endif %}
```

A product handle is the last part of the product's web address. For a product at `yourstore.com/products/denim-jacket`, the handle is `denim-jacket`. You can see it in the admin under the product's **Search engine listing**.

The block checks the cart for both products. It shows the banner only when both are present. So a shopper with just the jacket never sees it.

One limit to know. This banner lives on the cart page, not inside the checkout itself. The discount-title method above is still the one that reaches the actual checkout on a standard plan.

## Running the pre-order itself without an app

The message is only half of a pre-order. The other half is letting people order the jeans while they are out of stock. You can do that natively too.

On the jeans product, open the variant and set inventory to **Continue selling when out of stock**. Now the item stays buyable at zero stock, which is the core of a pre-order. Add "(pre-order)" to the product title or description so it is clear on the product page.

That covers a basic pre-order with no app. What native Shopify does not do on its own:

- Charge a deposit now and the balance later.
- Show a dedicated "Pre-order" button instead of "Add to cart."
- Send automatic "your pre-order ships soon" update emails.

If you need those, that is where a pre-order app earns its fee. For the update emails specifically, there is a no-app route using Shopify Flow, which we covered in [Shopify pre-order emails with Flow](/blog/shopify-pre-order-emails).

## Can you show a message at checkout without Plus?

Not a free-form custom block inside the checkout page. That needs Shopify Plus and checkout extensibility.

But you have two conditional messages that work on any plan. The automatic discount title, which reaches the checkout order summary. And a cart-page notice, which shows just before checkout. Between them you can flag a pre-order clearly without Plus.

## How do I show a message for only certain products?

Tie the message to something that only those products trigger. The discount title works because the discount is product-specific. The cart Liquid block works because it checks for specific product handles.

Avoid a store-wide checkout notice for this. It shows on every order and cannot tell a set apart from a single item. That is the exact problem the merchant was trying to avoid.

## Do Shopify pre-orders need an app?

No, not for a basic one. "Continue selling when out of stock" plus a clear label and a pre-order message gets you a working pre-order with no app and no Plus.

You reach for an app when you need deposits, partial payments, a separate pre-order button, or automated status emails. For a small launch like a single denim set, the native setup is usually enough.

## What to check if the message does not show

- **The discount is not applying.** The title only appears when the discount fires. Add the real set to a test cart and confirm the discount lands. If it does not, the discount conditions are wrong, not the message.
- **You only added one item.** By design, one item does not trigger the set discount, so no message shows. Add both.
- **The cart banner does nothing.** Check the product handles in the Liquid block. A wrong handle means the `if` never matches. Copy each handle from the product's Search engine listing.
- **You are on Plus and want it inside checkout.** Then skip the workaround and use a checkout UI extension, which can place a proper message block in the checkout itself.

## Pre-order vs draft vs a normal out-of-stock item

These get mixed up, so quickly:

- A **pre-order** is an in-stock-later item you deliberately let people buy now, usually with "continue selling when out of stock" turned on.
- A **draft** product is hidden from the storefront entirely. Customers cannot buy it. That is not a pre-order.
- A normal **out-of-stock** item has "continue selling" off, so the storefront blocks the sale.

For this denim set, the jeans are a pre-order: buyable now, shipping in September, and clearly labelled so the buyer is not surprised.

## The short version

You do not need an app or Shopify Plus to show a conditional pre-order message at checkout. If your set already runs on an automatic discount, rename that discount to your message. Shopify prints it in the cart and at checkout, and only when the set is in the cart. Add a Custom Liquid cart banner if you want a louder notice, and turn on "continue selling when out of stock" to accept the pre-orders themselves.


---

---
title: How to Change the Price Font Size on a Shopify Collection Page
description: Shopify themes have no setting for the price size on a product card. Here is the one rule that shrinks it on collection pages only, where to paste it so it cannot reach your product pages, and how to keep the crossed out sale price in proportion.
---

## The problem

You look at your collection page and the prices are shouting. On a grid of four products the number is as heavy as the product name above it, sometimes heavier, and the whole row reads as a wall of digits rather than a set of products.

There is no theme setting for this. You can change your heading font, your body font, and the overall type scale, and none of those move the price on a product card independently of everything else. Turn the body scale down to shrink the price and you shrink your paragraphs and your buttons with it.

![A Shopify collection page where the price on each product card is set at 16 pixels with wide letter spacing](/images/blog/shopify-price-font-size/01-before-price-too-big.png)

The fix is one line of CSS, pasted into a box Shopify already gives you. This guide shows where it goes, and more importantly how to scope it so your product pages are left alone.

## Why the obvious rule causes a second problem

Search for this and the answer you will find most often is:

```css
.price { font-size: 12px; }
```

That does shrink the price on your collection page. It also shrinks the price on your product page, in your cart drawer, in your related products row, in search results, and anywhere else your theme prints a price. `.price` is a shared class, meaning the same label is used on every price in the theme, so a rule written against it on its own reaches all of them.

Usually that is not what anyone wants. The price on a product page is supposed to be prominent. It is the number a shopper is deciding on. The one on a card in a grid of twelve is doing a different job and can be much smaller.

So the rule needs a second part that says which prices you mean.

## The class that scopes it

On a Shopify product card, the title and price sit together inside an element labelled **`.card-information`**. A class is just a label on an element that CSS can point at, and this one exists on every product card and nowhere else.

Write the rule as `.card-information .price` and it reads as "a price that is inside a product card". Prices on product pages are not inside a card, so they never match.

That is the whole trick, and it is worth understanding because the same pattern solves most "it changed in the wrong place too" CSS problems on a Shopify store.

## Step by step

### 1. Open the theme editor

From your Shopify admin go to **Online Store > Themes**, then click **Customize** on the theme you are using.

### 2. Switch the preview to a collection page

The editor opens on your home page. Use the page dropdown in the top bar and pick **Collections**, then any collection. The preview reloads showing your product grid.

You need to be on a collection page because the box you are about to use belongs to a section, and the product grid section only exists here.

### 3. Click Product grid

In the left sidebar, under Template, click **Product grid**.

![The Shopify theme editor with Product grid selected in the left sidebar](/images/blog/shopify-price-font-size/02-click-product-grid.png)

### 4. Open the Custom CSS box

The right hand panel now shows the settings for that section. Scroll it to the very bottom, past Filtering and sorting and past Padding, and click the row labelled **Custom CSS**.

![The Custom CSS box at the bottom of the Product grid section settings](/images/blog/shopify-price-font-size/03-custom-css-box.png)

Every section and block in the theme editor has one of these. Anything you paste in is automatically limited to that section, which gives you a second layer of safety on top of the `.card-information` scoping.

### 5. Paste the CSS

```css
.card-information .price{font-size:1.2rem;letter-spacing:.04rem}
.card-information .price .price-item{font-size:inherit}
```

Then click **Save** in the top right.

### 6. Check it

![The same collection page with the card prices reduced to 12 pixels](/images/blog/shopify-price-font-size/04-after-price-smaller.png)

The prices are smaller, the product titles have not moved, and if you open a product page the price there is exactly as it was.

## Reading the numbers

**`1.2rem` is 12 pixels.** This catches people out constantly. In Dawn and the themes built from it, one rem works out to ten pixels rather than the usual sixteen, so every size in a Shopify stylesheet looks about ten times larger than the pixel value. The theme ships the card price at `1.6rem`, which is 16 pixels.

Some useful values:

- `1.6rem` is 16px, the theme default
- `1.4rem` is 14px, a gentle reduction
- `1.3rem` is 13px
- `1.2rem` is 12px, what the screenshots use
- `1.1rem` is 11px, about as small as stays comfortable to read

You can write `font-size:12px` instead if you prefer. It works identically. The rem version is only there to match the way the rest of the theme is written.

**`.04rem` is the letter spacing**, the space between individual characters. The theme ships `.1rem`, which is generous and part of why the price reads as wide even before you consider its size. Dropping it tightens the number up. Set it to `0` to remove the extra spacing entirely.

## What the second line is for

```css
.card-information .price .price-item{font-size:inherit}
```

If a product is on sale, the card shows two numbers: the old price crossed out, and the new one. Themes set the crossed out one at its own size, which is smaller than the main price but fixed. Shrink only the main price and the two end up nearly the same size, which looks wrong in the other direction.

`font-size: inherit` tells both numbers to take whatever size the line above set. They stay in proportion at any value you choose.

If you would rather leave the crossed out price at the size your theme picked, delete that second line.

## Two limits to know about the Custom CSS box

**It holds 500 characters.** The two rules above use about ninety, so there is plenty of room, but the limit applies to the whole box rather than per rule. If you build this up over time and Save suddenly stops working, that is why.

**It rejects the `content` property.** Not relevant here, but worth knowing if you try to extend this later. Any rule containing `content` is refused with "Invalid property value: content", which rules out adding text through `::before` or `::after` in this box.

## Making it apply everywhere else

The Custom CSS box covers one section, so the rule reaches collection pages and nothing else. That is usually exactly right. If you want it in more places:

- **A Featured collection row on your home page** is its own section. Open the home page in the editor, click that section, and paste the same two lines into its Custom CSS box.
- **Related products on your product pages** is a separate section again, usually called Related products or You may also like.
- **Everywhere at once**, use the theme wide Custom CSS box instead. Click the Theme settings icon in the top left of the editor, scroll to the bottom, and paste there. The trade off is that it is not scoped to a section, so it depends entirely on `.card-information` to stay out of your product pages. That is reliable, but you have less of a safety net if you later broaden the selector.

## If nothing changes

- **Check which section is selected.** Pasting into Collection banner instead of Product grid is the most common cause, and the two sit next to each other in the sidebar.
- **Check your theme's class names.** Themes bought outside the Shopify Theme Store often use their own. Right click a price on your collection page, choose Inspect, and look at the classes on the element and its parents. If you do not see `price` and `card-information`, substitute whatever is there.
- **Try adding `!important`.** Write it as `font-size:1.2rem !important`. Some themes set the price size with a more specific rule that wins by default. Reach for this only when a correct selector does nothing, not as a habit.
- **Hard refresh.** Your browser may still be holding the old stylesheet.

## Changing the product title instead

While you are in the same box, the title on a card is `.card__heading`, so the matching rule is:

```css
.card-information .card__heading{font-size:1.5rem}
```

Between those two you can set the relationship between the name and the number however you want it, which is usually the real goal rather than the price size on its own.

## What you end up with

One rule, in a box Shopify provides, scoped twice over, with no theme file edited and nothing that a theme update can overwrite. Delete the contents of the box and the price goes straight back to the size your theme shipped.


---

---
title: "Shopify Product Customizer: Photo Upload, Frames and a Live Preview"
description: How to let customers upload a photo, pick a frame, add text and approve a live preview before they buy. A tested setup with a Shopify product customizer app, step by step.
---

## The problem

A merchant asked on the Shopify Community how to let a customer upload their own photo, drop it into one of five frame designs, type text in three places on top, and then see a preview they approve before paying.

That is a very common request for anyone selling framed prints, photo gifts, signs or personalised decor. Shopify can collect text on a product page, but it has no built-in way to draw the customer's photo, a frame and their text together as a picture on the product page. For that you need a product customizer app.

I built the whole thing on a test store running the Horizon theme. The end result looks like this: the customer's photo sits inside the gold frame they picked, with "OUR FIRST HOME", "The Smiths" and "Est. 2026" drawn on top.

![Before: a plain product page with no way to upload a photo or pick a frame](/images/blog/shopify-product-customizer-photo-upload/01-before.png)

![After: the customer's photo in the chosen frame with three lines of text and an approval box](/images/blog/shopify-product-customizer-photo-upload/02-after.png)

## What a product customizer app does

A product customizer (also called a product personalizer) adds extra fields to a product page and draws what the customer enters on top of the product image, live, as they type.

It works in layers, like a stack of see-through sheets:

- **The background** is a plain photo of your product, for example a blank print.
- **The photo layer** holds the image the customer uploads.
- **The frame layer** is a picture of the frame with a see-through middle, so the photo shows through it.
- **The text layers** hold whatever the customer types.

Each layer has a position on the preview. When the customer changes a field, only that layer is redrawn.

This is different from a plain product options app. An options app adds fields like a text box or a file upload, but it does not draw anything. The customer types "The Smiths" into a box and has to imagine the result. A customizer shows it.

## Before you start: prepare your frame artwork

The frames are the part that takes the most thought, so prepare them first.

- **Save each frame as a PNG with a see-through middle.** PNG is an image format that supports transparency. If the middle of the frame is white instead of see-through, it will cover the customer's photo.
- **Make them all the same size and shape.** I used square 1000 x 1000 pixel images, which matched the app's default preview size.
- **Take one plain photo of the product** to use as the background, for example the blank print or the empty frame on a wall.
- **Name each frame clearly.** Customers see these names when they hover over each option, so "Gold Ornate" is better than "frame-4".

I made five frames for the test: Classic Black, Natural Oak, White Gallery, Gold Ornate and Floral.

## Setting up the customizer, step by step

I used Zepto Product Personalizer because it has the most reviews in this category (1,297 at the time of writing, rated 4.9) and it supports photo upload, image choices and text layers in one app. The same idea works in the other apps listed further down, with different button names.

1. Install **Zepto Product Personalizer** from the Shopify App Store.

![Install Zepto Product Personalizer from the Shopify App Store](/images/blog/shopify-product-customizer-photo-upload/03-install.png)

2. In the app, open **Product Options** and click **+ Add Product Option**.

![Product Options page with the Add Product Option button](/images/blog/shopify-product-customizer-photo-upload/04-add-product-option.png)

3. Tick the product you want to personalise and click **Add**. Each option set belongs to one product.

![Pick the product and click Add](/images/blog/shopify-product-customizer-photo-upload/05-pick-product.png)

4. Set **View background** to **Uploaded Image** and upload the plain product photo you prepared.

![Set the view background to your plain product photo](/images/blog/shopify-product-customizer-photo-upload/06-background.png)

5. Click **+ Add option** and choose **Image Upload**. This is the field where the customer uploads their photo.

![Add option menu with Image Upload highlighted](/images/blog/shopify-product-customizer-photo-upload/07-add-image-upload.png)

6. Name it "Upload your photo". Open the **Personalizer** tab, set **Layer** to **Top**, then drag the box on the preview over the area where the photo should sit.

![Image Upload settings with Layer set to Top](/images/blog/shopify-product-customizer-photo-upload/08-image-upload-layer.png)

7. Click **+ Add option** and choose **Image Choices**. Click **+ Create Image Set**, upload your five frame PNGs and give each one a name.

![Image set with five frame designs](/images/blog/shopify-product-customizer-photo-upload/09-frame-image-set.png)

8. On the frame option's **Personalizer** tab, set the position to X 0, Y 0, W 100, H 100. The numbers are percentages of the preview, so this makes the frame cover all of it.

![Frame position set to cover the whole preview](/images/blog/shopify-product-customizer-photo-upload/10-frame-position.png)

9. Click **+ Add option** and choose **Text Single Line**. Do this three times, for the top, middle and bottom text. On each one, pick the font, size and colour, then drag its box into place.

![Text field settings with font size and colour](/images/blog/shopify-product-customizer-photo-upload/11-text-layers.png)

10. Click **+ Add option** and choose **Checkbox**. Label it "I have checked my preview and approve it" and keep **Required** ticked.

![Required approval checkbox](/images/blog/shopify-product-customizer-photo-upload/12-approve-checkbox.png)

11. Click **Save**.

![Save the option set](/images/blog/shopify-product-customizer-photo-upload/13-save.png)

12. Go to **Online Store** > **Themes** > **Customize**, open **App embeds** in the left sidebar, turn on **Product Personalizer** and click **Save**. An app embed is a piece an installed app adds to your theme, and nothing shows on the storefront until it is on.

![Theme editor App embeds with Product Personalizer turned on](/images/blog/shopify-product-customizer-photo-upload/14-app-embed.png)

On my test store the fields appeared under the price as soon as the embed was on. There was no need to add a block to the product page by hand.

## Getting the layers in the right order

The first time I tested it, the frame and text showed up but the customer's photo did not. The upload worked and the file name appeared under the field, yet the preview stayed white where the photo should be.

The cause was the **Layer** setting on the photo field. I had set it to **Bottom**, which puts the photo underneath the background image. My background was a solid photo of a blank print, so it covered the customer's photo completely. Switching the photo to **Top** fixed it straight away.

Two rules keep the stack right:

- **Everything the customer adds goes on Top.** The photo, the frame and the text all sit above the background.
- **Order the options in the list the way you want them stacked.** I kept the photo first, the frame second and the three texts after that. The frame drew over the edges of the photo and the text drew over both.

Bottom is for a different setup, where the background is a product mock-up with a see-through window, such as a phone case, and the customer's design should show through from behind.

## Letting customers approve the preview

The merchant in the thread wanted customers to approve the design before purchase. There is no separate approval screen in Zepto, but a required checkbox does the same job on the product page. The customer sees the preview, ticks "I have checked my preview and approve it", and then adds to cart.

If you want a stricter proof step, where you send a proof after the order and wait for a reply, that is a separate workflow. Ask the app's support whether they offer it before you pick one.

## What it costs

The Zepto listing says "Free, from $9.99/month". When I installed it on my test store, the app went straight to an approval screen for the Starter plan, $9.99 every 30 days with a 15-day free trial, before it would open. There was no free plan to pick on that screen. Check the plan page when you install so the charge does not surprise you.

## Best product customizer apps for Shopify

If Zepto does not fit, these are the other personalizer apps with the most reviews in this category. Figures are from the Shopify App Store listings at the time of writing.

- **Zepto Product Personalizer**: 1,297 reviews, 4.9 stars, from $9.99/month. Photo upload, image choices, text, live preview.
- **Teeinblue Product Personalizer**: 337 reviews, 4.9 stars, free plan and $49/month. Aimed at print-on-demand shops.
- **Customily Product Personalizer**: 241 reviews, 4.8 stars, free plan and $49/month. Live previews and print-ready files.
- **Inkybay - Product Personalizer**: 159 reviews, 4.5 stars, from $19.99/month. Full design tool with custom sizes and pricing.
- **Kickflip product configurators**: 135 reviews, 4.6 stars, from $49/month. A full product builder, more than a photo frame needs.

The one-star reviews across these apps repeat two themes: preview bugs, such as a blurry or wrongly sized preview, and slow support. Before you commit, test the preview with a large phone photo and a long line of text, since those are the cases customers hit first.

## Can you do this without an app?

Not with Shopify's own settings. A theme can add a text box or a file upload to the product page, but drawing the photo, frame and text together as a live preview needs custom code in the theme. A developer would build a drawing area on the product page and save the customer's choices with the cart.

That is worth paying for when the preview has to match the finished product exactly, for example exact frame proportions and fonts, or when you need a print-ready file created for every order. For most shops an app gets you live in an afternoon.

## If the preview does not show

- **No fields on the product page?** Check that the app embed is turned on in the theme you are actually using, and that you clicked Save in the theme editor.
- **Frame shows, photo does not?** Set the photo field's Layer to Top.
- **Photo is hidden behind a white square?** The frame PNG has a white middle instead of a see-through one. Re-export it with transparency.
- **Text is in the wrong place?** Drag the text box on the preview in the app, or type the position numbers. They are percentages of the preview, not pixels.
- **Changes do not appear?** Click Save in the app, then reload the product page.

## Product customizer vs product options: which do you need?

Pick a **product options app** if customers only need to tell you something, such as an engraving line or a gift note, and they do not need to see it on the product. These apps are cheaper and simpler.

Pick a **product customizer** when the customer needs to see the result before buying, which is almost always the case for photos, frames and anything with a layout. Seeing the preview is what stops "that is not what I meant" emails after the order.

I tested this on a Horizon test store with the Zepto app. The question came from [this Shopify Community thread](https://community.shopify.com/t/upload-image-and-text-and-allow-preview/687144).


---

---
title: "Change the Product Description Font Size in Shopify (Headings Only)"
description: Headings inside a Shopify product description can come out far bigger than the text around them. Make only those headings smaller with 6 lines of CSS in Theme settings, without touching headings on other pages. Tested on Radiant.
---

## The problem

A merchant preparing to open their store asked about this on the Shopify Community. They ran Radiant, a candle and home fragrance theme built on Shopify's Dawn. The subheadings in their product descriptions, the level 2 and level 3 headings, came out far too big on the product pages.

They wanted those headings smaller. They did not want to change the headings anywhere else in the store, such as the home page, collection pages or the blog. The settings they had tried in the theme editor had not done it.

I loaded Radiant's own demo store, added two headings to a product description, and measured them. Then I wrote a short piece of CSS that shrinks only those headings, and checked that nothing else on the page changed.

![A Radiant product page where the Fragrance notes and How to use headings are large next to the description text](/images/blog/shopify-product-description-font-size/01-before-large-description-headings.png)

## Why the headings in your description are so big

When you write a product description in the Shopify admin, the text box has a **Paragraph** menu. Picking **Heading 2** or **Heading 3** there turns a line into a heading. Your theme then decides how big each heading level looks.

Most themes size headings with the rest of the site in mind. A level 2 heading is meant for section titles on the home page, like "Featured collection" or "Our story", so it is large. Inside a product description, next to 16 pixel body text, the same heading looks oversized.

On Radiant's demo, a level 2 heading in the description measured 24 pixels and a level 3 heading 18 pixels, next to body text at 16 pixels. If you have raised the font size scale for headings in **Theme settings > Typography**, every heading grows by the same factor, and the ones in the description grow with them.

### Why the theme editor settings do not fix it

That font size scale changes every heading in the store at once. There is no separate setting for headings inside a product description, because the theme treats them the same as any other heading.

So the fix is a small piece of CSS, which is the code that controls how a page looks, pointed at the description only.

## Make the description headings smaller

These are the steps I posted in reply to the merchant. The code goes in **Theme settings > Custom CSS**, a box in the theme editor where you can add your own CSS for the whole store. The code itself only reaches headings inside a product description.

1. Go to **Online Store** > **Themes**.
2. Click **Edit theme** on your current theme.

![The Shopify Themes page with Online Store and the Edit theme button highlighted](/images/blog/shopify-product-description-font-size/03-themes-edit-theme.png)

3. Click the **Theme settings** gear on the far left.

![The theme editor with the Theme settings gear highlighted](/images/blog/shopify-product-description-font-size/04-theme-settings.png)

4. Click **Custom CSS**.

![Theme settings with the Custom CSS row highlighted](/images/blog/shopify-product-description-font-size/05-custom-css.png)

5. Paste this code in the box:

```css
.product__description h2 {
  font-size: 20px;
}
.product__description h3 {
  font-size: 17px;
}
```

![The description heading CSS pasted into the Custom CSS box](/images/blog/shopify-product-description-font-size/06-paste-css.png)

6. Click **Save**.

![The Save button highlighted in the top right of the theme editor](/images/blog/shopify-product-description-font-size/07-save.png)

On Radiant's demo, the level 2 heading went from 24 pixels to 20, and the level 3 heading from 18 to 17. The product title stayed at 36 pixels, and the other level 2 headings on the page, such as the cart drawer and the newsletter pop-up titles, stayed at 24.

![The same product page with smaller description headings and an unchanged product title](/images/blog/shopify-product-description-font-size/02-after-smaller-description-headings.png)

## What the code does

The code has two rules, one per heading level.

- `.product__description` is the name the theme gives to the box that holds the product description. It is the part of the code that keeps the change inside that box. Radiant uses this name, and so does Dawn.
- `h2` and `h3` are the level 2 and level 3 headings you pick from the Paragraph menu.
- `font-size` sets the size. `20px` means 20 pixels.

Change the two numbers to whatever looks right in your store. A level 2 heading a few pixels bigger than your body text, and a level 3 heading a pixel or two bigger, keeps them readable as headings without shouting.

If you use **Heading 4** in your descriptions too, copy one of the rules and change `h3` to `h4`.

## Change the body text of the description as well

The same approach works for the ordinary text in a description. Add this rule under the others:

```css
.product__description p {
  font-size: 15px;
}
```

On Radiant's demo this took the description paragraphs from 16 pixels to 15. Paragraphs elsewhere on the page kept their own sizes.

Keep the body text at 15 or 16 pixels. Smaller text is hard to read on a phone.

## Only on desktop, or only on phones

The merchant noticed the problem mostly on a computer. If you want the smaller headings on large screens only, wrap the rules in a screen-size condition:

```css
@media screen and (min-width: 750px) {
  .product__description h2 {
    font-size: 20px;
  }
  .product__description h3 {
    font-size: 17px;
  }
}
```

The `750px` figure is the screen width Radiant's own code uses to switch from the phone layout to the larger one. On Radiant's demo, with a 1,440 pixel wide window, this version gave the same 20 and 17 pixel headings. For phones only, change `min-width: 750px` to `max-width: 749px`.

## If the code does not change anything

**Your theme uses a different name for the description box.** Radiant and Dawn call it `product__description`. Other themes can use a different name, for example `product-single__description` in older themes like Debut. To check, open a product page, right-click a description heading and choose **Inspect**. The panel that opens shows the page's code. Look a few lines up from the heading for a `div` with "description" in its class, and put that name in the code in place of `product__description`.

**The description is inside a tab or an accordion.** Some themes show the description in a collapsible row. The heading is still inside the description box, so the code still applies. If it does not, the theme has moved the description into a different box, and the Inspect check above will show its name.

**You edited a copy of your theme.** The merchant in the thread was working on "Copie de Radiant", a copy of the theme. Shoppers only see the theme at the top of the Themes page. To see a change on a copy, use **Preview** on that copy.

**The code did not save.** Reload the theme editor and open Custom CSS again. If the box is empty, click inside it, paste again, click somewhere else in the sidebar, then click Save.

## Section Custom CSS as an alternative

Each section in the theme editor also has its own **Custom CSS** box, at the bottom of the section's settings. CSS pasted there only applies inside that section. Another reply in the thread suggested putting plain `h2` and `h3` rules in the product information section's box.

That works, with one catch. The product information section holds more than the description. On Radiant's demo the same section also has a level 2 heading, "Frequently bought together", and a level 3 heading that repeats the product name. A plain `h2` or `h3` rule shrinks those as well. The version above names the description box, so it only reaches the description, wherever you paste it.

## Headings, bold text and SEO

A heading is not the same as bold text. Search engines and screen readers use headings to understand how the description is organised, so "Fragrance notes" as a real heading tells them what the next paragraph is about. Bold text only looks different.

That is a reason to keep your headings and make them smaller, rather than turning them back into bold paragraphs to get the size down. The CSS changes how they look and leaves them as headings.

Use one heading level per job: level 2 for the main parts of a description, level 3 for points inside them.

## The other two problems in the thread

The merchant also had a product image zoom that opened almost entirely white on desktop, and a large space between the product photos and their titles on the product cards. On Radiant's demo store both of those looked normal: the zoom showed the photo at full size in the middle of the screen, and the card titles sat just under the photos. That points to something in their own copy of the theme, such as a setting or added code, so I asked for their store link to test them there.

This article started from a thread on the Shopify Community: <a href="https://community.shopify.com/t/probleme-daffichage/688658" rel="nofollow">Problème d'affichage</a>.


---

---
title: Hide the First Image in Your Shopify Product Image Gallery
description: Hide the first photo in a Shopify product image gallery without deleting it, so the gallery opens on image 2. Tested Custom CSS for the Roam theme, desktop and mobile.
---

## The problem

A store owner running the Roam theme wanted the first photo gone from the product page gallery. Not deleted from the product, just not shown in the gallery, so shoppers land on the second photo.

That first photo still had a job. In Shopify, the first image on a product is its featured image, the one that shows on collection pages, in the cart and in social media previews. Deleting it or moving it would change all of those. They only wanted it out of the product page gallery.

I reproduced it on a test store with the Roam theme installed. Here is the gallery before any change. Image 1 is the big photo, and it is the first thumbnail in the strip beside it.

![Roam product page with the first image showing in the gallery and as the first thumbnail](/images/blog/shopify-product-image-gallery-hide-first-image/01-before-first-image-shows.png)

The fix is a few lines of Custom CSS, which is the box in the theme editor where you paste styling code. It needs no app and no edits to theme files. But the obvious version of that code breaks the Roam gallery, and I found that out the hard way. Both versions are below, with the reason one fails.

## Do you need to hide it, or just move it?

Check this first, because the no-code route is better when it fits.

- **You do not need the photo anywhere.** Open the product in your admin, tick the photo in the **Media** section and remove it. It is gone from the gallery, the collection card and everywhere else.
- **You just want a different photo to come first.** Drag another photo into the first spot in **Media**. That photo becomes the featured image, so the collection card and cart change too.
- **You want the photo on collection pages but not in the product gallery.** That is the case this article covers. Shopify has no setting for it, so it takes the code below.

The code works only on the storefront display. The photo is still attached to the product and still loads with the page. It is hidden from view, not removed.

## Why hiding the first image can empty the whole gallery

Most themes would let you hide the first photo with one rule that says "do not display this". On Roam that rule leaves the main image area blank.

Roam's product gallery is a slideshow. When the page loads, the theme's script measures the photo that is currently selected and sets the height of the whole gallery to match. On a fresh page load the selected photo is image 1.

If image 1 is set to "do not display", it has no height. The script measures zero and sets the gallery to zero pixels tall. The thumbnails still show beside it, because they sit in a separate strip, but the big photo area collapses.

This is what that looks like on my test store with the "do not display" rule in place.

![Roam gallery with the first-image rule from display none: thumbnails show, but the main image area is empty](/images/blog/shopify-product-image-gallery-hide-first-image/02-first-fix-empty-gallery.png)

So the working fix keeps image 1 in the page, at its full size, so the script measures a real height. It just makes image 1 invisible and moves it so it does not push the other photos down.

## How to hide the first image in the Roam product gallery

These steps are for Roam. The code points at names that Roam uses for its gallery, so it will not do anything on other themes.

1. Go to **Online Store**.
2. Click **Edit theme** on your current theme.

![Shopify admin Online Store page with the Edit theme button highlighted](/images/blog/shopify-product-image-gallery-hide-first-image/04-online-store-edit-theme.png)

3. Click **Theme settings**, the gear icon on the left of the theme editor.

![Roam theme editor with the Theme settings gear icon highlighted](/images/blog/shopify-product-image-gallery-hide-first-image/05-theme-settings-gear.png)

4. Click **Custom CSS** to open it.

![Roam Theme settings list with Custom CSS highlighted](/images/blog/shopify-product-image-gallery-hide-first-image/06-custom-css.png)

5. Paste this code in the box. If you already added code that hides the first image, delete that old code first so only this version is left.

```css
[data-product-gallery-navigation-layout="featured"] {
  position: relative !important;
}
[data-product-gallery-figure="0"] {
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[data-product-gallery-thumbnail="0"] {
  display: none !important;
}
```

![Roam Custom CSS box with the new code pasted in](/images/blog/shopify-product-image-gallery-hide-first-image/07-paste-the-code.png)

6. Click **Save** in the top right corner.

![Theme editor top bar with the Save button highlighted](/images/blog/shopify-product-image-gallery-hide-first-image/08-save.png)

Open a product page in a new tab. The gallery now opens on image 2, and the thumbnail strip starts at image 2.

![Roam product page after the fix: the gallery opens on image 2 and the first thumbnail is gone](/images/blog/shopify-product-image-gallery-hide-first-image/03-after-image-2-first.png)

## What each part of the code does

You do not need to understand the code to use it, but knowing what each block does makes it easier to check.

- **The first block** tells the main image area to act as the frame for anything placed inside it. Without it, the hidden photo would be positioned against the wrong part of the page.
- **The second block** is the hidden photo. It keeps image 1 at full size so Roam's script reads a real height. It lifts image 1 out of the line of photos and lays it over the top, so it takes up no space. Then it makes it fully see-through and stops it from catching clicks, so a shopper clicking the gallery reaches the photo they can see.
- **The third block** removes image 1's thumbnail from the strip. Thumbnails do not affect the gallery height, so a plain "do not display" is safe there.

Each block uses a selector, which is the part before the curly bracket that points at one element on the page. Roam numbers its gallery photos from 0, so `"0"` means the first photo.

## Why my first fix left the main image empty

I answered this thread twice, and the first answer was wrong.

My first reply used the short "do not display" rule on both the first photo and its thumbnail. Before posting it, I tested it by adding the code to the store owner's live preview in my own browser. The gallery looked right. The store owner pasted it into Theme settings, opened their product The Extra Care Duo, and the main image area was empty.

Two things hid the problem from my test.

- **I added the code after the page had already loaded.** By then Roam's script had already measured image 1 and set the gallery height. Hiding image 1 afterwards changed nothing about that height, so the gallery kept working. A merchant who saves the code in Custom CSS gets it from the very start of the page load, before the script measures anything. That is the case that breaks.
- **My test product on the dev store did not open on image 1.** Its selected variant had image 2 attached, so the gallery started on image 2 and never measured the hidden photo.

To catch it, I re-tested by loading the code before the theme's scripts ran, the same way saved Custom CSS loads. The old rule left a blank area on every product in the store owner's preview. The new code showed image 2 on all six of their products, on desktop and on a phone-sized screen.

## Why the code uses opacity and not visibility

The usual way to make something invisible but still sized is `visibility: hidden`. My first draft of the new code used it.

The theme editor would not take it. I pasted the code into Custom CSS and the Save button turned dark, but the preview kept the old code. After saving, the old code was still the one on the storefront. There was no error message. Shopify's Custom CSS box dropped the whole edit because of that one line.

I narrowed it down by trying each line on its own. Every other line saved. The line with `visibility: hidden` did not. Swapping it for `opacity: 0`, which makes an element fully see-through, saved on the first try and does the same job here.

If you write your own Custom CSS and a change refuses to save, check for that line first.

## Does it work on mobile?

Yes. On a phone the Roam gallery becomes a swipe slider with the thumbnails underneath. With the code saved, it opens on image 2. Swiping and tapping thumbnails move between the remaining photos normally.

![Roam product page on a phone after the fix, opening on image 2](/images/blog/shopify-product-image-gallery-hide-first-image/09-after-mobile.png)

## Featured image vs product image gallery

These two get mixed up, and the difference decides which fix you want.

- **The featured image** is the first photo in the product's Media list in your admin. Shopify uses it on collection pages, search results, the cart, order emails and when the product link is shared on social media.
- **The product image gallery** is the set of photos on the product page itself. On Roam it is the large photo with a column of thumbnails beside it.

The CSS in this article changes only the product image gallery. Your featured image stays the same everywhere else. If you change the order in Media instead, the featured image changes everywhere.

## Can you hide it on some products only?

This code applies to every product page that uses Roam's product gallery. On products where the first photo is one you want shoppers to see, it will be hidden too.

If only some products need it, the no-code route is cleaner: reorder or remove the photo on just those products in the admin.

## Does the hidden image still load?

Yes. The code hides the photo on screen. The image is still part of the page, so the browser still downloads it. For one photo per product page that is a small cost.

It is also still the product's featured image, so it still shows on collection pages and in the cart.

## Using a different theme?

The selectors in this code are Roam's own names for its gallery parts. Dawn, Horizon, Prestige and other themes use different names, so pasting this code into them changes nothing.

The idea carries over, though. If your theme's gallery sets its height from the selected photo, a plain "do not display" rule can collapse it the same way, and the hide-but-keep-the-size approach is what fixes it.

## It did not work. What to check

- **The main image area is still empty.** The old "do not display" code is probably still in the box. Open Custom CSS, delete everything that targets the first gallery photo, paste only the new code and save.
- **Nothing changed at all.** Check you pasted into **Theme settings > Custom CSS**, not into a section's own Custom CSS. Then check the theme is Roam: in the theme editor, the theme name shows at the top of the screen.
- **Save stayed greyed out.** Click outside the code box, then click Save again. The editor sometimes does not register a paste until the box loses focus.
- **The edit will not save, or the old code comes back.** Look for `visibility` in your code. Replace it with `opacity: 0`.
- **A colour or size uses the first photo as its variant image.** Choosing that variant asks the gallery for image 1, and because image 1 is see-through, the gallery stays on image 2. If that variant needs its own photo to show, attach a different photo to it in the product's variant settings.


---

---
title: "Shopify Product Image Size: Make It Smaller on the Page"
description: Your Shopify product photo takes up most of the product page and the text is squeezed into a narrow strip. That is the theme's column split, not your image file. Here is the setting to change first, and the CSS for when the setting does not go far enough.
---

## The problem, in the words a merchant would use

A merchant asked about this on the Shopify Community. On their product page the photo filled most of the screen. The title, price, buttons and description were crammed into a thin column on the right. They wanted the image smaller so more of the text showed, because they planned to put more information in the description.

Their store runs the **Horizon** theme. Horizon is Shopify's newer free theme, and it lays the product page out differently from Dawn, so the older Dawn advice people paste into forums often does nothing here.

Here is the same thing reproduced on a Horizon test store.

![Horizon product page with the image column twice the width of the text column](/images/blog/shopify-product-image-size-smaller/01-horizon-default-2fr-1fr-layout.jpeg)

The image column is 960 pixels wide. The text column is 480. Exactly twice as wide.

If you searched for "shopify product image size", "resize product image shopify", or "shopify make product image smaller" and landed here, read the next section first. It is the thing that trips most people up.

## There are two different things called "product image size"

This is why so many merchants go round in circles on this problem.

**One** is the image file you upload. That is a real file with real dimensions, for example 2048 by 2048 pixels. Shopify's own guidance is to upload square images of about 2048 by 2048, and to keep every product photo the same shape so your collection pages line up.

**Two** is the amount of space your theme gives that image on the product page. This is the column width. It has nothing to do with the file.

If your product image looks too big on the page, it is almost always the second one. Uploading a smaller file will not help. The theme will just stretch the smaller file to fill the same column, and now it looks blurry as well as too big.

So the question to ask is not "what size should my product image be". It is "how much of the row does my theme give the image".

## Why Horizon makes the image so wide

Horizon has no slider for this. There is no "image width" setting in the theme.

Instead the split is written into the theme's own stylesheet. On screens wider than 1200 pixels Horizon applies this rule:

```css
.product-information__grid:not(.product-information__grid--half,.product-information--media-none).product-information--media-left {
  grid-template-columns: 2fr 1fr;
}
```

`grid-template-columns: 2fr 1fr` means the row is cut into three shares. The image gets two of them. The text gets one. That is the 960 against 480 in the screenshot.

On a narrower desktop, between 750 and 1200 pixels, Horizon uses a slightly different rule and the image is a bit less dominant. Below 750 pixels the two columns stop sitting side by side and stack instead, so on phones the image is full width and the text sits underneath it. Nothing on this page changes what phones see.

That last point matters. Most fixes for this problem should be desktop only, because on a phone there is no second column to take space from.

## Fix 1: the built-in setting, no code

Try this first. It takes about ten seconds and it survives theme updates, which custom code does not.

Go to **Online Store**, then **Themes**, then **Customize**. In the left hand list, under **Template**, click **Product information**.

![Theme editor left list with the Product information section selected](/images/blog/shopify-product-image-size-smaller/02-theme-editor-product-information.jpeg)

In the settings panel on the right, turn on **Equal columns**.

![The Equal columns toggle in Horizon's Product information settings](/images/blog/shopify-product-image-size-smaller/03-equal-columns-toggle.jpeg)

That takes you from two-to-one straight to fifty-fifty. The image is now half the row instead of two thirds, and the text column doubles in width.

For a lot of stores that is enough, and you can stop here.

### The toggle underneath it that undoes your work

When you turn Equal columns on, a second toggle appears below it called **Limit product details width**. Leave it off.

![Limit product details width left switched off](/images/blog/shopify-product-image-size-smaller/04-limit-product-details-width-off.png)

That setting caps how wide the **text** column is allowed to get. If your goal is more room for text, switching it on works against you. It is there for stores that want a narrow, centred block of product details on a very wide screen, which is the opposite situation.

This toggle only exists while Equal columns is on. That is why it seems to appear from nowhere, and why some merchants report that the layout "went back to normal" after they touched it.

## Fix 2: the CSS, for anything smaller than half

Equal columns cannot go below fifty-fifty. If you want the image at 40 percent, or 30, you need one small CSS rule.

Put it in **Theme settings**, then **Custom CSS**. That is the gear icon in the theme editor, and Custom CSS is near the bottom of the list. Use this box rather than the Custom CSS box inside the Product information section.

![The Custom CSS box in Shopify theme settings](/images/blog/shopify-product-image-size-smaller/05-theme-settings-custom-css.jpeg)

```css
@media screen and (min-width: 990px) {
  .product-information__grid.product-information--media-left {
    grid-template-columns: 40% 1fr !important;
  }
}
```

Save, then look at your product page.

![Product page after the custom CSS, with a much smaller image](/images/blog/shopify-product-image-size-smaller/06-result-after-custom-css.jpeg)

On the test store the image column went from 960 pixels down to 576, and the text column from 480 up to 864.

Things worth knowing about that rule:

- **`40%` is the image width.** Lower the number for a smaller image, raise it for a bigger one. Try 45, then 35, until it looks right.
- **Turn Equal columns back off first.** The setting and the CSS both target the same row and they will fight each other.
- **It is desktop only.** The `@media screen and (min-width: 990px)` wrapper means the rule is ignored on phones, where the columns stack anyway.
- **If your media sits on the right**, change `--media-left` to `--media-right` in the selector. Horizon uses a different class name for each side, and the **Media position** setting in the Product information section is what switches it.

## Why the CSS people post for this so often does nothing

This is worth its own section, because it is the single most common reason a merchant tries the fix, sees no change, and gives up.

CSS decides between two competing rules using **specificity**. Roughly, the rule that names more classes wins. When two rules are equally specific, the one that loads later wins.

Horizon's own rule names three classes:

```css
.product-information__grid:not(.product-information__grid--half,.product-information--media-none).product-information--media-left
```

The `:not(...)` part counts. A `:not()` takes the weight of the most specific thing inside it, so that whole selector counts as three classes.

Now look at a shortened version that gets passed around a lot:

```css
.product-information__grid.product-information--media-left
```

Two classes. That is less specific than Horizon's rule, so on any screen wider than 1200 pixels the theme wins and your rule is ignored with no error. No error, no warning, nothing in the editor to tell you. It just does not apply.

I tested every version of this on a live Horizon product page. The two-class selector with no `!important` left the columns at 960 and 480, completely unchanged. Adding `!important` took them to 432 and 1008. The same rule with `:not(...)` kept in also worked.

So if a snippet is not doing anything, the fix is almost always to add `!important` before the semicolon, exactly as in the code block above.

## The other reasons a CSS snippet fails with no error

Two more, both easy to miss.

**The double hyphens turn into one long dash.** `product-information--media-left` contains two plain hyphens. Copying from a forum post into a text field on a Mac can convert `--` into a single long dash, because of the text substitution feature in macOS. The rule then matches nothing at all and looks identical at a glance. If a snippet will not work after pasting, delete those two characters and type them again by hand.

**Deleting the `@media` line breaks the braces.** `@media` is not a line you can remove on its own. It is a wrapper, so it opens a `{` at the top and closes a `}` at the bottom. Remove just the first line and you leave one extra `}` behind, and Shopify rejects the whole block as invalid CSS.

For the record, `@media` is allowed in both Custom CSS boxes. So are `@supports`, `@container` and `@layer`. Only `@import`, `@charset` and `@namespace` are blocked.

## Your image may be too tall rather than too wide

Making the column narrower fixes width. It does not fix height, and on a lot of stores height is the bigger problem, especially when the theme stacks every product photo down the page.

These three settings live on the **Product media** block, which sits under Product information in the theme editor.

![Product media block settings including Aspect ratio and Constrain to screen height](/images/blog/shopify-product-image-size-smaller/07-product-media-aspect-ratio.jpeg)

- **Aspect ratio.** It ships on **Auto**, which means each photo keeps its own shape. Upload one tall portrait photo and it stays tall, and it drags the page down with it. Set this to **Square** or **Portrait** and every photo is cropped to the same shape.
- **Constrain to screen height.** Turn this on and no single image is allowed to be taller than the visitor's screen. It is the quickest way to stop one oversized photo dominating the page.
- **Type: Grid or Carousel.** On Grid, your photos stack down the page one after another. On Carousel they share a single frame and the visitor swipes or clicks through them. Switching to Carousel can cut the length of a product page by more than half.

None of those three need code, and together they usually change the feel of the page more than the width fix does.

## Fixing the column width in other themes

The mechanism is the same everywhere. The class name is not.

Every theme puts the product media and the product details in a two-column row on desktop, and sets the split in its own stylesheet. Your job is to find the class name for that row and override it.

To find it, right click the gap between the image and the title in your browser, choose **Inspect**, and look for the element that wraps both columns. Its class is what goes in your rule.

- **Dawn** uses `.product__media-wrapper` and `.product__info-wrapper`, each with a width in percent rather than a grid. You change the two widths so they still add up to 100.
- **Horizon**, **Fabric**, **Studio** and other newer Shopify themes use `.product-information__grid` with `grid-template-columns`, which is the case covered above.
- **Paid themes** vary. Many of them do offer a real width setting in the theme editor, so check the product section settings before you write any CSS.

Whatever the theme, wrap the rule in a `@media screen and (min-width: 990px)` block so phones are left alone, and be ready to add `!important` if nothing happens.

## What size should you actually upload, then

Since this is the other meaning of the question, here is the short version.

Upload square images at **2048 by 2048 pixels**. That is large enough for the zoom feature to look sharp and small enough not to slow the page down. Shopify accepts images up to 4472 by 4472 and up to 20MB, but you gain nothing from going that big.

Keep every photo the same shape. Mixed shapes are the usual reason collection pages look ragged, with cards of different heights.

Shopify resizes and serves your images automatically, so you do not need to make separate versions for phones. Upload once at the large size and let the platform handle the rest.

And to say it once more, because it is the thing that sends people down the wrong path: uploading a smaller file does not make the image smaller on the product page. The theme decides that, and the settings and CSS above are how you change it.

## What to check if it still has not worked

- **You are on a narrow window.** Below 990 pixels wide the rule is switched off on purpose. Widen the browser window to test it.
- **Equal columns is still on.** It uses a different set of classes and will override the percentage. Switch it off.
- **The rule went in the section's Custom CSS box instead of Theme settings.** Both work, but the section box is limited to 500 characters and is scoped to that one section, which makes it easier to get wrong. Theme settings allows 1500 characters and applies everywhere.
- **The dashes are wrong.** Retype the two hyphens in `--media-left`.
- **You missed the `!important`.** Add it before the semicolon.
- **Your media position is Right.** Then the class is `--media-right`, not `--media-left`.

## A note on theme updates

Custom CSS is not covered by theme updates. If Shopify renames `product-information__grid` in a future Horizon release, your rule stops working, in exactly the way described above, with no error to warn you.

That is the real argument for trying **Equal columns** first. A setting is part of the theme and gets carried forward. A CSS rule is your own maintenance from the day you add it.

Keep a note of any custom CSS you add and what it was for. After a theme update, that note is the difference between a two minute fix and an afternoon of guessing.


---

A merchant on the Shopify Community runs the Smile theme and wanted their product page to look like the big direct-to-consumer skincare brands. Small feature bullets above the price. A "Save 28%" tag with a coupon price under it. A low-stock warning. Then a row of trust badges, the payment icons, and a line of checkmarks under the Add to cart button.

I rebuilt that buy box on a test store with no app, using three pieces of code pasted into the theme editor. This article walks through it, explains what each part does, and covers the questions that come up once it is live.

![A Dawn product page before the change, with only the title, price and Add to cart button](/images/blog/shopify-product-page-buy-box/01-before.png)

![The same product page with feature pills, a Save 28% offer box, a low-stock line, trust badges and payment icons](/images/blog/shopify-product-page-buy-box/02-after.png)

## What a "buy box" is, and why these pieces sit where they do

The buy box is the part of the product page next to the photos: the title, price, options and Add to cart button. It is where a shopper decides, so the extra information goes there rather than further down the page.

The merchant's example had three groups, and each belongs in a different spot:

- **Feature bullets above the price.** Short tags like "10,000+ microcapsules" or "For sensitive skin". They tell the shopper what the product is before they see what it costs.
- **The offer under the price.** The discount percentage, the price after a coupon code, a line of size and tax details, and a stock warning.
- **Trust information under Add to cart.** Secure checkout, free shipping, returns, cash on delivery, the payment icons and a few checkmarks. This answers the doubts a shopper has at the moment they are about to click.

Keeping them as three separate pieces also means you can move, hide or reorder each one in the theme editor without touching the others.

## What Smile is built on

Smile is not in the Shopify Theme Store. Its code reports version 15.2.7, and the page structure matches Shopify's free Dawn theme, version 15.2. The product page has the same "Product information" section with the same blocks: Title, Price, Variant picker, Quantity selector, Buy buttons and so on.

That matters because Dawn has a **Custom liquid** block. A Custom Liquid block is a box in the theme editor where you paste code, and it shows up exactly where you place it in the block list. Liquid is the code Shopify themes are written in. So every Dawn-based theme can take this fix, including Smile, Crave, Studio and most themes sold as "Dawn with extras".

I tested everything below on Dawn 15.2.0, the version Smile is built on.

## Step by step: add the three blocks

Before you start, duplicate your theme (Online Store > Themes > the three dots > Duplicate). It takes ten seconds and gives you a copy to go back to.

**1. Open the theme editor.** Go to **Online Store**, then click **Edit theme** on your current theme.

![Shopify admin Online Store Themes page with the Edit theme button marked](/images/blog/shopify-product-page-buy-box/03-online-store-edit-theme.png)

**2. Switch to the product page.** At the top of the editor, open the page picker and choose **Products** > **Default product**. The preview on the right now shows a product.

![The theme editor page picker open with Products marked](/images/blog/shopify-product-page-buy-box/04-switch-to-product-template.png)

**3. Add a Custom liquid block.** In the left sidebar, find **Product information**. Click **Add block** under it and pick **Custom liquid**.

![The Add block picker in the theme editor filtered to Custom Liquid](/images/blog/shopify-product-page-buy-box/05-add-custom-liquid-block.png)

**4. Paste the feature bullets code.** The block opens with an empty box. Paste this:

```liquid
{%- assign points = '10,000+ microcapsules|8x Hyaluronic Acid|Green Antioxidant|Metacool Cooling|For sensitive skin' | split: '|' -%}
<div class="ao-pills">
  {%- for point in points -%}
    <span class="ao-pill">{{ point }}</span>
  {%- endfor -%}
</div>
<style>
  .ao-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .ao-pill { font-size: 1.25rem; line-height: 1; padding: 0.7rem 1.2rem; border-radius: 99px; background: rgba(var(--color-foreground), 0.05); border: 1px solid rgba(var(--color-foreground), 0.15); }
</style>
```

![A Custom Liquid block in the theme editor with the feature pills code pasted](/images/blog/shopify-product-page-buy-box/06-paste-pills-code.png)

**5. Move it above the price.** Drag the new block by its handle so it sits just above **Price** in the list.

![The Product information block list with the three Custom Liquid blocks placed around Price and Buy buttons](/images/blog/shopify-product-page-buy-box/07-block-order.png)

**6. Add the offer block.** Add a second **Custom liquid** block, paste the code below, and drag it just below **Price**.

```liquid
{%- assign coupon_code = 'YURI25' -%}
{%- assign coupon_percent = 25 -%}
{%- assign prepaid_percent = 5 -%}
{%- assign details_line = 'MRP incl. of all taxes · 50g · 30+ days per tube' -%}
{%- assign low_stock_under = 50 -%}

{%- assign v = product.selected_or_first_available_variant -%}
{%- assign keep1 = 100 | minus: coupon_percent -%}
{%- assign keep2 = 100 | minus: prepaid_percent -%}
{%- assign offer_price = v.price | times: keep1 | divided_by: 100 | times: keep2 | divided_by: 100 -%}
<div class="ao-offer">
  <p class="ao-offer__row">
    {%- if v.compare_at_price > v.price -%}
      {%- assign save = v.compare_at_price | minus: v.price | times: 100.0 | divided_by: v.compare_at_price | round -%}
      <span class="ao-save">Save {{ save }}%</span>
    {%- endif -%}
    <span><strong>{{ offer_price | money }}</strong> with <strong>{{ coupon_code }}</strong> + {{ prepaid_percent }}% prepaid</span>
  </p>
  <p class="ao-offer__details">{{ details_line }}</p>
  {%- if v.inventory_management == 'shopify' and v.inventory_quantity > 0 and v.inventory_quantity < low_stock_under -%}
    <p class="ao-stock"><span class="ao-stock__dot"></span>Only {{ v.inventory_quantity }} left in stock. Grab yours before it is gone.</p>
  {%- endif -%}
</div>
<style>
  .ao-offer p { margin: 0; }
  .ao-offer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; font-size: 1.5rem; padding: 0.9rem 1.2rem; border: 1px dashed #1a7f37; border-radius: 0.8rem; background: #eefaf1; color: #14532d; }
  .ao-save { background: #1a7f37; color: #fff; font-size: 1.2rem; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 99px; }
  .ao-offer__details { font-size: 1.2rem; opacity: 0.7; margin-top: 0.8rem !important; }
  .ao-stock { display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; color: #b42318; margin-top: 0.8rem !important; }
  .ao-stock__dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #d92d20; flex: none; }
</style>
```

![The second Custom Liquid block with the offer line code pasted](/images/blog/shopify-product-page-buy-box/08-paste-offer-code.png)

**7. Add the trust block.** Add a third **Custom liquid** block, paste this code, and drag it just below **Buy buttons**.

```liquid
{%- assign trust = 'Secure;checkout|Free shipping;on prepaid|15-day;easy returns|COD;available' | split: '|' -%}
{%- assign badges = 'COD available|15-day easy returns|Cruelty-free & vegan' | split: '|' -%}
<div class="ao-trust">
  {%- for item in trust -%}
    {%- assign parts = item | split: ';' -%}
    <div class="ao-trust__item">
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        {%- case forloop.index -%}
          {%- when 1 -%}<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>
          {%- when 2 -%}<path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/>
          {%- when 3 -%}<path d="M4 12a8 8 0 1 0 3-6.2"/><path d="M4 4v4h4"/>
          {%- else -%}<rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/>
        {%- endcase -%}
      </svg>
      <span><strong>{{ parts[0] }}</strong><br>{{ parts[1] }}</span>
    </div>
  {%- endfor -%}
</div>
<p class="ao-pay__label">Pay with</p>
<div class="ao-pay">
  {%- for type in shop.enabled_payment_types -%}
    {{ type | payment_type_svg_tag: class: 'ao-pay__icon' }}
  {%- endfor -%}
</div>
<div class="ao-badges">
  {%- for badge in badges -%}
    <span>&#10003; {{ badge }}</span>
  {%- endfor -%}
</div>
<style>
  .ao-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
  .ao-trust__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; font-size: 1.15rem; line-height: 1.3; padding: 1rem 0.4rem; border-radius: 0.8rem; background: rgba(var(--color-foreground), 0.04); }
  .ao-pay__label { font-size: 1.2rem; opacity: 0.7; margin: 1.2rem 0 0.4rem; }
  .ao-pay { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .ao-pay__icon { height: 2.4rem; width: auto; }
  .ao-badges { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 1.2rem; margin-top: 1.2rem; color: #1a7f37; }
</style>
```

![The third Custom Liquid block with the trust badge code pasted](/images/blog/shopify-product-page-buy-box/09-paste-trust-code.png)

**8. Save.** Click **Save** in the top right.

![The theme editor top bar with the Save button marked](/images/blog/shopify-product-page-buy-box/10-save.png)

## How to change the words

Each block starts with a few lines that hold the text. You only edit what is inside the quotes.

In the feature bullets block, the bullets are one line separated by a straight bar `|`. Add a bar and a new phrase to add a bullet, or delete one to remove it. Four or five short bullets fit on one or two rows on a phone. More than that starts pushing the price down the screen.

In the offer block you can change:

- `coupon_code`: the code shoppers type at checkout.
- `coupon_percent`: how much the code takes off. The block uses it to work out the price shown.
- `prepaid_percent`: the extra discount for paying online instead of cash on delivery. Set it to 0 if you do not offer one.
- `details_line`: the small grey line with tax, size and how long the product lasts.
- `low_stock_under`: the stock count below which the warning appears.

In the trust block, each badge is a pair of words split by a semicolon: the bold line, then the small line. The checkmark row at the bottom works like the feature bullets.

## How to show the percentage discount saved, and the other numbers

The block does not store prices. It reads them from the product each time the page loads.

- **"Save 28%"** compares the product's price with its **Compare-at price**. On my test product the price was $16.00 and the compare-at price $22.22, and the tag read "Save 28%". If a product has no compare-at price, the tag is left out.
- **The coupon price** takes the price, removes the coupon percentage, then removes the prepaid percentage. $16.00 less 25% is $12.00, and less another 5% is $11.40, which is what the block showed.
- **"Only 47 left in stock"** reads the product's inventory. It shows only when Shopify tracks stock for the product and the count is above zero and below your `low_stock_under` number.

The coupon price is only a message on the page. It does not create a discount. You still need a discount code with the same name and amount under **Discounts** in the admin, and a way to take the extra prepaid percentage off at checkout. If the code on the page and the code in Discounts do not match, shoppers see a price they cannot get.

## Why the low-stock line might not show

On my test store the stock line stayed hidden at first, although the product had 47 units. The stock was stored at a location that did not count toward the online store's available quantity, so the theme saw no number at all. After I moved the units to the main shop location, the line appeared.

If the line does not show for you, check these in order:

- The product has **Track quantity** turned on (Products > the product > Inventory).
- The stock sits at a location that fulfils online orders.
- The count is below the `low_stock_under` number in the block. At 50, a product with 120 in stock shows nothing.
- The count is above zero. A sold-out product shows the theme's own "Sold out" state instead.

## Products with several variants

The three blocks read the variant that is selected when the page first loads. When a shopper switches size or colour, Dawn refreshes the price block, but it does not refresh a Custom Liquid block. So on a product where variants have different prices or stock, the offer line keeps the first variant's numbers until the page reloads.

For a single-size product, like most skincare, this never comes up. For products with variants at different prices, either leave out the coupon price line or use an app that updates on variant change.

## The payment icons

The "Pay with" row is not a list of images you upload. It reads the payment methods turned on in **Settings > Payments** and shows Shopify's own icon for each one. Turn on a new method and its icon appears. Turn one off and it disappears. This matches what Dawn does in its footer.

If an icon you expect is missing, the method is either not turned on or it is one Shopify has no icon for. Some local wallets fall into that group. In that case, the checkmark row underneath is the place to mention it in words.

## How it looks on a phone

Most shoppers see the product page on a phone, so I checked it at a 390-pixel wide screen. The feature bullets wrap onto a second row, the offer box stays full width, and the four trust badges sit in one row of narrow tiles. Nothing ran off the side of the screen.

If your trust labels are longer than two or three words, the tiles get tall. Shorter labels such as "Free shipping" and "COD available" keep them even.

![The buy box on a phone-width screen with pills wrapping onto three rows and four trust tiles in one row](/images/blog/shopify-product-page-buy-box/11-mobile.png)

## Trust badges, payment icons and bullets: which ones help

A buy box can get crowded quickly. If you only need one badge image under the description, the simpler route is in [Add Trust Badges Below a Shopify Product Description](/blog/shopify-trust-badges-below-description). For the full buy box, a few rules keep it readable:

- **Four feature bullets or fewer.** Each should be something a shopper would search for or ask about: an ingredient, a skin type, a size.
- **One offer line.** The discount and the coupon price belong together. A second promotion underneath competes with the first.
- **Only badges that are true for every order.** "Free shipping on prepaid" is fine if every prepaid order ships free. If free shipping needs a minimum spend, say so or leave it out.
- **Real stock numbers only.** A stock warning that never changes is easy for a returning shopper to spot.

## Doing it with an app instead

Trust badge and "sales booster" apps can do parts of this without code. They usually add an app block (a piece the app adds to your theme) to the product page, and you place it in the same theme editor. Some add badges only, some add bullets and countdowns too.

The code approach has two advantages. It adds nothing to the page's loading time beyond a few lines of text and styling. And it keeps working if you stop paying for an app. An app is the better choice if you want different bullets on every product without editing code, or if your products have many variants with different prices.

## If it did not work

- **Nothing shows at all.** Check that you saved, and that you are looking at the theme you edited, not a different one in your theme library.
- **The blocks show in the wrong place.** Open the sidebar list and drag them. The order in the list is the order on the page.
- **The prices show in the wrong currency format.** The block uses your store's own money format, so it matches the price above it. If it does not, check Settings > General > Store currency.
- **The Save tag is missing.** The product needs a Compare-at price higher than its price.
- **"Liquid error" appears on the page.** A quote or a bracket was lost while pasting. Delete the block's content and paste the code again in one go.


---

---
title: Shopify Product Page Design: Price Next to the Title
description: Move the price to the right of the product title on a Shopify Dawn product page and make both the same size, with one block of CSS and no app.
---

## The problem

On a default Dawn product page, the product title sits on one line and the price sits on the next line below it. Both are centred or left aligned, one above the other.

A merchant on the Shopify Community wanted a different product page design. They wanted the price on the right side, level with the title, and they wanted the title the same size as the price.

I rebuilt their page on a test store running Dawn and made the change with a short block of CSS. CSS is the code that controls how a page looks. Dawn has a box in the theme editor where you can paste it, so you do not need to edit any theme files.

Here is the page before the change. The price sits under the title.

![Dawn product page before the change, with the price on its own line under the title](/images/blog/shopify-product-page-design-price-next-to-title/01-price-under-title-before.png)

And here is the page after the change. The title is on the left, the price is on the right, and both are the same size.

![Dawn product page after the change, with the title on the left and the price on the right at the same size](/images/blog/shopify-product-page-design-price-next-to-title/02-price-right-of-title-after.png)

## Why there is no setting for this

Dawn lets you reorder the blocks on a product page. A block is one piece of the page, such as the title, the price or the size picker. You can drag the price above the title, but every block gets its own full row. There is no option to put two blocks side by side.

The same goes for the text size. Dawn sets the title size in its own code, and the product page settings have no slider for it. That is why this change needs a small amount of CSS.

## What you need before you start

- A store running the Dawn theme, or a theme built on Dawn.
- A product page you want to change.
- About five minutes.

The steps below were tested on Dawn 15.5.0. If you run a newer version, the same class names are still in use on the product page.

## The steps

### 1. Open the theme editor

Go to **Online Store** in your Shopify admin, then click **Edit theme** next to your current theme.

![Online Store page in the Shopify admin with the Edit theme button highlighted](/images/blog/shopify-product-page-design-price-next-to-title/03-online-store-edit-theme.png)

### 2. Switch to a product page

The editor opens on your home page. Click the page list at the top and choose **Products**. Pick any product. All products share the same product page layout, so the one you choose does not matter.

![The page list in the Dawn theme editor open, with Products highlighted](/images/blog/shopify-product-page-design-price-next-to-title/03b-switch-to-product-page.png)

### 3. Add a Custom Liquid block

Click **Product information** in the left panel. Then click **Add block**.

![The Product information section expanded in the editor with the Add block button highlighted](/images/blog/shopify-product-page-design-price-next-to-title/04-add-block.png)

Choose **Custom Liquid** from the list. A Custom Liquid block is a box where you can paste code. Dawn puts it on the page without changing anything else.

![The block picker in the Dawn theme editor with Custom Liquid highlighted](/images/blog/shopify-product-page-design-price-next-to-title/05-pick-custom-liquid.png)

### 4. Paste the code

Paste this into the **Liquid code** box. Keep the `<style>` lines at the top and bottom, because they tell the page that the text between them is CSS.

```html
<style>
.product__info-container {
  display: grid !important;
  grid-template-columns: 1fr auto;
  column-gap: 2rem;
  align-items: center;
}
.product__info-container > * {
  grid-column: 1 / -1;
}
.product__info-container > .product__title {
  grid-area: 2 / 1;
  text-align: left;
  margin: 0;
}
.product__info-container > div[id^="price-"] {
  grid-area: 2 / 2;
  text-align: right;
  margin: 0;
}
.product__title h1,
.product__title h2,
.product__info-container .price,
.product__info-container .price-item {
  font-size: 2rem;
  line-height: 1.3;
}
</style>
```

![The Custom Liquid box in the editor with the CSS pasted in](/images/blog/shopify-product-page-design-price-next-to-title/06-paste-css-in-custom-liquid.png)

### 5. Save

Click **Save** at the top right. Open the product page in a new tab to check it.

![The Save button at the top right of the theme editor](/images/blog/shopify-product-page-design-price-next-to-title/07-save.png)

## How the code works

You do not need this to use the code, but it helps if you want to adjust it.

The product information area is split into two columns. The left column takes all the spare width. The right column is only as wide as its content.

The title goes in the left column of row two. The price goes in the right column of the same row. Every other part of the product info, such as the size picker and the Add to cart button, still spans both columns, so it keeps its normal full width position.

The last rule sets the text size of the title and the price. Both are **2rem**. A rem is a size unit based on your store's base text size. Dawn sets one rem to 10 pixels, so 2rem is 20 pixels. I measured both the title and the price at 20 pixels on my test store.

## Change the size of the title and price

Edit **2rem** in the last rule. A bigger number gives bigger text. Because the title and the price share one rule, they always stay the same size as each other.

If you want the price a little smaller than the title, split the last rule in two. Give the title its own **font-size** and the price its own.

## Does it work on a phone?

Yes. I checked the same page at a phone width of 390 pixels. The title stays on the left and the price stays on the right of the same row.

![Phone view of the product page with the title on the left and the price on the right](/images/blog/shopify-product-page-design-price-next-to-title/08-mobile-price-beside-title.png)

## What happens with a long product title?

A long title is the main thing to watch. I changed the title on my test store to a long one, "Oversized Heavyweight Cotton Autumn Collection Crewneck T-shirt (fall edition)", and looked at it on a phone.

The title wraps onto four lines on the left. The price stays on the right, centred beside those lines. Nothing overflows the screen.

![Phone view with a long product title wrapping onto four lines beside the price](/images/blog/shopify-product-page-design-price-next-to-title/09-mobile-long-title-wraps.png)

If you think this looks crowded, make the size smaller. A value of **1.6rem** gives a long title more room.

## Which block moved, and which did not

The vendor line, which is the small grey brand name above the title, stays above the row on its own line. The size picker, quantity box and buy buttons stay below it, one under the other.

## Is this a good layout for your store?

Another merchant replied to the same thread with a fair warning. They pointed out that a title and a price on one row leave less room for each. Products with long titles, a sale price with a crossed out old price, or a sales badge can all crowd that row, and phones have even less width.

The long title test above is the one case I checked on a phone. The title wrapped neatly and the price stayed beside it. I did not test a product with a sale price and a badge, so look at your own sale products on a phone before you keep this design.

A few things help it work well.

- Keep product titles short. Two or three words suit this layout best.
- Keep the price on one line. A single price on the right is easier to scan than two prices.
- If your sale products look crowded, lower the **2rem** value or remove the price rule and keep only the title change.

The same merchant also suggested giving the Add to cart button a solid background colour so it stands out more. That is a separate change in your theme colour settings, and it is worth a look once the title row is finished.

## What if it did not work?

**Nothing changed on the page.** Check that the Custom Liquid block sits inside **Product information**, not inside another section. Then save and reload the product page.

**The title is on the left but the price is still below it.** Your price block may use a different structure. Open the product page, right click the price, choose **Inspect** and check that its wrapper has an id that starts with the word price. If it does not, your theme is not built on Dawn.

**The title is very narrow.** The price column has taken too much space. This happens when the price is long, such as a price range. Make the price smaller using the last rule.

**You use Horizon or another newer theme.** The class names in this code are Dawn's. Horizon builds its product page differently, so the code does nothing there.

**You want it on collection pages too.** This code only changes the product page. For the price on collection cards see [how to change the price font size on a collection page](/blog/shopify-price-font-size).

## Related changes you might want

- Change the size of the description text: [Shopify product description font size](/blog/shopify-product-description-font-size).
- Move the whole info column up on desktop: [customize the Shopify product page layout with CSS](/blog/customize-shopify-product-page-layout).
- Put the product images and info in two columns: [Shopify two column product page](/blog/shopify-two-column-product-page).
- Learn where the Custom CSS box lives: [how to add custom CSS in Shopify](/blog/how-to-add-custom-css-in-shopify).

## Summary

- Switch the editor to a product page.
- Add a **Custom Liquid** block to **Product information**.
- Paste the code and click **Save**.
- Change **2rem** to make the title and price larger or smaller.
- Check a product with a long title on your phone before you finish.

Tested on Dawn 15.5.0 with a six size product. The phone checks were done at a width of 390 pixels.


---

---
title: Shopify Product Variant Image Switching, Explained
description: Your product page keeps loading the first variant's photo instead of the main image you chose. Here is how Shopify variant image switching works, why the wrong photo shows first, and the exact fix, tested on Crave.
---

## The problem

A merchant asked about this on the Shopify Community, and it is one of those things that feels broken but is actually working exactly as the theme was built.

They run Shopify's Crave theme. They set a nice lifestyle photo as the main image for a framed art print. But when a customer opens the product page, that photo is not what loads. Instead the page opens on the first variant's photo, a plain shot of one frame style. The photo they chose gets bumped down to a thumbnail.

They tried the obvious fix: drag the main photo to the first spot in the media library. It did not help. The variant photo still loaded first.

Here is the same thing reproduced on a test store. The main image is the "Oak frame" variant photo, and the lifestyle photo the merchant actually wanted is pushed down to the second thumbnail.

![Crave loads the first variant photo as the main image, not the one the merchant chose](/images/blog/shopify-product-variant-image-switching/01-variant-photo-loads-first.png)

If this is happening to you, you are not doing anything wrong. This is variant image switching, and once you understand it the fix is quick.

## What variant image switching is

Variant image switching is the behavior where the product photo changes to match the option a shopper selects.

A customer picks the red shirt, the main photo swaps to the red shirt. They pick the oak frame, the photo swaps to the oak frame. It is a good feature. It ties each option to its own picture so the shopper always sees what they are about to buy.

You turn it on by attaching an image to a variant in the product editor. Each variant can point at one photo in your media library. When the shopper selects that variant, the gallery jumps to its photo.

So far, so useful. The trouble starts with what the theme does before the shopper touches anything.

## Why the wrong photo loads first

When a product page loads, the theme has to pick which image to show before the customer has selected anything.

Most modern Shopify themes, including Crave and the whole Dawn family it is built on, make the same choice: they show the first available variant's photo. Not the first image in your media library. The first variant's assigned photo.

That is the key detail. If your first variant has a photo attached, that photo wins on load, no matter where your chosen main image sits in the media order.

This is why dragging your main photo to the first position does nothing on its own. The media order controls the thumbnails, but the initial main image is decided by the variant, and the variant overrides it.

You can confirm it is variant switching and not a broken image. Change your variant selection on the page. If the main photo jumps to a different picture each time, switching is on and a variant photo is claiming the top spot.

The fix is to tell the theme to load your chosen first image instead, while leaving the switching behavior in place for when a shopper actually picks an option.

## The fix, tested on Crave

This is a small theme code edit. It is one Find and Replace in a single file. I tested it on a Crave store and it does exactly what you want: your chosen photo loads first, and variant switching still works after that.

It comes in two parts.

First, put your main photo first.

- Open the product in your admin.
- Under Media, drag the photo you want as the main image to the very first spot.
- Save.

Second, make the theme respect that order.

- Go to Online Store, then Themes.
- On your theme, click the three dots menu, then Edit code. If you want a safety net, duplicate the theme first and edit the copy.
- Open the file `snippets/product-media-gallery.liquid`.
- Press Ctrl+H to open Find and Replace inside the code editor, and turn on Replace all.
- In Find, paste: `product.selected_or_first_available_variant.featured_media`
- In Replace, paste: `product.featured_media`
- There are 7 matches in that file. Replace all of them, then Save.

![Find and Replace in product-media-gallery.liquid, swapping the variant expression for product.featured_media](/images/blog/shopify-product-variant-image-switching/02-find-and-replace-fix.png)

That is the whole change. You are swapping the piece of code that means "the first variant's photo" for the piece that means "the product's first image". Both the main gallery and the thumbnail strip use it, which is why there are seven matches. Replacing all of them keeps the two in sync.

## Check that it worked

Open the product page again. The main image should now be the photo you set first, not a variant shot.

On my test store, the page opened on the first variant's frame photo before the change. After the change, it opened on the lifestyle photo I had set as the first image, exactly as intended.

![After the fix, the chosen main photo loads first while variant photos still switch](/images/blog/shopify-product-variant-image-switching/03-chosen-photo-loads-first.png)

Then click through your variants. Pick the oak frame, pick the black frame. The main photo should still swap to match each one. You have not lost variant image switching. You have only changed which photo greets the shopper before they choose.

## Will this break my variant photos?

No, and this is the part people worry about most, so it is worth being clear.

The edit only changes which image is active when the page first loads. Every variant photo is still in the gallery, and the theme still swaps to the right one the moment a shopper selects an option. I verified this after the change: load showed the chosen main photo, and selecting a variant switched the photo as normal.

The only behavior you are turning off is the theme jumping to a variant photo on its own, before the customer has done anything.

## The no-code alternative

If you would rather not touch theme code, there is a simpler route, with one trade-off.

Remove the image link from each variant. In the product editor, open each variant and clear its assigned image. Then set your media order so your chosen photo is first.

With no photo attached to any variant, there is nothing for the theme to jump to, so it falls back to your first media image. Your main photo loads first with no code at all.

The trade-off is that you lose variant image switching entirely. The photo will no longer change when a shopper picks an option. If you do not rely on per-variant photos, this is the easiest fix. If you do want the photo to change per option, use the code edit above instead.

## Does this change affect all my products?

Yes. The file you edit is shared by every product page in the theme, so the new behavior applies store wide.

That is usually what merchants want. Every product will now open on its own first media image, and every product will still switch photos when a shopper picks a variant. There is no per-product setting for this, so the code edit is the way to control it across the catalog at once.

If you only want it on one product, that is not something a theme setting can do cleanly. The edit is store wide by design.

## What to check if the photo still loads wrong

If the wrong image still shows after the change, run through these.

- Confirm your chosen photo really is first in the media order. The fix loads the first media image, so if a different photo sits in position one, that one loads.
- Make sure you replaced all seven matches, not just the first. A missed match in the thumbnail section can leave the gallery half changed.
- Clear your cache or open the page in a private window. Themes and browsers both cache aggressively, so an old version can linger.
- Check you edited the live theme, or published the copy you edited. It is easy to edit a duplicate and forget it is not the one customers see.
- If you have an image zoom or gallery app, it may control the main image itself. Disable it briefly to test whether the theme or the app is in charge.

## Variant image, featured image, and media order

These three get mixed up constantly, and knowing the difference makes this whole topic click.

A variant image is a photo attached to one specific option, like the oak frame. Its job is to switch the main photo when that option is selected. It is optional, and it is what causes the behavior in this article.

The featured image, or first media, is simply the photo in position one of your product's media library. It is the product's default picture, the one used on collection pages and shares. The fix in this article tells the product page to open on this image.

Media order is the sequence of all your photos. It controls the thumbnails and the order a shopper scrolls through. On its own it does not decide the opening main image, because a variant photo overrides it. That is the surprise that sends most merchants looking for an answer.

Once you see it that way, the fix makes sense. You are telling the theme to trust your media order for the opening image, instead of letting the first variant decide for you.

## The short version

Your product page loads the first variant's photo because Crave, and the Dawn family it belongs to, pick the first available variant's image as the opening main image. Drag your chosen photo to the first media spot, then in `snippets/product-media-gallery.liquid` replace all seven instances of `product.selected_or_first_available_variant.featured_media` with `product.featured_media`. Your chosen photo now loads first, and variant image switching still works when a shopper picks an option.


---

---
title: "Shopify Product Video: Autoplay, Loop, No Play Button"
description: "Dawn hides product videos behind a play button, and once you fix that you hit a second problem: a delay before the video starts. Here is the code for the first, and the file-size maths for the second."
---

## The problem

A merchant asked this on the Shopify Community. She had uploaded a short video to a product, and she wanted it to play by itself and loop, without the shopper having to press anything.

On Dawn, that is not an option you can tick. The video sits behind a play button and waits.

![A Shopify product video showing a poster image with a play button overlay](/images/blog/shopify-product-video-autoplay/01-product-video-play-button.png)

There is no autoplay setting in the theme editor. There is no toggle in the media section. The product video simply does not start on its own.

That is the first half of this article. The second half is the part rarely written about, which is what happens after you fix it and the video still takes several seconds to appear.

## Why Dawn will not autoplay a product video

Dawn wraps every product video in a custom element called `deferred-media`. Inside it, the actual `<video>` tag is not in the page at all. It sits inside a `<template>` tag, which browsers parse but do not render and do not load.

What you see instead is a poster image with a play button drawn over it.

When you click, Dawn's JavaScript takes the video out of the template, puts it into the page, and starts it. That is the moment the browser first requests the video file.

This is a deliberate performance decision, and a good one. Product pages often carry several images and a video. Loading a multi-megabyte video that most visitors never play would wreck the page speed score for every visitor.

The consequence is that there is no setting to flip. The video is not paused. It does not exist yet.

## Muted is not optional

Before the fix, the constraint that decides everything else.

Autoplay with sound is blocked by every modern browser. Chrome, Safari, Firefox and Edge all refuse it unless the user has already interacted with the site, or has a strong browsing history with your domain. You cannot code around it and no app can either.

So an autoplaying product video is a **muted, looping** product video. That is the only version that works reliably.

In practice this is fine, because a product video on a listing page is a moving image, not a film. If your video depends on narration, keep the play button.

## The fix: one Custom Liquid section

This does not need theme code editing. It goes in a Custom Liquid section, which every free Shopify theme includes.

- Theme editor, open your product page.
- **Add section**, then choose **Custom Liquid**.
- Paste the code below, then Save.

![Adding a Custom Liquid section to a Shopify product page in the theme editor](/images/blog/shopify-product-video-autoplay/02-add-custom-liquid-section.jpeg)

```html
<style>
  deferred-media[loaded] .deferred-media__poster { display: none !important; }
</style>
<script>
(function () {
  function go() {
    document.querySelectorAll('deferred-media').forEach(function (dm) {
      if (dm.closest('.product-media-modal')) return;
      var t = dm.querySelector('template');
      if (t) {
        var v = t.content && t.content.querySelector('video');
        if (v) {
          v.setAttribute('muted', '');
          v.setAttribute('loop', '');
          v.setAttribute('playsinline', '');
          v.setAttribute('preload', 'auto');
          v.removeAttribute('controls');
        }
      }
      if (typeof dm.loadContent === 'function' && !dm.hasAttribute('loaded')) dm.loadContent(false);
      var live = dm.querySelector('video');
      if (live) { live.muted = true; live.loop = true; live.play().catch(function () {}); }
    });
  }
  if (customElements.get('deferred-media')) go();
  else if (customElements.whenDefined) customElements.whenDefined('deferred-media').then(go);
})();
</script>
```

Here is the result.

![The same Shopify product video playing automatically with no play button](/images/blog/shopify-product-video-autoplay/03-video-autoplays-looping.png)

The play button is gone, the video starts on its own, and it loops with no sound.

### What each part does

Worth understanding, because it tells you what to change if your theme differs.

The style rule hides the poster image once the video has loaded. Without it you get the poster sitting on top of a playing video.

`playsinline` is what stops iOS taking the video fullscreen the moment it starts. Leave it out and iPhone visitors get a fullscreen takeover.

`preload="auto"` tells the browser to start fetching the video immediately rather than waiting. Dawn's default is effectively the opposite.

The `.product-media-modal` check skips the lightbox copy of the video. Dawn renders the media twice, once inline and once in the popup gallery, and you do not want the hidden one playing in the background.

The `customElements.whenDefined` wrapper waits for Dawn's own JavaScript to register the element before touching it. This matters. An earlier version of this code that ran on window load instead worked, but started the video several seconds late, because window load waits for every image and every tracking script on the page.

## Then the real problem shows up

The merchant came back after applying it. The play button was gone and the video was autoplaying. But: "it takes about 5 seconds before the video starts".

This is where most guides stop, and it is the more useful half.

That delay is not the code. The script starts the video as early as it possibly can. But the browser still has to download enough of the file to begin playing it, and while it does, the first frame sits there frozen. It looks exactly like a broken autoplay.

On my test store a light video, roughly 0.8 MB at 720p, started with no perceptible delay at all. Same code, same theme. So when the same code produces a five second wait on another store, the file is the difference.

## Measure the actual file

She sent the store, so I measured it rather than guessing.

Her source video was **21.26 MB** for **9 seconds** of footage.

![The original product video file at 21.26 MB](/images/blog/shopify-product-video-autoplay/04-original-video-file-size.jpeg)

Shopify transcodes uploaded video into several renditions. For this one it produced:

- 480p, 1.80 MB
- 720p, 5.07 MB
- 1080p, 8.01 MB

And here is the finding that surprised me. Dawn puts exactly **one** `<source>` on the video tag, and it picks the **largest** rendition. I confirmed this both on her live page and on my own Dawn 15.5.0 test store.

So every visitor downloads the 1080p file. Not a size chosen for their screen or their connection. Phone on 4G included.

Her page was serving 8 MB of video, 606 by 1080, before a single frame could appear. On a fast desktop connection that is quick. On mobile it is your five second wait.

## Fix the file, not the code

The lever is the video, not the JavaScript.

Re-export it as:

- **Shorter.** A few seconds is plenty for a looping product video.
- **720p**, not 1080p and definitely not 4K. It is displayed in a box a few hundred pixels wide.
- **MP4, H.264**, properly compressed.

I re-encoded her video at 720p and got it from 21.26 MB down to **0.4 MB**, about 52 times lighter, with no visible difference at the size it renders. That version starts instantly, including on mobile.

Then replace the file on the product:

- Open the product in admin.
- In **Media**, **delete the old video** first.
- Add the new file.
- Save.

That delete step is not optional, and it is where this particular thread ended up. She uploaded the compressed file, but the delay stayed. I checked the live page again and it was still serving the original 8 MB 1080p rendition.

![The live product page still loading the original 8 MB video file](/images/blog/shopify-product-video-autoplay/05-page-still-loads-8mb-file.jpeg)

The giveaway was the dimensions. The file being served was 1080p. The replacement was 720p. A 720p source cannot produce a 1080p rendition, so the new file was clearly not the one on the page.

Adding a new video without removing the old one leaves the old one first in the media list, and first is what the product page shows. Delete, then add.

Give Shopify two or three minutes after upload to transcode before you judge the result.

## How to add a video to a Shopify product page

The step before all of this, for completeness.

- **Products**, open the product.
- In the **Media** card, click **Add** and upload your video file, or drag it in.
- Wait for it to process. Large files take a few minutes.
- Drag it to reorder if you want the video first in the gallery.

Uploaded video lives on Shopify's CDN and gets transcoded automatically. You can also paste a YouTube or Vimeo URL in the same place, which embeds rather than hosts.

For an autoplaying, looping product video, upload the file. YouTube embeds carry the player chrome, the branding, and suggested videos at the end, and the autoplay behaviour is controlled by YouTube's parameters rather than your theme.

## Video limits worth knowing

- Uploaded video is capped at **1 GB** and **10 minutes** per file. Neither is the real constraint. Page weight is.
- Shopify transcodes to multiple renditions automatically. You do not choose which one is served, the theme does.
- A product can hold multiple videos, but each one is a separate download.
- The video shows in the product media gallery. There is no native way to use it as a background or a hero without custom code.

The practical ceiling for a looping product video is about **1 MB**. Past that you are trading conversion for detail that cannot be seen in a 400 pixel box.

## What to check if it still does not autoplay

**Nothing happens at all.** Confirm the Custom Liquid section was added to the product template and saved, and that you are viewing the theme you edited. Previewing a draft theme after editing the live one, or the reverse, is the most common false alarm.

**The poster image stays on top of the playing video.** The style rule did not make it in. Check the whole block was pasted, not just the script.

**It plays but there is a long freeze first.** That is file weight. Go back to the measuring section. Check the size of the rendition your page is actually requesting, not the size of the file you uploaded.

**It works on desktop and not on iPhone.** `playsinline` is missing, or a low power mode is blocking autoplay. iOS refuses autoplay entirely in Low Power Mode and there is nothing you can do about that from the site.

**It plays twice, or you hear audio from nowhere.** The lightbox copy is also playing. Confirm the `.product-media-modal` check is present.

**It works, then stops working after a theme update.** Custom Liquid sections survive theme updates, but Dawn's internals can change. If `deferred-media` is renamed in a future version, the selector needs updating. This is the tradeoff for a code fix on a theme you do not control.

## The takeaway

Two separate problems get mixed together in every thread about this, and they have different fixes.

**No autoplay** is a theme behaviour. Dawn defers product video behind a play button on purpose, and a small Custom Liquid script undoes it. Muted and looping, because browsers allow nothing else.

**A delay before it starts** is a file problem. The code is already starting the video as early as it can. What you are watching is the download. Dawn serves the largest rendition to every device, so a 21 MB upload becomes an 8 MB download for a shopper on a phone.

I tested both halves on a Dawn store. The script removes the play button and loops the video muted. A 0.8 MB video starts with no perceptible delay under the exact same code that leaves an 8 MB video frozen for several seconds.

Compress the video. That is the part that actually changes what shoppers see.


---

---
title: "Shopify Quick Add Button Broken on Out-of-Stock Variants"
description: On Shopify's free Horizon and Dwell themes, the Quick Add button gets clipped and stops working on products that have an out-of-stock variant. Here is why it happens and the one-line theme fix, tested on Horizon.
---

## The problem: your Quick Add button is cut off and dead on some products

A merchant reported this on the Shopify Community, and it is a real bug in Shopify's own free themes.

Here is the short version. You turn on Quick Add so shoppers can add items to the cart straight from the collection page. On most products the little Quick Add button looks fine. But on a few products the button is sliced down to a thin sliver stuck against the right edge of the photo. Clicking it does nothing. It will not open the size picker either.

Turning Quick Add off makes the broken button disappear, but then you lose the feature on every product. That is not a fix, that is giving up.

I reproduced the whole thing on a clean Horizon store, found the exact cause, and there is a one-line change that fixes it. This post walks through what is happening and how to repair it.

## What you actually see

On the affected products, three things go wrong at once:

- The Quick Add button is clipped to a sliver about four pixels wide, jammed against the right edge of the product image.
- The button is dead. Clicking it does nothing, because the theme has marked it disabled.
- It never opens the "Choose options" popup, so a shopper cannot pick a size or colour.

All three look like separate problems. They are not. They are the same single mistake, which I will get to below.

## Why some people cannot reproduce it

This part matters, because it is why the bug slips through.

The problem only appears on a very specific kind of product: one that has a **single option** (say just Size) with **several variants**, where the variant that gets selected is **out of stock**.

The trigger is usually the "Out of stock" filter on the collection page. When a shopper filters to see sold-out items, that is what tips the product into the broken state.

If you test with a normal in-stock product, or a product with two options like Size and Colour, you will not see it. That is exactly why one person in the thread tried repeatedly and could not reproduce it. The conditions have to line up. Once they do, it happens every time.

So if you want to see it on your own store: turn on Quick Add, open a collection, apply the "Out of stock" filter, and look at a product that comes in one option with at least one sold-out value.

## Why it happens

Here is the mechanism in plain English. You do not need to be a developer to follow it.

**Shopify themes give the Quick Add button two possible jobs.** For a product with only one version, the button says "Add" and drops it straight in the cart. For a product with several versions, the button instead says "Choose options" and opens a little menu so the shopper can pick. The theme looks at each product and decides which of the two to show.

**The out-of-stock filter pre-selects a variant for you.** This is normally a helpful feature. If a shopper filters a collection by "Red", Shopify selects the red variant so the card can show the red photo and price. Filtering by "Out of stock" runs the same machinery, so it selects the sold-out variant. That is reasonable on its own.

**The theme then trusts that selection too much.** Because a variant is now selected, the theme decides it can show the simple one-click "Add" button, as if this were a single-version product. But the product actually has several variants, and the one that got selected is sold out.

**That is when the button collapses.** The "Add" button only draws its cart icon when the item can actually be bought. The selected variant is sold out, so no icon is drawn. The button's text is hidden until you hover. With no icon and no text, the button has nothing inside it, so its width shrinks to almost nothing. That is your four-pixel sliver. On top of that, because the variant is unavailable, the theme marks the button disabled, which is why clicking does nothing. And the real "Choose options" button is hidden, which is why the size picker never opens.

One wrong decision at the start, three broken symptoms at the end.

## The fix: one line in the theme code

The fix is to stop the theme from switching to the "Add" button for products that have more than one variant. Those should always show "Choose options", which is a normal-sized button that opens the picker and does not care whether one specific variant is in stock.

Go to **Online Store > Themes > Edit code**, open `snippets/quick-add.liquid`, and find the block that decides the button. Change it to this:

```liquid
assign quick_add_button = 'choose'
if product.variants_count == 1
  assign quick_add_button = 'add'
endif
```

The important part is what you remove. The original code also flips to "Add" when a product has one option and a variant is selected. That is the exact line the out-of-stock filter abuses. Once it is gone, only genuinely single-variant products get the compact "Add" button. Everything with multiple variants gets "Choose options" and behaves.

I tested this on a Horizon store with the same product and the out-of-stock filter on. Before the change, the button is a four-pixel clipped sliver you cannot click. After the change, it is a full "Choose options" button that opens the picker.

![Before and after on a Horizon store: the clipped four-pixel Add sliver versus the restored Choose options button](/images/blog/shopify-quick-add-out-of-stock-variants/01-before-after.jpeg)

Single-variant products are unaffected. They still get the quick one-click "Add" button, because `product.variants_count == 1` is still true for them.

## Is this my store's fault or a Shopify bug?

It is a Shopify bug, not something you broke.

The merchant who reported it confirmed it on a fresh, unmodified copy of the Dwell theme, and on Horizon. Both are Shopify's own free themes. When a bug shows up on a clean install with no apps and no custom code, it is coming from the theme itself.

That means two things for you:

- The code change above fixes it on your store today.
- Every new install of these themes still ships with the bug until Shopify patches the base theme.

So it is worth reporting to Shopify as well, so they fix it at the source. Report it on the Shopify Developer Community Forums under Online Store and Theme Development, and include your store URL, the theme version, and the exact trigger (single-option product, out-of-stock filter on). Well-documented reports get picked up faster.

## Prefer to hide out-of-stock variants instead?

Some merchants would rather the sold-out variants not show up at all, so the whole situation never arises. That is a fair approach, and it is a slightly different job.

If that is what you want, see our guide on [how to hide out-of-stock variants in Shopify](/blog/shopify-hide-out-of-stock-variants). It covers why filtering a collection by, say, "Medium" can still show products where Medium is sold out, and the Liquid fix for it. Hiding the sold-out variants and fixing the Quick Add button are not mutually exclusive. Many stores want both.

While you are cleaning up variant behaviour, two related fixes come up a lot on multi-variant products: making the [product page shorter when a product has many variants](/blog/shopify-too-many-variants-layout), and getting the [gallery to show only the selected variant's images](/blog/shopify-horizon-show-only-variant-images).

## What to check if the fix did not work

If you made the change and the button is still broken, run through these:

- **You edited the wrong theme.** Make sure you are editing the live theme, not an old duplicate. Check the theme name at the top of the code editor.
- **The browser cached the old file.** Hard refresh the storefront, or view it in a private window, so you are not looking at a stale copy.
- **Your product uses swatches.** If the single option is shown as clickable colour swatches on the card, the theme has a second place in its JavaScript that can flip the button back. In that case the same rule needs applying there too. Most stores hit the filter version first, which the code change above covers.
- **You are on a different theme.** This specific fix is for Horizon and Dwell, which share the same Quick Add code. Other themes have their own Quick Add files and may need a different edit.

## Quick Add, Quick View and Quick Buy are not the same thing

These get mixed up, so a quick note.

- **Quick Add** adds a product to the cart from the collection page. It is the feature this post is about.
- **Quick View** opens a popup preview of the product without leaving the collection page. It is about looking, not buying.
- **Quick Buy** or dynamic checkout is the "Buy it now" button that skips the cart and goes straight to checkout.

The clipped-button bug is a Quick Add problem. If your issue is a popup preview or a "Buy it now" button, you are looking at a different feature.

## Wrapping up

The clipped, unclickable Quick Add button on Horizon and Dwell is not random and it is not your fault. It shows up when a single-option product has an out-of-stock variant that gets selected, usually by the out-of-stock filter. The theme then wrongly shows the one-click "Add" button, which collapses to a sliver and disables itself.

The repair is a single change in `snippets/quick-add.liquid` that keeps multi-variant products on the "Choose options" button. I tested it on Horizon and the sliver turns back into a working button that opens the size picker.

Make the change so your store works today, and report the bug to Shopify so it gets fixed in the theme for every store.


---

---
title: "Shopify Recurring Orders for B2B, Without Subscriptions"
description: B2B checkouts reject selling plans, so no subscription app works. But vaulted cards plus two Flow workflows give you recurring orders that bill themselves, with no manual invoicing.
---

## The problem

A merchant on the Shopify Community runs a purely B2B store, no consumer checkout at all. They wanted to sell maintenance bundles as a subscription.

They had done the research. Days of it. Asked AI, searched apps, contacted app developers, and kept arriving at the same two options:

1. Auto-generated draft orders that a human processes by hand. No customer self-serve.
2. Stack a B2B app and a subscription app together and hope they cooperate.

Their words on option two: "This option terrifies me."

The replies confirmed the wall was real, which it is. Then they went further and said something that is no longer true: that the customer has to complete each payment manually.

That part is solved, and it has been for a while. Here is what actually works.

## Why subscription apps cannot work on B2B

Worth being precise, because this is what makes app shopping a waste of time.

Every subscription app on Shopify is built on **selling plans**. That is the platform primitive for "this line item recurs". A subscription app's whole job is creating selling plans and attaching them to products.

B2B checkouts do not support purchase options, and selling plans are a purchase option. Shopify's developer documentation states this directly. Draft orders cannot carry selling plans either, so there is no side door there.

This is why stacking a B2B app on top of a subscription app does not help. The B2B app adds features around the checkout; it does not change what the checkout accepts. You discover the problem later, at payment, instead of earlier, during setup. The wall moves, it does not disappear.

So: no subscription app, no matter how it is marketed, will do recurring billing on a B2B checkout. Stop evaluating apps for this.

## What does work: split the order from the money

The insight is that "subscription" bundles together two things you can build separately.

**Producing a recurring order.** No native answer. Flow can send a draft order invoice but has no action that *creates* a draft order, so this piece needs the Admin API.

**Collecting the payment automatically.** This has a native answer, and it is the part the thread had wrong. Shopify supports **credit card vaulting** for B2B. The buyer saves a card once, at checkout or from their customer account, and Flow can charge it when payment terms fall due.

Build them as two workflows, once per customer.

![The finished two step billing workflow](/images/blog/shopify-recurring-orders-b2b/04-finished-billing-workflow.png)

## Workflow 1: create the order

Trigger: **Scheduled time**, set to monthly.

Then add the action **Send Admin API request** and pick `draftOrderCreate`.

![draftOrderCreate and draftOrderComplete inside the Send Admin API request action](/images/blog/shopify-recurring-orders-b2b/01-draftordercreate-admin-api-request.png)

In the mutation you set:

- the company location as the purchasing entity, so the order is a real B2B order on that company's account
- your maintenance items as line items
- payment terms, whatever you use: Net 15, Net 30, and so on

Then add a **second** Send Admin API request with `draftOrderComplete` to turn the draft into a real order.

Two calls, not one, because `draftOrderCreate` gives you a draft and `draftOrderComplete` is what commits it. Splitting them is also useful if you ever want a human to review before committing: leave out the second call and the draft waits in the admin.

### You do not need a bundle product

The merchant's original plan was to build the maintenance bundle as a single product, or fight with a bundling app to combine items.

Skip it. A draft order takes the individual items as separate line items, each priced from that company's catalog. So the "bundle" is just the line items in your workflow.

That is better than a bundle product in two ways. The company's negotiated pricing applies per item, automatically, because that is what B2B catalogs do. And changing what is in the bundle month to month means editing one workflow, not rebuilding a product and its variants.

## Workflow 2: collect the money

Trigger: **Payment schedule is due**.

![Selecting the Payment schedule is due trigger in Flow](/images/blog/shopify-recurring-orders-b2b/02-payment-schedule-is-due-trigger.png)

This trigger fires when payment terms you set on an order come due. Because workflow 1 sets payment terms, workflow 1 is what eventually fires workflow 2.

Then add the action **Charge vaulted payment for B2B order**.

![Selecting the Charge vaulted payment for B2B order action](/images/blog/shopify-recurring-orders-b2b/03-charge-vaulted-payment-action.png)

That is the entire second workflow. Flow fills in the payment schedule field itself from the trigger, so there is nothing to configure.

Shopify charges the saved card. The customer does nothing.

Both halves of this are first party and documented. There is no app involved in the billing at all.

## Prerequisites, and the honest limits

Four things to know before you build it, because they are the constraints that decide whether this fits your business.

**Shopify Payments is required.** Vaulted cards do not work with other gateways. If you are on a third-party gateway, the automatic charge half of this does not exist for you, and you are back to invoicing.

**The buyer saves the card, and only the buyer can.** You cannot save it on their behalf. So there is a one-time human step at the start of each customer relationship: they check out once, or add a card from their customer account. After that it is hands-off.

**Debiting a bank account instead of a card is US only.** If your buyers want ACH rather than card, check availability in your market first.

**There is no buyer-facing portal.** The customer cannot pause, skip, or swap items themselves. They email you, and you edit the workflow. For a maintenance-bundle business with a handful of accounts, that is usually fine. For hundreds of self-serve accounts, it is not, and that is the point where a consumer checkout lane starts to look reasonable.

That last one is the real trade-off, and it is worth stating plainly rather than discovering it in month three.

## Why not just use a consumer checkout for these buyers?

This is the alternative the thread raised, and it is legitimate. Sell the bundles through a normal D2C checkout, and use any subscription app you like.

What you give up is everything B2B gives you: company accounts, negotiated per-company catalogs and pricing, payment terms, tax exemption handling, purchase order numbers, and multiple buyers on one company location.

For a maintenance contract, those are usually the point. The customer is a company, the price is contract pricing, and finance expects Net 30. Pushing that through a consumer checkout to gain a subscription widget is trading the thing you need for the thing that is convenient.

So the decision is roughly: if the recurring items are genuinely commodity and the buyer behaves like a consumer, use a D2C lane. If they are contract items on company pricing with terms, use the two workflows.

## The piece with no native answer

Being straight about this: **Flow cannot create a draft order on its own.**

There is no `Create draft order` action. The `Send Admin API request` action is how you get around that, and it means workflow 1 contains a GraphQL mutation you wrote rather than a UI you clicked together.

That is more fragile than a native action. If Shopify changes the mutation, your workflow breaks and you find out when an order does not appear. Worth adding a second, simpler workflow that alerts you if no order was created in a given month, rather than assuming it ran.

The alternative for this piece is a small scheduled script somewhere outside Shopify hitting the Admin API, or a tool like Mechanic. Both are more code, not less.

## A worked shape

For a single customer on a monthly maintenance bundle:

1. Workflow 1, scheduled monthly on the 1st. `draftOrderCreate` with company location, three line items, Net 30. Then `draftOrderComplete`.
2. Order exists on the 1st, with terms due the 31st.
3. Workflow 2 fires on the 31st from **Payment schedule is due**, charges the vaulted card.
4. Repeat.

To onboard the second customer, duplicate workflow 1 and change the company location and line items. Workflow 2 is shared: it fires for any order whose terms come due, so you only build it once.

That last detail is worth noticing. The billing workflow scales to every customer with no extra work. Only the order-creation workflow is per customer, and only because the line items differ.

## Common questions

**Can one workflow handle all customers?**

Workflow 2, yes. Workflow 1, only if every customer gets the same items on the same cadence, in which case you can loop over a customer segment instead of hardcoding one company location.

**What happens if the card is declined?**

The Flow action fails and the order stays unpaid with terms overdue. Add a branch that emails your team on failure, because otherwise you find out at month end.

**Can I use payment terms without vaulting?**

Yes, that is the standard B2B flow: order with Net 30, invoice sent, customer pays manually. Vaulting is what removes the manual payment. Without it you still get automatic recurring *orders*, just not automatic recurring *payment*.

**Does this work with bundles built by a bundling app?**

You do not need one, and mixing them in adds a dependency that may not respect B2B catalog pricing. Use plain line items.

**Is there a B2B subscription feature coming?**

Not announced. Treat the current limitation as the state of the platform, and build for it rather than around a maybe.

## If it did not work

**The `draftOrderCreate` call fails.** Usually the company location ID is wrong or the buyer identity is not set, so Shopify treats it as a consumer draft order and rejects the B2B pricing. Check the mutation returns a draft order ID before adding the complete step.

**Payment schedule is due never fires.** The order has no payment terms. Terms have to be set in the `draftOrderCreate` call; they are not inherited automatically.

**Charge vaulted payment fails with no card on file.** The buyer has not saved one yet. This is the one step you cannot automate, so it belongs in your onboarding, not your workflow.

**The order is created but at the wrong price.** The purchasing entity is not set to the company location, so the company's catalog is not being applied.

## Tested on

Built on a Shopify dev store: confirmed the `Payment schedule is due` trigger and the `Charge vaulted payment for B2B order` action both exist and pair without extra configuration, and confirmed `draftOrderCreate` and `draftOrderComplete` are reachable through the `Send Admin API request` action. The workflows were left as drafts. The vaulted-card charge itself was not run against a live card, since that needs a real buyer to save one first.


---

---
title: "Shopify Related Products by Collection, Without an App"
description: "Shopify's related products show items that do not match, because the recommendation algorithm needs sales data a small catalog does not have. Drive the block off your collections and a hand-picked list instead, with one Custom Liquid section on Dawn."
---

## The problem

A merchant asked about this on the Shopify Community. They sell one-of-a-kind collectibles: autographs, signed jerseys, historical documents. Around 500 products, but only one or two sales a month.

On each product page, the "You may also like" block showed items that had nothing to do with the product on screen. A signed football jersey was recommended next to a handwritten letter. The picks looked random, and on a store built on trust that reads as careless.

They wanted the block to do one simple thing: show other products from a collection the current product is in. A jersey should suggest other jerseys, not letters.

I reproduced the setup on a test store running Dawn, Shopify's free default theme. The fix takes one Custom Liquid section, no theme switch, and no app. Here is why the default block fails and how to replace it.

## Why Shopify's recommendations show unrelated products

The product page block is powered by Shopify's recommendation engine. It ranks other products using two signals, in order: what customers bought together, then how similar the product descriptions read.

On a busy store that works well. Thousands of orders tell Shopify that buyers of product A also buy product B, and the block fills with things people actually pair.

On a store with one or two sales a month, there is almost no purchase data to rank. So the engine falls back to matching the text of your product descriptions. For unique collectibles, the descriptions all share words like "signed", "original", "certificate", and "rare". The engine reads a jersey and a letter as similar because the words overlap, and it pairs them.

The block is not broken. It is doing its best with data your catalog does not generate. That is the part worth understanding, because it tells you the fix is to stop feeding the engine and drive the block off something you control: your collections.

A collection is a group of products you set up yourself, like "Football" or "Legends". Most stores already sort their catalog into collections, so the grouping you want is sitting there unused by the recommendation block.

## The plan: hand-pick the few, fall back to collections for the rest

There are two reliable ways to get relevant related products, and the best setup uses both together.

The first is manual curation. For the products that matter most, you pick the related items by hand. Nothing beats a human choosing what pairs with a signed World Cup jersey.

The second is a collection rule. For every other product, the page shows other items from the same collection automatically, so you are not curating 500 products one by one.

The setup below does both. It shows your hand-picked items when you have set them, and falls back to same-collection items when you have not. You curate the handful of hero pieces, and the rest look after themselves.

To hold the hand-picked list, you add a metafield. A metafield is an extra field you add to a product to hold your own information, in this case a short list of related products.

## Step 1: Add a "Related products" field

Go to Settings, then Custom data, then Products, then Add definition.

Name it Related products. Set the Type to Product, and turn on List of values so it can hold more than one. Save it.

![Create the Related products metafield definition in Shopify Custom data](/images/blog/shopify-related-products-by-collection/01-create-related-products-metafield.png)

The internal name shows as `custom.related_products`. The code in Step 3 reads that field, so keep the name as it is unless you plan to edit the code to match.

## Step 2: Pick related items on your key products

Open one of your important products and scroll to the Metafields section near the bottom. In the Related products field, add two to four items that clearly pair with it. For a signed jersey, that might be other signed jerseys and a photo from the same era.

![Add hand-picked related products in the product metafield](/images/blog/shopify-related-products-by-collection/02-pick-related-products-on-product.png)

Leave this empty on any product you do not want to curate. Those fall back to their collection automatically, so you only spend time on the pieces that deserve it.

You do not have to do all 500. Start with your best sellers and your highest-value items. The rest are covered by the collection rule.

## Step 3: Add the Custom Liquid section

Custom Liquid is a box in the theme editor where you paste code. Dawn has it built in, so you do not need to touch the theme's own files.

Open your theme, go to the product template, click Add section, and choose Custom Liquid. Paste the code below into the Liquid box.

![Add a Custom Liquid section and hide the native Related products section](/images/blog/shopify-related-products-by-collection/03-add-custom-liquid-hide-related.png)

```liquid
{%- liquid
  assign limit = 4
  assign picks = product.metafields.custom.related_products.value
-%}
<div class="collection-recs page-width">
  <h2 class="collection-recs__title h2">You may also like</h2>
  <ul class="collection-recs__grid grid product-grid grid--2-col-tablet-down grid--4-col-desktop" role="list">
    {%- if picks != blank -%}
      {%- assign shown = 0 -%}
      {%- for item in picks -%}
        {%- if shown < limit and item.available -%}
          <li class="grid__item">
            <a class="collection-recs__link" href="{{ item.url }}">
              {%- if item.featured_image -%}{{ item.featured_image | image_url: width: 500 | image_tag: loading: 'lazy', widths: '200,300,400,500' }}{%- endif -%}
              <span class="collection-recs__name">{{ item.title }}</span>
              <span class="collection-recs__price">{{ item.price | money }}</span>
            </a>
          </li>
          {%- assign shown = shown | plus: 1 -%}
        {%- endif -%}
      {%- endfor -%}
    {%- else -%}
      {%- assign skip = ',frontpage,all,sale,new,new-arrivals,featured,home-page,' -%}
      {%- assign seen = ',' | append: product.id | append: ',' -%}
      {%- assign shown = 0 -%}
      {%- assign cols = product.collections | sort: 'all_products_count' -%}
      {%- for c in cols -%}
        {%- assign probe = ',' | append: c.handle | append: ',' -%}
        {%- unless skip contains probe -%}
          {%- for item in c.products limit: 60 -%}
            {%- assign key = ',' | append: item.id | append: ',' -%}
            {%- if shown < limit and item.available -%}
              {%- unless seen contains key -%}
                <li class="grid__item">
                  <a class="collection-recs__link" href="{{ item.url }}">
                    {%- if item.featured_image -%}{{ item.featured_image | image_url: width: 500 | image_tag: loading: 'lazy', widths: '200,300,400,500' }}{%- endif -%}
                    <span class="collection-recs__name">{{ item.title }}</span>
                    <span class="collection-recs__price">{{ item.price | money }}</span>
                  </a>
                </li>
                {%- assign seen = seen | append: item.id | append: ',' -%}
                {%- assign shown = shown | plus: 1 -%}
              {%- endunless -%}
            {%- endif -%}
          {%- endfor -%}
        {%- endunless -%}
      {%- endfor -%}
    {%- endif -%}
  </ul>
</div>
<style>
  .collection-recs{margin:4rem auto}
  .collection-recs__title{margin:0 0 2rem}
  .collection-recs__link{display:block;text-decoration:none;color:rgb(var(--color-foreground))}
  .collection-recs__grid{gap:1.5rem}
  .collection-recs__link img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--media-radius,.4rem);margin-bottom:.8rem}
  .collection-recs__name{display:block;font-weight:600}
  .collection-recs__price{display:block;opacity:.8}
</style>
```

Then hide the theme's own Related products section so you do not show two blocks. In the same product template, hover the Related products section in the left list and click the eye to hide it. Click Save.

Read the top of the code, and you can change one number. `assign limit = 4` sets how many products the block shows. Set it to 3 or 6 if you prefer.

## Step 4: Check the result

Open a product page on your storefront. The "You may also like" block now shows the items you picked, or, if you picked none, products from the same collection.

![The related products block showing only matching collectibles on the product page](/images/blog/shopify-related-products-by-collection/04-related-products-storefront-result.png)

On my test store a signed jersey that I had curated showed the three items I chose. A jersey with no picks fell back to its Football collection and showed three other footballers. A handwritten letter in the Documents collection showed only other documents. A jersey never appeared next to a letter again.

## What the code does that a plain collection loop does not

You will find shorter snippets in forum threads that just loop over `product.collections`. This one adds three guards that matter on a real store.

It reads your narrowest collection first. The line `sort: 'all_products_count'` puts the smallest collection at the front, so a specific collection like "1966 World Cup" beats a broad one like "All jerseys". Narrower collections make better recommendations.

It skips your utility collections. The `skip` list ignores collections like Home, Sale and New. Without that, a small "Featured" or "Sale" collection could hijack the block and fill it with unrelated items that happen to be on sale.

It skips sold items and products with no image. The `item.available` check drops anything out of stock, so you never recommend something a shopper cannot buy. The image check means a product without a photo shows its title and price instead of throwing an error or leaving a blank square.

## The no-code option: Search and Discovery

If you would rather not paste code, Shopify's own free app can hand-pick related products for you.

Install Search and Discovery from the Shopify App Store. Open it, go to Product recommendations, choose a product, and add up to ten related products by hand. Those picks appear in the theme's native Related products section, so you do not hide anything or add a Custom Liquid section.

The catch is scale. Search and Discovery is manual only, one product at a time, so it fits your top items but not all 500. The Custom Liquid section above is the one that covers the whole catalog, because the collection fallback needs no per-product work.

Pick one route or the other, not both. If you set manual recommendations in Search and Discovery, do not also add the Custom Liquid block, or the page will try to show two "You may also like" rows.

## When a recommendations app is worth it

Apps earn their place when you want behaviour the free routes do not give you, such as tracking which recommendations get clicked, showing "frequently bought together" bundles, or rotating the picks so repeat visitors see something new.

For rule-based and collection-based related products without purchase history, these are the established names:

- Tipo Related Products, Upsell
- Wiser AI - Upsell and Cross Sell
- Rebuy Personalization Engine

For a store with one or two sales a month, an app is usually more than you need. The metafield and collection setup gives you relevant recommendations for free, and it keeps working whether you sell one item this month or fifty.

## Same collection is the best practice at low volume

The instinct on a small store is to reach for a smarter algorithm. At one or two sales a month, the opposite is true. No algorithm can learn from data you do not have, so a clear rule you set yourself beats a guess every time.

Hand-pick the few items that matter and let collections cover the rest. Your product pages will show related items that make sense, your catalog will look curated rather than random, and you will not be paying an app to do what one field and one section already do.

## Related products and collections, terms people mix up

A collection is a group of products you build, either by hand or by a rule, like "Football" or "Under \$100". The related products block reads collections to decide what to suggest.

A metafield is an extra field on a product for your own data. Here it holds your hand-picked related products list, and the code reads it before it falls back to collections.

The native "You may also like" block is Shopify's own recommendation section. It is the one you hide in Step 3, because you are replacing what feeds it, not the idea of a related products row.


---

---
title: Remove the Default Variant Selection in Shopify
description: Make Shopify shoppers actively choose a variant instead of pre-selecting the first one, so the wrong option is not bought by accident.
---

## The problem

A merchant named Hervé asked about this on the Shopify Community. He runs the Horizon theme.

His product pages had a small but annoying habit. The moment a shopper landed on a product, Shopify pre-picked the first variant.

A variant is one buyable version of a product. Think of a shirt in Black, size S. Each colour and size combination is a separate variant.

Because the first variant was already active, its photo jumped to the front of the gallery. The gallery is the strip of product images at the top of the page.

So instead of the clean main cover photo, shoppers saw a colour swatch first. In Hervé's case, a black square.

What he wanted was simple:

- A shopper arrives and sees the main cover photo first, then the rest in order.
- No colour or size is chosen yet.
- The shopper picks a colour and size, and only then does the variant photo appear.

I reproduced this on a test store on the Horizon theme. It behaved exactly as he described.

![On arrival Horizon shows the first colour swatch photo instead of the main cover, a shopify no variant selected by default problem](/images/blog/shopify-remove-default-variant-selection/01-before-color-photo-leads.png)

On my test product, the first image was a black variant swatch labelled BLACK. My real cover photo, labelled MAIN COVER, sat second. That is the wrong order for most stores.

This is the core of the "shopify remove default variant selection" request. People want the page to start neutral.

## Why it happens

This is Horizon's built-in behaviour. There is no button in the theme editor to turn it off.

Here is the mechanism the quick forum answers skip.

Horizon builds the gallery in a snippet file. A snippet is a small reusable chunk of theme code written in Liquid, Shopify's templating language.

The file is `snippets/product-media-gallery-content.liquid`. Near the top it decides which variant photo to feature.

The line reads like this:

```liquid
assign selected_variant_media = selected_product.selected_or_first_available_variant.featured_media
```

Look at the part `selected_or_first_available_variant`. It means "the variant the shopper chose, or, if none is chosen, the first available one."

On page load nothing has been chosen. So the theme falls back to the first available variant.

It then grabs that variant's featured image and slides it to the front of the gallery. That is why a colour swatch leads instead of your cover shot.

The variant picker boxes are a separate thing. They show a default label because Shopify always keeps one variant active for price and cart. But the visible symptom, the wrong lead photo, comes from that one Liquid line.

Fix that line and the gallery starts neutral. That is the whole trick.

## Before you start: duplicate your theme

The variant picker is wired into price, image, stock, and Add to cart. A careless edit on a live theme can break a real page.

So always make a backup copy first. It takes ten seconds and saves a bad afternoon.

- Go to Online Store, then Themes.
- On your live theme, open the "..." menu and choose Duplicate. This is your safety copy. If anything goes wrong, you republish the copy.
- Open the "..." menu again and choose Edit code.

![Duplicate the theme as a backup, then choose Edit code from the same menu](/images/blog/shopify-remove-default-variant-selection/02-duplicate-edit-code.png)

Edit code opens the theme's file editor. This is where the one-word change happens.

## The fix: change one word

You are editing a single word in a single file. Nothing else.

1. In the file search box on the left, open `snippets/product-media-gallery-content.liquid`.
2. Find the line that assigns `selected_variant_media`.
3. Change `selected_or_first_available_variant` to `selected_variant`.
4. Save.

Here is the exact before and after:

```liquid
Find:
assign selected_variant_media = selected_product.selected_or_first_available_variant.featured_media

Replace:
assign selected_variant_media = selected_product.selected_variant.featured_media
```

![The one word change in the Horizon gallery snippet, from selected_or_first_available_variant to selected_variant](/images/blog/shopify-remove-default-variant-selection/03-one-word-code-change.png)

Why this works. `selected_variant` is empty until a shopper actually clicks a choice. So on load there is no variant photo to promote. The gallery keeps your normal photo order, main cover first.

I tested this on the Horizon store. After the change, the main cover photo led the gallery on arrival.

![After the fix, your main cover photo leads the gallery on arrival with shopify horizon no default variant behaviour](/images/blog/shopify-remove-default-variant-selection/04-after-main-cover-leads.png)

The old colour-first behaviour still works the moment it should. When I picked Blue, the blue photo jumped straight to the front, exactly as before.

![Pick a colour and that variant photo appears at the front of the gallery](/images/blog/shopify-remove-default-variant-selection/05-pick-colour-photo-appears.png)

So the buying experience is intact. Only the arrival state changed.

A few things worth knowing:

- This applies to every product on that theme at once. One edit, whole catalogue.
- Price, stock, and Add to cart are untouched. Nothing about checkout changes.
- The Color and Size boxes still show a default label. That is expected, and the next section explains why.

## Why the picker boxes still show a label

This surprises people, so it is worth being clear.

After the fix, the gallery starts neutral. But the Color box might still read "Black" and the Size box might still read "S".

That is not a bug. Shopify always keeps one variant active in the background. It needs an active variant to show a price and to know what goes in the cart.

So the dropdowns cannot be truly blank on a standard Shopify theme. The active variant has to point at something.

Our change only controls which photo leads the gallery. That is the part shoppers actually look at, so for most stores it solves the real complaint.

If you genuinely need the boxes to show nothing at all, keep reading. That needs a different tool.

## An alternative: a product options app

The code fix handles the gallery, which is what most merchants mean by "shopify deselect default variant."

But say you want more. You want the picker itself to start empty, with no colour and no size highlighted, and Add to cart blocked until the shopper chooses.

Shopify will not do that natively, because of the active-variant rule above.

For that, a third-party product options app is the cleaner route. Apps in this category let you present options as a fresh, unselected form. The shopper must pick before the product is buyable.

This is the better choice when:

- You sell made-to-order or personalised items and a wrong default is risky.
- You have many options and want to force a deliberate choice on each one.
- You are not comfortable editing theme code at all.

The trade-off is a monthly app cost and one more app in your stack. For a simple gallery fix, the one-word edit is lighter and free. For a strict, no-default checkout flow, the app earns its keep.

## Can you have no variant selected by default in Shopify?

Yes and no, and the distinction matters.

You can make the page look like nothing is selected. The gallery leads with the main photo, which is the fix above.

You cannot make a standard theme hold a truly empty variant state. Shopify keeps one variant active so it can price the product and fill the cart.

So "shopify no variant selected by default" is really two goals. The visual one is a free code edit. The strict one, an empty picker that blocks the cart, needs an options app.

Decide which you actually need before you start. Most merchants only want the visual one.

## How do I force a variant choice on Shopify?

If your real worry is people buying the wrong option, "shopify force variant choice" is the goal, not just the photo.

You have two honest paths.

The code path. The gallery fix removes the misleading first photo, so shoppers are less likely to assume the default is fine. It nudges, but it does not block.

The app path. A product options app can require a selection and disable Add to cart until the shopper picks. That is a hard block, not a nudge.

If a wrong purchase costs you a refund and a support ticket, the hard block is worth it. If it is only a cosmetic annoyance, the code fix is enough.

## Does this work on Dawn or only on Horizon?

This exact edit is written for Horizon, because it targets a Horizon file and a Horizon line.

Dawn and other themes have the same underlying idea but different file names and code. The concept still applies. You look for where the theme decides the featured variant media, and you stop it from falling back to the first available variant on load.

On Horizon the file is `snippets/product-media-gallery-content.liquid`. On another theme you would search the code for `selected_or_first_available_variant` and review each result before changing it.

Always duplicate the theme first, whatever theme you run. The variant logic is delicate on every theme.

## How do I undo the change if something looks off?

This is the reassuring part. You made a backup, so recovery is easy.

If the gallery misbehaves, or a product looks wrong, you have two quick options.

- Reopen `snippets/product-media-gallery-content.liquid` and change the word back to `selected_or_first_available_variant`. Save. You are back to stock behaviour.
- Or publish the duplicate theme you made before editing. That restores everything at once.

Because the edit is one word in one file, rolling it back is just as fast as making it.

## If it did not work

A few things trip people up. Run through these.

- You edited the wrong theme. Make sure Edit code opened your live theme, or the exact theme you preview. An edit on an unpublished theme will not show on the live store.
- The change did not save. The editor must show a saved state, not an unsaved dot. Save again.
- You are looking at a cached page. Hard refresh the product page, or open it in a private window.
- Your theme is not Horizon. If the file `snippets/product-media-gallery-content.liquid` does not exist, you are on a different theme and need its equivalent file.
- The picker still shows a default label. That is expected. Re-read the section above. The label is Shopify's active variant, not a failed fix.

If the gallery still leads with a variant photo after all that, double check you changed the `selected_variant_media` line specifically. There can be other mentions of `selected_or_first_available_variant` in the file that should stay as they are.

## Definitions people confuse

A few terms get mixed up in these threads. Here is plain language for each.

**Variant.** One buyable version of a product, like Black size S. A product with three colours and three sizes has nine variants.

**Variant picker.** The set of Color and Size boxes on the product page. This is where the shopper chooses.

**Gallery.** The product photos at the top of the page. The lead photo is the first one shown.

**Featured media.** The single image Shopify attaches to a variant. When that variant is active, its featured media is promoted in the gallery.

**Active variant.** The variant Shopify currently treats as chosen, used for price and cart. A standard theme always has one.

**Selected variant.** The variant the shopper actually clicked. This can be empty on load, which is what our fix relies on.

The whole confusion in these threads comes from mixing "active variant" with "selected variant." Shopify needs an active variant at all times. It does not need a selected one. The fix simply tells the gallery to follow the selected variant, not the active fallback.

That single distinction is why one word solves the problem.


---

---
title: "Remove the Horizontal Scrollbar on a Shopify Page (CSS Fix)"
description: A Shopify page that scrolls sideways has one element wider than the screen. Remove the horizontal scrollbar on one page with a Custom Liquid section and six lines of CSS. Tested on Horizon.
---

## The problem

A merchant on the Horizon theme asked about this on the Shopify Community. One page on their store, a landing page for custom bags, had a horizontal scrollbar along the bottom of the browser window. The rest of the store was fine.

The page also moved sideways. Drag the scrollbar, or swipe left on a trackpad, and the whole layout slid off to one side with empty space behind it. On a landing page built to win wholesale enquiries, that looks broken.

They had already tried one fix from the thread and it had not worked. So I rebuilt the same page on a Horizon test store, reproduced the scrollbar, and found a fix that removes it on that one page without touching the rest of the theme.

![A Horizon page with a carousel running off the right edge and a horizontal scrollbar at the bottom of the window](/images/blog/shopify-remove-horizontal-scrollbar/01-before-page-scrolls-sideways.png)

## Why a Shopify page scrolls sideways

A browser only shows a horizontal scrollbar when something on the page is wider than the window. It is never the page as a whole. It is one element that sticks out past the right edge, and the browser makes room for it.

On the merchant's page, that element was a carousel. It showed a row of product photos, and the row was much longer than the screen. The carousel was meant to hide the photos that did not fit. It did not, so the full row stretched the page to several times the width of the window.

On my test store the page measured 3,820 pixels wide inside a window that was 1,430 pixels wide. That is why the scrollbar thumb, the grey handle you drag, was so short on the merchant's screenshot. A short thumb means the page is far wider than the screen.

The usual causes on Shopify are:

- **A carousel or slider row** that is not clipped at the edge of its box. Sections made with Shopify's section generator in the theme editor often build their own carousels, and this is where the merchant's came from.
- **A "full width" section** that uses the width of the whole browser window. That width includes the vertical scrollbar, so the section ends up about 15 pixels too wide and adds a small sideways scroll.
- **A fixed width in pixels**, such as an image, table or video set to 1,600 pixels wide, which is fine on a big monitor and too wide on a laptop.
- **An embed** from another site, such as a map, a booking widget or a social feed, that sets its own width.

### Why you might not see it on your own computer

Macs hide scrollbars until you scroll, when a trackpad is the only pointer. A merchant working on a MacBook can look at the page all day and never see the bar. Their customers on Windows, or on a Mac with a mouse plugged in, see it at once.

On a phone there is no bar at all. The page wobbles instead: a thumb swipe moves it sideways a little, and the edge of the screen shows a strip of empty space. It is the same problem with the same cause.

## Find the template your page uses

Horizon, like every recent Shopify theme, builds each page from a **template**. A template is a saved layout that decides which sections show up on a page, and in what order. Most pages use the "Default page" template. A page with its own design, like a landing page, usually has a template of its own.

This matters because the fix goes on the template, so it only affects pages that use that template. If you add it to the wrong one, nothing changes on the page you care about.

To check which one your page uses, go to **Online Store** > **Pages** in your Shopify admin and open the page. The **Theme template** box on the right of the page editor shows its name. Write it down before you start.

## Remove the horizontal scrollbar on one page

These are the same steps I posted in reply to the merchant. You add a **Custom Liquid** section to the page's template. A Custom Liquid section is a box in the theme editor where you can paste your own code, and it only appears on the template you add it to.

1. Go to **Online Store** > **Themes**.
2. Click **Edit theme** on your current theme.

![The Shopify Themes page with the Edit theme button highlighted](/images/blog/shopify-remove-horizontal-scrollbar/03-themes-edit-theme.png)

3. Click **Home page** in the bar at the top of the editor. This opens the list of page types.
4. Click **Pages**.

![The theme editor page picker open, with Home page and Pages highlighted](/images/blog/shopify-remove-horizontal-scrollbar/04-template-picker-pages.png)

5. Click the template your page uses, the one you wrote down earlier. The editor preview switches to a page that uses it.

![The list of page templates in the Horizon theme editor, with the custom template highlighted](/images/blog/shopify-remove-horizontal-scrollbar/05-choose-page-template.png)

6. Click **Add section** in the left sidebar, under Template.

![The Horizon theme editor sidebar with Add section highlighted](/images/blog/shopify-remove-horizontal-scrollbar/06-add-section.png)

7. Click **Custom Liquid**. You can type "Custom Liquid" in the search box to find it faster.

![The Add section panel with the Custom Liquid section highlighted](/images/blog/shopify-remove-horizontal-scrollbar/07-custom-liquid-section.png)

8. Paste this code into the **Liquid** box of the new section:

```html
<style>
  [class*="ai-carousel-container"] {
    display: block;
    max-width: 100%;
    overflow: hidden;
  }
  html, body {
    overflow-x: clip;
  }
</style>
```

![The Custom Liquid section settings with the CSS pasted into the Liquid box](/images/blog/shopify-remove-horizontal-scrollbar/08-paste-css-liquid-box.png)

9. Click **Save** in the top right corner.

![The theme editor Save button highlighted](/images/blog/shopify-remove-horizontal-scrollbar/09-save.png)

Open the page on your store and reload it. On my test store the page went from 3,820 pixels wide back to 1,430, the exact width of the window, and the scrollbar at the bottom was gone. Scrolling sideways did nothing.

![The same Horizon page with the carousel contained and no horizontal scrollbar](/images/blog/shopify-remove-horizontal-scrollbar/02-after-no-horizontal-scrollbar.png)

The Custom Liquid section is empty on the page itself. It adds no text or spacing, so it does not matter where it sits in the section list.

## What the CSS does

The code has two parts, and each one does a separate job. CSS is the code that controls how things on a web page look and where they sit.

The first rule targets the carousel. The part in square brackets is a **selector**, the bit of code that points at one element on the page. This one matches any element whose name contains "ai-carousel-container", which is the name the theme editor's section generator gave the merchant's carousel. The rule tells that box to stay inside the page width and to hide anything that spills out of it. The photos that do not fit are still there. They sit out of view, the way the carousel intended.

The second rule is a safety net for the whole page. It tells the browser to cut off anything that runs past the right edge of the page, whatever it is, rather than make room for it with a scrollbar. If your wide element is not a generated carousel, this line is the one that removes the scrollbar.

The first rule matters for another reason: it fixes the carousel itself rather than only hiding the damage. The second rule on its own removes the scrollbar, but the carousel would still be drawn past the edge of the screen.

## Why "overflow-x: clip" and not "overflow-x: hidden"

Most tutorials for removing a horizontal scrollbar with CSS use `overflow-x: hidden`. It is the older rule, and it works on the scrollbar. On a Shopify theme it has a side effect.

Horizon, like most current themes, has a **sticky header**, a header that stays pinned to the top of the screen as you scroll down. I tested both rules in Chrome on a page with a sticky header. With `overflow-x: hidden` on both parts of the page, the header stopped sticking and scrolled away with the page, 600 pixels up and out of view. With `overflow-x: clip` the scrollbar went away and the header stayed pinned at the top.

So use `clip`. It removes the scrollbar and leaves the sticky header alone.

## Remove the horizontal scrollbar on every page instead

If the scrollbar shows up on several pages, the cause is usually a section you reused on each of them, such as the same carousel or a full width banner.

You can add the same Custom Liquid section to each template that has the problem. Repeat the steps above and pick a different template in step 5. Product pages, collection pages and the home page each have their own templates in that same list.

If the scrollbar is on every page of the store, look at the parts that appear on every page: the header, the announcement bar and the footer. A wide menu, a long line of text in the announcement bar, or an embed in the footer is the likely cause.

## Find the element that is too wide

The fix above removes the scrollbar without needing to know what caused it. If you want to know which element is sticking out, your browser can list it for you. This works in Chrome, Edge and Firefox on a computer.

1. Open the page on your store.
2. Right click anywhere on the page and click **Inspect**. A panel of developer tools opens.
3. Click the **Console** tab in that panel. The console is a box where you can type short commands for the browser to run on the page.
4. Paste this line and press Enter:

```js
[...document.querySelectorAll('body *')].filter(el => el.getBoundingClientRect().right > document.documentElement.clientWidth + 1).map(el => el.tagName + '.' + [...el.classList].join('.'))
```

The browser lists every element whose right edge is past the edge of the window. On my test page, the list started with the carousel's slides. The first few names in the list are the ones to look at. They tell you which section is causing it, even when the names look technical.

Chrome may ask you to type "allow pasting" before it accepts pasted code in the console. That is a safety check for a line you copied from somewhere else, and it is fine to allow for this one.

## If the scrollbar is still there

**The code is on the wrong template.** This is the most likely reason. The merchant in the thread had first tried a similar fix and saw no change. The editor opens on the home page, and picking **Pages** alone does not take you to a custom page's template. Check the page's **Theme template** under **Online Store** > **Pages**, then check the editor shows that same template in step 5.

**The section was not saved.** After pasting, click an empty part of the sidebar and then **Save**. If the Save button stays grey, the editor has not registered the change yet. Click into the Liquid box again, add a space and delete it, and Save should turn dark.

**You are looking at a cached page.** Reload the page with Ctrl+Shift+R on Windows or Cmd+Shift+R on a Mac, or open it in a private window.

**The browser is old.** `overflow-x: clip` works in every current browser. Safari only added it in version 16, in 2022, so an older iPhone that has not been updated will ignore that line. The first rule in the code still clips a generated carousel on those phones.

**You are editing a different theme.** The Themes page lists your live theme at the top and drafts below it. Click **Edit theme** on the one marked as your current theme.

## A carousel's own scrollbar is a different thing

Some sections are meant to scroll sideways. A row of product cards on mobile, a "shop the look" strip, or a collection slider often has its own small scrollbar or swipe area under the row. That scroll belongs to the section, and the rest of the page stays still.

The problem in this article is the scrollbar at the very bottom of the browser window, which moves the whole page. You can tell them apart with one test: scroll sideways and watch the header. If the header and logo move, the page is too wide. If only the row of cards moves, the section is working as designed, and you can leave it alone.

## Sections made with the theme editor's generator

The merchant's carousel came from Shopify's section generator in the theme editor, where you describe a section and Shopify writes it for you. These sections are fast to make and often look right on the screen they were made on. The merchant usually has not read the code they produce, so a missing line, like the one that clips a carousel at its edge, only shows up later on a different screen.

It is worth opening any generated section on a phone and on a laptop with a mouse before you publish it. If it adds a sideways scroll, the fix in this article works for it. If your carousel has a different name from the merchant's, the second rule in the code still removes the scrollbar.


---

---
title: "Remove the Variant ID From Your Shopify Product URL"
description: Your product link keeps turning into /products/name?variant=43176780890281, and it happens before the customer touches anything. One setting in your theme stops it, plus a short snippet for the links that already carry the ID.
---

## The problem

You open a product page and the address bar reads something like this.

```
/products/signature-chocolate-mousse-etoile-eggless?variant=43176780890281
```

The customer has not clicked a size. The page loaded and the number appeared. Copy that link into an email, a WhatsApp message or an Instagram bio and the long number travels with it.

That number is the ID of one variant of the product. Shopify gives every size, colour and style its own ID, and the `?variant=` part tells the page which one to show.

The link still works. It just looks untidy, and most merchants who ask about it want the clean version to share.

## Where it comes from

Shopify does not add it. Your theme does.

When a customer changes a size or colour, older themes call a browser function called `history.replaceState` and rewrite the address bar in place. No page reload, no flicker, just a longer link. Whether the theme does that at all is controlled by one setting called `enableHistoryState`.

There is a second half to the story, and it is the reason the ID appears before the customer clicks anything.

Most of these themes run one extra line right after the page loads.

```js
// Auto-select first available variant on page load. Otherwise the product looks sold out.
$('.single-option-selector:eq(0)').val("6 inches").trigger('change');
```

That line picks the first size for the customer so the button does not read Sold out. Picking a size counts as a change, the change triggers the rewrite, and the ID lands in the address bar on load.

So two things have to be true: the setting is on, and the theme auto-selects a size. Both are true on a lot of older themes.

## Which themes do this

The `enableHistoryState` spelling belongs to the older Shopify variant script, `option_selection.js`. You will find it in Debut, Venture, Brooklyn, Supply, Simple, and in a great many paid themes built in that era, including bakery, restaurant and single-product themes still selling today.

Newer themes do the same job with different wording. There is a section further down for Dawn, Craft, Studio, Refresh and the rest.

To tell which family you are in, search your theme for `enableHistoryState`. If you get hits, you are in the older family.

## Find the setting, and skip the wrong hits

Go to **Online Store > Themes**, open the **...** menu on your live theme, and choose **Edit code**. Duplicate the theme first if you want a backup.

In the code editor, click the magnifier in the far left sidebar. That is a search across every file in the theme, not just the open one. Type `enableHistoryState`.

![Search enableHistoryState in the Shopify theme code editor](/images/blog/shopify-remove-variant-id-from-url/01-search-enablehistorystate-theme-code.png)

You will usually get more than one result, and this is where people get stuck.

- **Hits inside a `.js` file** are the script that reads the setting. There is often a handful of them in `theme.js`. Changing those does nothing useful and can break your product page.
- **The hit inside a section or template file** is the setting itself. That is the one to change. It is the line that reads `enableHistoryState: true`, sitting inside a block that starts `new Shopify.OptionSelectors`.

Which file that is depends on the theme. Common names are `sections/product-template.liquid`, `templates/product.liquid`, or a custom one such as `sections/product-template-custom.liquid`.

If you are not sure which of several product files your live product pages actually use, open a product page on your store, right click, choose **View page source** and search the page for `shopify-section-`. The one wrapping the product block names the section file.

## Change it

Open the file, find the line, and change the word.

![The enableHistoryState true line in the product section file](/images/blog/shopify-remove-variant-id-from-url/02-enablehistorystate-true-product-section.png)

```js
new Shopify.OptionSelectors('product-selectors', {
  product: {{ product | json }},
  onVariantSelected: selectCallback,
  enableHistoryState: false
});
```

Save.

![enableHistoryState changed to false and saved](/images/blog/shopify-remove-variant-id-from-url/03-enablehistorystate-false-saved.png)

If the search found the same line in more than one product file, change every one of them. A theme with a quick view, a featured product section and a main product page can carry three copies.

## Check it worked

Open a product page in a fresh tab. Before the change the ID arrives on load.

![Variant ID appears in the Shopify product URL on page load](/images/blog/shopify-remove-variant-id-from-url/04-variant-id-in-product-url.png)

After the change the link stays as you typed it.

![Clean Shopify product URL after the fix](/images/blog/shopify-remove-variant-id-from-url/05-clean-shopify-product-url.png)

I tested this on a dev store set up the same way as the merchant who asked: one product, three sizes, the same older variant script. With the setting on, the ID appeared with nothing clicked. With it off, the link stayed clean through every size change.

## What does not break

This is the part worth checking before you touch anything, because the usual warning is that removing variant IDs from URLs causes problems.

Switching the setting off changes one thing only: whether the address bar gets rewritten. The variant selection itself runs through a hidden `<select name="id">` field on the add to cart form, and that field is still updated exactly as before.

Measured on the same dev store, with the setting off:

- Choosing the 8 inch size changed the displayed price from \$46.00 to \$66.00.
- The hidden variant field changed to the 8 inch variant ID.
- The link stayed clean.

![Choosing a variant still updates the price with a clean URL](/images/blog/shopify-remove-variant-id-from-url/06-variant-still-changes-price.png)

Then add to cart:

![Cart shows the correct variant after the fix](/images/blog/shopify-remove-variant-id-from-url/07-cart-shows-correct-variant.png)

The cart line reads **Size: 8 inches** at \$66.00. The customer gets what they picked. Variant photos, price and availability all still switch.

## Links that already carry the ID

Turning the setting off stops new ones being written. It does not clean a link that already exists.

A customer who bookmarked the page last month still has the long version. So does Google, if it crawled that URL, and so does any ad or email you sent.

If you want those to land on the clean link too, paste this into the same file, just above the `{% schema %}` tag at the bottom.

```html
<script>
  if (window.history.replaceState && location.search.indexOf('variant=') > -1) {
    var u = new URL(location.href);
    u.searchParams.delete('variant');
    history.replaceState({}, document.title, u.pathname + u.search + u.hash);
  }
</script>
```

It runs once on load, removes the `variant` parameter and leaves everything else in the link alone, so UTM tags from your ads survive.

![An old link carrying a variant ID now opens clean](/images/blog/shopify-remove-variant-id-from-url/08-old-variant-link-opens-clean.png)

One thing to understand before you add it. The page still opens on whichever variant the theme selects. The script tidies the address bar; it does not change what is shown.

## Dawn, Craft, Studio and the newer themes

Dawn and the themes built on it do not use `enableHistoryState`. Searching for it returns nothing, which is why this fix looks missing on a modern theme.

The equivalent lives in `sections/main-product.liquid`, near the top, on the opening `<product-info>` tag.

```liquid
<product-info
  data-update-url="true"
```

Change `true` to `false` and save.

The script reads that attribute immediately before it rewrites the address bar. I checked this on a Dawn store: with the attribute left at `true`, choosing a size wrote `?variant=` into the link. With it set to `false`, choosing a different size still moved the price to \$86.00 and still selected the size, and the link did not change.

One side effect worth knowing. Dawn's **share button**, the little link icon under the price, deliberately keeps building the full link with the variant ID in it, whatever this attribute is set to. That is intentional, so a customer who uses the share button still sends a link to the exact variant they were looking at. If you want that gone as well you have to edit the share button snippet separately.

## Does the variant ID hurt your SEO?

Generally no, and it is worth saying clearly because this is the reason a lot of merchants go looking for the setting.

Shopify prints a canonical tag on every product page, and it points at the clean product URL even when the address bar shows a variant ID. That tag is the signal search engines use to decide which version of a page is the real one. So the `?variant=` version was never being counted as a separate, duplicate page.

You can check your own store in a few seconds. Open a product page with a variant ID in the link, view the page source, and search for `canonical`. The link in it should have no `?variant=` on the end.

What the ID does affect is analytics and link sharing. Long links look less trustworthy in a message, get truncated in some apps, and split your page views across several URLs in tools that do not normalise query strings.

## What you give up

A link with a variant ID is a deep link: send someone `?variant=` plus the ID of the 10 inch cake and they land on the 10 inch cake, already selected. Turning the setting off means your customers stop generating those links by copying the address bar.

Before you decide that matters, check whether yours actually work.

On many older themes they do not, and the reason is that auto-select line from earlier. It runs after the variant script has read the incoming link, so it overrides whatever the link asked for. On the store that prompted this article, a link carrying the 8 inch ID opened on 6 inches. The deep link had not worked for a long time, and the merchant had not noticed, because nothing visibly broke.

Test yours before and after. Copy a link with a variant ID, open it in a private window, and see which option is selected when the page settles.

If deep links do work on your theme and you need them, you can keep them and still get clean links most of the time: leave `enableHistoryState` alone and remove or comment out the auto-select line instead. The address bar then stays clean on load and only picks up the ID once the customer actually chooses something.

## If the ID keeps coming back

Work down this list.

- **You changed the wrong file.** More than one product template can exist in a theme. Confirm the section name from the page source, as described above.
- **You changed a hit inside a `.js` file.** Those are the script, not the setting.
- **Another product file has its own copy.** Quick view and featured product sections often carry a second `enableHistoryState: true`.
- **You are on a newer theme.** Use `data-update-url` in `sections/main-product.liquid` instead.
- **The link is coming from a collection page.** Some themes build product card links with the variant already attached. That is a separate edit in the file that builds the product card, not this one.
- **An app is writing it.** Bundle, upsell and variant swatch apps sometimes manage the address bar themselves. Test with the app's embed turned off.
- **Browser cache.** Hard refresh, or test in a private window.

While you are in the variant picker area of the theme, two related fixes worth knowing: [hiding variant combinations that do not exist](/blog/shopify-hide-unavailable-variants) and [syncing a thumbnail click back to the variant selector](/blog/shopify-craft-theme-variant-sync).

## What to do

- Search your theme for `enableHistoryState` in the code editor.
- Change the hit in your product section file, not the ones in a `.js` file, from `true` to `false`.
- On Dawn and newer themes, set `data-update-url="false"` in `sections/main-product.liquid` instead.
- Add the small script above the `{% schema %}` tag if you also want old links cleaned on arrival.
- Check the cart still receives the right variant. It will, but check.
- Leave your canonical tags alone. They were already pointing search engines at the clean URL.


---

---
title: Show the Amount Saved on Shopify Sale Badges
description: Swap the plain "Sale" badge for the actual money saved in Shopify, so shoppers see "Save \$20" instead of a generic label.
---

## The problem

A merchant asked about this on the Shopify Community. Their store runs the Nordic theme. On the collection page, every discounted product shows a small badge that just says "Sale".

They wanted the badge to say the real number instead. Something like "Save \$20". Not a vague word, the exact amount off.

This is a good instinct. "Sale" tells a shopper nothing. "Save \$20" gives them a reason to click.

I reproduced it on a test store on the Nordic (Dawn) theme. Out of the box, the badge shows only "Sale" on every discounted card.

![Nordic collection page where the sale badge only reads Sale on each product card](/images/blog/shopify-sale-badge-amount-saved/01-nordic-sale-badge-before.png)

Here is how to change that badge so it shows the money saved. It is a small code edit, and I will also show a no-code way to get the percentage instead.

## Why it happens

Nordic is built on Dawn. Dawn is Shopify's free reference theme, and many paid themes (Nordic included) are built on top of it. So the badge works the same way across all of them.

A "badge" here is the little label pinned to the corner of a product image. On Dawn-based themes, the sale badge lives in one snippet file.

A "snippet" is a small reusable chunk of theme code. The product card snippet is used everywhere a product shows in a grid, so editing it once updates every collection page at the same time.

Inside that snippet, the badge text is not a real sentence. It is a translation key:

```liquid
{{ 'products.product.on_sale' | t }}
```

The `| t` filter means "translate". It looks up the phrase `products.product.on_sale` in the theme's language file and prints whatever that phrase is set to. In English, that phrase is the single word "Sale".

So the theme never calculates a number. It just prints a fixed word. To show the amount saved, we replace that fixed word with a small calculation.

The calculation uses two numbers Shopify already stores on every product:

- The "price", which is what the shopper pays now.
- The "compare-at price", which is the higher original price you struck through.

The compare-at price is the field you fill in when you put a product on sale. It is what creates the strikethrough and the "Sale" badge in the first place. If it is empty, there is no discount and no badge.

Subtract one from the other and you get the amount saved. That is the whole trick.

## Before you start

Two quick checks so this goes smoothly.

- Your discounted products need a compare-at price set. Open a product, and under Pricing you should see both a price and a higher compare-at price. The badge only appears when the compare-at price is higher than the price.
- Duplicate your theme first if you want a safety net. Online Store > Themes > the three dots on your theme > Duplicate. Then edit the copy or just keep it as a backup.

This edit changes one line. It is easy to undo, but a backup never hurts.

## The fix

This is the core answer. It works on Nordic and on any Dawn-based theme.

**Step 1. Open the code editor.**

Go to Online Store > Themes. Find your theme's row. Click the three dots (...) on the right, then click Edit code.

![Shopify admin Online Store Themes with the three dots menu open and Edit code highlighted on the Nordic theme row](/images/blog/shopify-sale-badge-amount-saved/02-nordic-edit-code.png)

**Step 2. Find the badge line.**

In the code editor, open Search. It is the magnifying glass icon on the left sidebar. Or press Ctrl + Shift + F on Windows, or Cmd + Shift + F on a Mac. This searches across every file in the theme at once.

Search for this exact text:

```
on_sale' | t
```

**Step 3. Land on the right line.**

The search jumps to the sale badge line. On Nordic it sits inside `snippets/card-product.liquid`. The line looks like this:

```liquid
{{ 'products.product.on_sale' | t }}
```

You may see it wrapped in extra markup. On my test store the full block read like this, with the badge sitting inside a discount check:

```liquid
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
  <span
    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
    class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
  >
    {{- 'products.product.on_sale' | t -}}
  </span>
```

The only part you touch is the `on_sale' | t` line in the middle.

![Shopify code editor searching for on_sale with the badge line highlighted in card-product.liquid on the Nordic theme](/images/blog/shopify-sale-badge-amount-saved/03-search-replace-on-sale-badge.png)

**Step 4. Replace the line.**

Change that one line to this:

```liquid
Save {{ card_product.compare_at_price | minus: card_product.price | money }}
```

Here is what each piece does, in plain words:

- `card_product.compare_at_price` is the original higher price.
- `| minus: card_product.price` subtracts the current price from it. That leaves the amount saved.
- `| money` formats the number as currency, so it prints as "\$20.00" and not "20.0".
- The word `Save` in front is just text. Change it to anything you like.

**Step 5. Save.**

Click Save in the top right. Then open a collection page on your live store and refresh.

The badge now reads the real amount. On my test store it changed from "Sale" to the exact money off on every discounted card.

![Nordic collection page after the edit, where each badge now shows the amount saved instead of the word Sale](/images/blog/shopify-sale-badge-amount-saved/04-nordic-badge-amount-saved-after.png)

I tested this on the Nordic theme end to end. The badge went from a flat "Sale" to "Save" followed by the shopper's saving, in the store's own currency, on both discounted and non-discounted products (the badge only shows where there is a real discount).

## A note the merchant hit

The merchant who asked came back with a small wrinkle, and it is worth calling out because you might hit it too.

Their theme's line used a slightly different variable name than mine. Where my store used `card_product`, theirs used `product_card_product`. The rest was identical.

That is normal. Different theme versions name that variable differently. The rule is simple: whatever word sits before `.compare_at_price` on your line, use that same word in the replacement.

So if your file shows `product` instead of `card_product`, keep `product`:

```liquid
Save {{ product.compare_at_price | minus: product.price | money }}
```

Match the name the theme already uses. Once they did that, it worked. Do not paste my variable name blindly if yours differs.

## An alternative: show the percentage off with no code

Some stores prefer "20% off" over "Save \$20". A percentage reads well on cheaper items where the dollar figure is small.

Nordic and other Dawn themes can build this with the same two prices. Instead of subtracting, you turn the saving into a percentage:

```liquid
{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% off
```

That divides the saving by the original price and multiplies by 100. A product marked down from \$100 to \$80 shows "20% off".

If you are not comfortable editing code at all, check your theme settings first. Online Store > Themes > Customize, then look under Theme settings for a badge or "sale" option. Some Dawn-based themes ship a built-in toggle between "Sale" text and a percentage. If yours has it, flip it there and skip the code entirely.

There is no built-in setting for the exact dollar amount, though. For "Save \$20" you need the one-line edit above.

## How do I show the amount saved in Shopify on both the badge and the product page?

The steps above change the collection card badge. The product page badge is usually the same snippet or a very close sibling.

Search the code editor for `on_sale' | t` again. If more than one result appears, you will often see the same line in the main product template or a price snippet. Apply the same replacement there.

Watch the variable name each time. On the product page it is frequently just `product`, so your line becomes `Save {{ product.compare_at_price | minus: product.price | money }}`.

Change each result you want updated, save, and check both the collection page and a product page.

## How do I show the Shopify sale badge money off without the trailing cents?

By default the `money` filter prints "\$20.00" with the ".00" on the end. Whole-dollar savings look cleaner without it.

Swap `money` for `money_without_trailing_zeros`:

```liquid
Save {{ card_product.compare_at_price | minus: card_product.price | money_without_trailing_zeros }}
```

Now a \$20 saving shows as "Save \$20" and a \$19.50 saving still shows the cents as "Save \$19.50". You get clean whole numbers where they exist and full precision where you need it.

## How do I change the Shopify discount badge amount wording?

The word "Save" is plain text in the line. You control it completely.

Want "You save \$20"? Use this:

```liquid
You save {{ card_product.compare_at_price | minus: card_product.price | money }}
```

Want it after the number, like "\$20 off"? Put the text on the other side:

```liquid
{{ card_product.compare_at_price | minus: card_product.price | money }} off
```

Keep it short. The badge is a small box, so long phrases wrap onto two lines and look messy. One or two words plus the number is the sweet spot.

## Will this Shopify badge save amount edit slow my store or hurt SEO?

No. The theme already loads both prices to draw the strikethrough. You are reusing numbers that are on the page anyway, so there is no extra request and no measurable speed cost.

It does not affect SEO either. The badge is a small visual label, not a heading or a product title. Search engines read your product name, description, and price, none of which this touches.

The one thing to watch is theme updates. This is a code edit, so if you later update your theme to a new version, the update can overwrite the file. Note the change somewhere, or keep it in a duplicated theme, and reapply it after an update.

## If it did not work

A few common reasons, and the fix for each.

- **The badge disappeared or shows a broken value.** You probably used the wrong variable name. Re-check the word before `.compare_at_price` in your file and match it exactly. It is `card_product` on some themes and `product` on others.
- **The badge still says "Sale".** You may have edited the wrong result. Search `on_sale' | t` again and make sure the line you changed is the collection card one, then hard refresh the page (Ctrl + Shift + R).
- **No badge shows at all.** The product has no compare-at price, so there is no discount to display. Add a higher compare-at price under the product's Pricing section.
- **The number shows without a currency symbol.** You dropped the `| money` filter. It is what turns a bare number into "\$20.00". Add it back.
- **The saving looks wrong.** Confirm your compare-at price is the higher original price and the price is the lower sale price. If they are reversed, the math comes out negative.

## Definitions and distinctions people confuse

**Price vs compare-at price.** The price is what the customer pays. The compare-at price is the higher "was" price you strike through. The saving is compare-at price minus price. If the compare-at price is empty or lower, there is no sale and no badge.

**Sale badge vs discount code.** The badge is driven by the compare-at price on the product itself. It is not connected to discount codes or automatic discounts at checkout. Lowering the price with a code does not change the badge. To move the badge number, change the product's prices.

**Snippet vs section.** A section is a big building block of a page. A snippet is a small reusable piece pulled into sections. The product card is a snippet, which is why editing it once updates every collection grid, search result, and related-products row at the same time.

**Amount saved vs percentage off.** Amount saved is the dollar figure ("Save \$20"). Percentage off is the proportion ("20% off"). Use the dollar amount on higher-priced items where the number is impressive, and the percentage on cheaper items where the dollar figure is small. Both come from the same two prices.

**The `money` filter vs `money_without_trailing_zeros`.** Both format a number as currency in your store's currency. `money` always shows cents ("\$20.00"). `money_without_trailing_zeros` hides the cents when they are zero ("\$20") but keeps them when they matter ("\$19.50").

That is the whole change. One line, and your "Sale" badge finally tells shoppers what they actually save.


---

---
title: How to Show a Percentage Off Sale Badge in Shopify
description: Turning the Sale badge into "-33%" is four lines of Liquid, but the obvious place to put it is wrong on the product page. Here is the fix that follows the selected variant, tested on Fabric.
---

## The problem: "Sale" tells the shopper nothing

Your product cards say **Sale**. That is all they say.

A shopper scanning a collection cannot tell whether that is 5% off or 40% off, so the badge does no work. Every discount looks the same, and the deep discounts you actually want to move get no more attention than the token ones.

What you want is **-33%**.

A merchant asked how to do this on Fabric 4.1.1 and mentioned the obvious frustration: every tutorial they found was written for an older theme and edited files that no longer exist.

I installed Fabric on a development store and worked it out. The calculation is genuinely four lines. But the first place you will want to put it is wrong in two specific ways, and that is the part no tutorial mentions.

![Percentage badges on the collection page](/images/blog/shopify-sale-badge-percentage/01-percentage-badges-on-collection.jpeg)

## How the badge works today

Your theme decides a product is on sale with one comparison:

```liquid
{%- if product.compare_at_price > product.price -%}
```

If the compare-at price is higher than the price, it prints the word Sale. That is the whole mechanism.

So the percentage is not new data. Everything needed is already there:

```liquid
{%- assign badge_pct = product.compare_at_price
  | minus: product.price
  | times: 100
  | divided_by: product.compare_at_price -%}
-{{ badge_pct }}%
```

Compare-at minus price, times 100, divided by compare-at. `divided_by` on integers floors the result, which is what you want for a discount badge: it never overstates the saving.

**Duplicate your theme before editing.** Online Store > Themes > ... > Duplicate.

## The quick version: badges on product cards

On Fabric, product card badges live in `blocks/_product-card-gallery.liquid`.

Find the line that prints the badge text:

```liquid
{{ 'content.product_badge_sale' | t }}
```

Replace it with the calculation:

```liquid
{%- assign badge_pct = product.compare_at_price
  | minus: product.price
  | times: 100
  | divided_by: product.compare_at_price -%}
-{{ badge_pct }}%
```

![The badge code in _product-card-gallery.liquid](/images/blog/shopify-sale-badge-percentage/02-product-card-gallery-badge-code.png)

Save, and your collection pages show real percentages.

Then you look at a product page and the badge is not there at all.

## Why the quick version is not enough

Two separate problems, and both matter.

**Product cards are not the product page.** `_product-card-gallery.liquid` renders the small card in a grid. The product page uses a different snippet entirely, so editing the card does nothing there. This is the single most common reason people think the code did not work.

**`product.price` is the default variant, not the selected one.** This one is worse, because it fails with no error and shows wrong numbers.

`product.price` and `product.compare_at_price` resolve to whichever variant loads first. If your Small is 40% off and your Large is 10% off, the badge says 40% no matter which size the shopper picks. It does not update when they change variant, because it was never variant-aware.

A badge that confidently displays the wrong discount is worse than no badge. This is a refund conversation waiting to happen.

## The fix: put the badge in the price snippet

The right home is `snippets/price.liquid`, because that snippet already receives the **selected variant** and already re-renders when the shopper changes it. You get variant awareness for free instead of writing JavaScript.

### Edit 1: snippets/price.liquid

Find the line that assigns `show_compare_price`. After it, add:

```liquid
assign show_discount_badge = show_discount_badge | default: false
assign discount_pct = 0
if show_compare_price
  assign discount_pct = selected_variant.compare_at_price
    | minus: selected_variant.price
    | times: 100
    | divided_by: selected_variant.compare_at_price
endif
```

Two things worth noting.

`selected_variant` rather than `product`. That is the whole point of moving here.

`show_discount_badge | default: false` means the badge is **off unless a caller asks for it**. `price.liquid` is rendered from many places, including the cart and search results, and you do not want a badge appearing in all of them. Opt-in keeps the change contained.

Then, as the first thing inside `<div ref="priceContainer">`:

```liquid
{%- if show_discount_badge and show_compare_price -%}
  <span
    style="display:inline-block;background:#e2231a;color:#fff;font-size:.75em;
           font-weight:600;line-height:1;padding:.25em .5em;border-radius:999px;
           margin-inline-end:.4em;vertical-align:middle;"
  >-{{ discount_pct }}%</span>
{%- endif -%}
```

The `show_compare_price` half of that condition is doing real work: it hides the badge on variants that are not discounted. Pick a full-price size and the badge disappears rather than showing `-0%`.

### Edit 2: blocks/price.liquid

Add one line to the `{% render 'price' %}` call:

```liquid
show_discount_badge: true
```

That is the opt-in firing. The product page asks for the badge; nothing else does.

The badge now shows on the product page, recalculates when the shopper changes variant, and hides itself on variants that are not on sale.

## Styling it

The inline style above is deliberate: it works without touching your stylesheet, which keeps this to two files. Move it to CSS when you are happy with it.

- **Colour**: `background:#e2231a` is a strong red. Use a token from your theme if you have one, so it survives a palette change.
- **Shape**: `border-radius:999px` gives a pill. Use `2px` for a rectangle matching Fabric's built-in badges.
- **Size**: `font-size:.75em` scales with the price text, so it stays proportional wherever the snippet renders.

To round up rather than down, add `| plus: 1` before the closing of the assign, but be careful: 1% off would display as -2%, which overstates the discount. Flooring is the safer default and it is why the code does it.

## Doing this on other themes

The calculation is identical everywhere. Only the file names change.

**Dawn and Dawn-based themes**: the badge is in `snippets/card-product.liquid`, and the product page price is `snippets/price.liquid`. The same two-edit split applies, with the same variant caveat.

**Horizon**: badges render through `blocks/_product-card-gallery.liquid` much like Fabric.

**Vintage themes such as Debut and Impulse**: look in `snippets/product-card-grid.liquid` or `product-grid-item.liquid`.

The reliable way to find it in any theme: search your theme code for `compare_at_price`. Every place that comparison appears is a place a badge could go, and the results will show you both the card and the price snippet in one list.

## Related jobs: removing, recolouring, renaming

People arriving at the badge code usually want one of four things. The percentage is one. Here are the other three, since you are already in the right files.

### Remove the sale badge entirely

Check the theme editor first. Fabric, Dawn and Horizon all expose badge visibility as a setting, usually under **Theme settings > Product cards** or in the Product grid section. Turning it off there is safer than deleting code, because it survives theme updates.

If there is no setting, wrap the badge markup in a condition that is never true, or delete the block that renders it. Do not simply hide it with `display: none` in CSS: the markup still ships, screen readers still announce it, and you have made the page heavier to show less.

### Change the badge colour

The badge is a normal element with a class. On Fabric it is `product-badges__badge`. Add to your theme's **Custom CSS**:

```css
.product-badges__badge {
  background: #2f5d43;
  color: #fff;
}
```

Use Custom CSS rather than editing `base.css`. It survives theme updates and it is easier to find again in six months.

Note that themes often style the sold-out badge with the same base class plus a modifier, so check you are not recolouring both unless you mean to.

### Change the word "Sale" to something else

That string comes from your locale file, not from the Liquid. `{{ 'content.product_badge_sale' | t }}` is a translation lookup.

Edit it under **Online Store > Themes > ... > Edit default theme content**, then search for the badge string. Change it there and it updates everywhere the badge renders, in every language you support.

This is the right way to say "Deal" or "Reduced" instead of "Sale". Hardcoding the word into the Liquid works but breaks translations and has to be repeated in each file that renders a badge.

## A word on whether you should

Percentage badges work, but they are not free.

They are most effective when discounts vary meaningfully across your catalog. If everything is 20% off, the number adds nothing over the word Sale and you have taken on code for no gain.

They also apply pressure to your compare-at prices. A visible **-70%** invites the question of whether the compare-at was ever a real selling price. Several jurisdictions regulate this, and the UK and EU in particular expect the reference price to be one you genuinely charged recently. A word like Sale is vague enough to pass unnoticed. A specific number is a claim.

If your discounts are shallow and uniform, the built-in badge is fine.

## If the badge is not showing

**Nothing on the product page.** You only made the card edit. The product page needs the `price.liquid` change and the `show_discount_badge: true` opt-in.

**The number does not change when you switch variants.** You are still using `product.price` somewhere instead of `selected_variant.price`.

**It shows -0%.** The discount is under 1% and floors to zero, or `show_compare_price` is not being checked. Add the condition.

**Nothing anywhere.** No compare-at price is set. The badge is driven entirely by `compare_at_price > price`, so check an actual discounted product rather than a full-price one.

**It appears in the cart or search results.** Something is passing `show_discount_badge: true` beyond the product page. Search your theme for that string.

## What this looked like on Fabric

Tested on a Fabric 4.1.1 store:

- The **card edit alone** produced percentages on the collection grid and nothing on the product page.
- The **price snippet edit** put the badge on the product page, updating per selected variant and hiding on variants that were not discounted.
- Together, two files and one opt-in line.

If you take one thing from this: the reason the obvious edit half-works is that Shopify renders cards and product pages from different snippets, and `product.price` is not the variant your shopper is looking at. Move the badge to where the selected variant already lives and both problems disappear at once.


---

---
title: Shopify Sales Counter: Show "X Sold" on Product Pages
description: Shopify has no built-in sales counter. Here is how to show a sold count on your product page and collection pages in the Dawn theme, using one product field and three lines of theme code.
---

## The problem

You want a small line under the price that says "248 sold". Shoppers read it as proof that other people bought the product. You want it on the product page and on the product cards in your collections.

A merchant on the Shopify Community asked for exactly this on the Dawn theme. The question was whether a sales counter can be set up from the backend, with the number shown on both page types.

Shopify has no switch for it. This article shows a way to add one, tested on Dawn, and then covers how to keep the number up to date.

## What a "sales counter" means

People use the phrase for two different things.

- **A lifetime sold count.** A number such as "1,085 sold" that only goes up. This is what I built.
- **A recent sales counter.** A line such as "37 sold in the last 24 hours". It needs a tool that reads your orders by date.

The lifetime count needs one field per product and a little theme code. The recent count is a job for an app, because the code in your theme cannot read your orders.

## Why Shopify does not have this built in

A theme can show a product's title, price, images and stock status. It cannot ask Shopify how many units of a product were sold. That number lives in your orders, and the theme code has no way to add it up.

So the number has to come from somewhere you control. The simplest place is a **metafield**, which is an extra field you add to a product to hold your own information. Shopify's Liquid code, the code language themes are written in, can read it.

## Before and after

This is a collection page on a Dawn test store before the change. The cards show only the name and price:

![A Dawn collection page with product cards that show a name and price only](/images/blog/shopify-sales-counter/01-collection-page-before-no-counter.png)

This is the same page after. Each card has a sold count under the price:

![The same collection page with a sold count under the price on each product card](/images/blog/shopify-sales-counter/03-collection-page-after-sold-counter.png)

The product page before the change:

![A Dawn product page with a title and price and no sold count](/images/blog/shopify-sales-counter/02-product-page-before-no-counter.png)

The product page after, with "1085 sold" under the price:

![The same product page with a sold count of 1085 under the price](/images/blog/shopify-sales-counter/04-product-page-after-sold-counter.png)

## How to add a sales counter to Dawn

There are two parts. First you create a field that holds the number. Then you add three lines of code that print it.

### Step 1: Open Metafields and metaobjects

In your Shopify admin, go to **Settings**, then **Metafields and metaobjects**. This page holds custom fields. A metaobject is a reusable record, and you do not need one here. Click **Products**.

![The Shopify settings page for Metafields and metaobjects with the Products row highlighted](/images/blog/shopify-sales-counter/05-settings-metafields-and-metaobjects-products.jpeg)

### Step 2: Add the definition

A definition is the blueprint for a field. It tells Shopify the field's name and what kind of value it holds. Click **Add definition**.

![The Product metafield definitions page with the Add definition button highlighted](/images/blog/shopify-sales-counter/06-add-definition-button.png)

### Step 3: Name it and choose Integer

Type **Sold count** as the name. Shopify fills in the key as `custom.sold_count`. Choose **Integer** as the type, which means a whole number. Click **Save**.

![The Add product metafield definition page with the name Sold count and the type Integer](/images/blog/shopify-sales-counter/07-sold-count-name-and-integer-type.png)

Keep the key exactly as `custom.sold_count`. The code in step 5 looks for that name.

### Step 4: Fill in the number on each product

Go to **Products** and open a product. Scroll down to **Product metafields**. Type the number of units sold in **Sold count**. Click **Save**. Repeat for every product that should show a counter.

![A product page in the admin with the Sold count field filled in under Product metafields](/images/blog/shopify-sales-counter/08-sold-count-field-on-product.png)

A product with an empty field, or a value of 0, shows nothing. That is deliberate, so a new product does not display "0 sold".

### Step 5: Open the theme code

Go to **Online Store**, then **Themes**. Find your current theme and click the three dots next to **Edit theme**. Click **Edit code**.

![The Themes page with the three dot menu open and Edit code highlighted](/images/blog/shopify-sales-counter/09-themes-edit-code.jpeg)

### Step 6: Paste the code into price.liquid

In the file list, open **Snippets**, then **price.liquid**. A snippet is a small file that makes up one part of your theme. This one draws the price.

Scroll to the bottom. The last line is `{% endunless %}`. Click at the start of that line and paste this above it:

```liquid
{%- if product and product.metafields.custom.sold_count.value > 0 -%}
  <p style="margin:0.4rem 0 0;font-size:1.3rem;font-weight:600;color:#c2410c;">{{ product.metafields.custom.sold_count.value }} sold</p>
{%- endif -%}
```

![The price.liquid file in the code editor with the three pasted lines above the last line](/images/blog/shopify-sales-counter/10-price-liquid-code-pasted.png)

### Step 7: Save

Click **Save** at the top right of the code editor.

![The Save button at the top right of the Shopify code editor](/images/blog/shopify-sales-counter/11-save-code-editor.png)

Open a product page and a collection page on your store. The counter appears under the price.

## Why one file covers both pages

Dawn uses the same price snippet everywhere a price is shown. In the Dawn files I checked, `price.liquid` is used by the product card that makes up a collection grid, by the product page's price block, by the featured product section and by the search suggestions box.

That is why one paste puts the counter on the product page and on the collection pages. If you also see it in the search suggestions, it comes from the same snippet.

## Change how the counter looks

The three lines you pasted hold the whole design. Two things are worth knowing.

- **The words.** Change `sold` after the number to `bought` or `sold so far`. Keep the `{{ ... }}` part as it is, because that prints the number.
- **The size and colour.** `font-size:1.3rem` sets the size, and `color:#c2410c` sets the orange. Replace the colour code with any other. A site such as a hex colour picker gives you the code.

Save after each change and refresh your store.

## How to keep the number up to date

The number is only as current as the last time you typed it. There are three ways to deal with that.

### Option 1: Update it by hand

For a small shop this is fine. Once a week, open the products that sold and raise the number. It takes a few minutes, and the counter is always a number you chose to show.

Use real numbers. A made up count misleads shoppers.

### Option 2: Shopify Flow

Shopify Flow is Shopify's free automation app. You build rules such as "when an order is paid, do this". It is a natural first try for a counter, so I read Shopify's Help Center to see how far it gets. I did not run this workflow, so treat the steps as untested.

1. Start the Flow app. If you do not have it, install **Shopify Flow** from the Shopify App Store.
2. Click **Create workflow**.
3. Click **Select a trigger** and choose **Order paid**.
4. Click **Add step**, choose **Action**, then **For each loop (iterate)**. Pick the order's line items as the list. A line item is one product in the order.
5. Under **Repeat for each item**, click **Add step**, choose **Action**, then **Send Admin API request**.
6. In **Mutation**, choose `metafieldsSet`. In **Mutation inputs**, enter the product's ID, the namespace `custom`, the key `sold_count`, the type `number_integer` and the new total:

```json
{
  "metafields": [
    {
      "ownerId": "the product's ID from the line item",
      "namespace": "custom",
      "key": "sold_count",
      "type": "number_integer",
      "value": "the new total"
    }
  ]
}
```

7. Turn the workflow on.

The new total in step 6 is where this falls short. Per the Help Center, Flow cannot read a metafield with dot notation, and the action that fetches product data cannot run inside a For each loop, so there is no documented way to read the current number and add the quantity sold. The built-in **Update product metafield** action is no help either, because it is not offered after an order trigger. The steps above build the workflow, but the last value is not something I could fill in from the documentation. Until Flow can do that, an app or typing the number is what works.

### Option 3: An app

An app reads your orders itself and keeps the number current. Three apps in the Shopify App Store are built around a sold count:

- **Sold Count: Low Stock Counter.** Free plan, paid plans from \$9.99 a month. 14 ratings, 3.3 average.
- **Sold Count: Product Sale Proof.** Free to install, paid plans from \$4.90 a month. 9 ratings, 3.9 average.
- **Stock Sheep - Sold & Low Stock.** Free plan, paid plans from \$10 a month. 21 ratings, 4.3 average.

All three have few ratings, so read the recent reviews before you install. In the reviews I read, merchants of Stock Sheep reported sold numbers that were higher than the real sales, and merchants of the other two reported support that did not answer. Treat that as a reason to check the first few numbers against your own orders.

An app is also the way to get a "sold in the last 24 hours" line, because the code in your theme cannot read orders by date.

## If the counter does not show

- **Check the key.** The definition must be `custom.sold_count`. A different key such as `custom.sold` prints nothing.
- **Check the value.** A field that is empty or 0 shows nothing. Type a number above 0 on that product.
- **Give it a moment.** On my test store the collection page showed new numbers about 30 seconds after I saved them in the admin. A product page showed the number straight away.
- **Check the file.** The three lines must sit above the last `{% endunless %}` in `price.liquid`, in the snippet called price, not in another file.
- **Check your theme.** I tested this on Dawn 15.5.0. Themes built from Dawn use the same file. Other themes name their price file differently, so look in Snippets for a file with "price" in its name.

## What the field and the code do

The field is a place to store a whole number against each product. The code asks one question for each product it draws: does this product have a Sold count above 0? If it does, the code prints the number and the word "sold" under the price. If not, it prints nothing.

Nothing else in your store changes. Your prices, stock, orders and checkout are not touched, and you can remove the counter by deleting the three lines.

## Frequently asked questions

**Does Shopify have a built-in sales counter?** No. Shopify themes cannot read how many units a product sold, so you store the number yourself or use an app.

**Can I show the counter only on the product page?** The `price.liquid` file serves both page types, so these three lines show on both. To limit it to one page type, an app that places its counter in a chosen spot is the simpler route.

**Will the counter update by itself?** Not with this method. The number is whatever you type into the Sold count field. Apps keep it current from your orders.

**Does this work on themes other than Dawn?** Dawn and themes built from it use the same price file. On other themes the idea is the same, but the file name and the place to paste differ.

**Will this slow down my store?** The code prints one line of text. It adds no images, no scripts and no extra requests.

## Summary

Shopify does not count sales per product for your theme, so a sales counter starts with a number you store yourself. A Sold count field on each product holds it, and three lines in the price snippet print it under the price on product pages and collection cards. On a Dawn test store the counter appeared on both. The number stays as you typed it, and Shopify Flow's built-in metafield action does not work from an order trigger. Flow also has no documented way to add one to the current number, so an app is the way to automate it.


---

---
title: "Shopify Sales Tax Report: Split Taxable and Non-Taxable"
description: Shopify has no taxable or non-taxable field in reports. Here is the custom report that gives you gross, discounts, net and tax for each side, tested on a store.
---

## The problem

A merchant raised this on the Shopify Community, and it is a real gap rather than a setting they missed.

They sell clothing. In their state clothing is not taxed. They also run bundle promotions, so orders carry a discount.

At tax time they need to know two things. How much of their revenue was taxable, and how much was not. And when a discount reduced a sale, which of those two buckets it came out of.

Their example is simple. A clothing item sells for \$34. Clothing is not taxable. A \$2 bundle discount applies. So non-taxable sales should report as \$32, not \$34.

That sounds like it should be a checkbox somewhere. It is not.

## Shopify has no taxable or non-taxable field in reports

I checked this two ways before answering, because it is the kind of thing that is easy to assume.

First, in the admin. Open any report, click into the Dimensions list, and search for "taxable". Nothing comes back.

![Searching the Shopify report dimension list for taxable returns no options found](/images/blog/shopify-sales-tax-report/01-no-taxable-dimension-shopify-reports.png)

Second, in Shopify's own reporting reference. The `sales` and `sales_taxes` data sets list every metric and dimension you can report on. Neither has a taxable flag.

What Shopify does give you is a **Taxes** figure, which is the tax you actually charged, and a tax breakdown by tax name, rate and region. Both describe the tax collected. Neither tells you the size of the sales base underneath it.

So the merchant is right. The field they want does not exist.

## The good news: the numbers already exist

Here is the part that makes this solvable today, and it is the bit forum answers skip.

Shopify does not store a discount as one lump sum on the order. It **allocates the discount down to each line item**. Even a discount you apply to the whole order gets spread across the products in it.

That matters because of how Shopify defines Net sales:

> Net sales = gross sales - discounts - sales reversals

Shopify shows you that formula right in the metric picker.

Put those two facts together. If a discount is already attached to individual products, then Net sales for **any group of products** is already gross minus the discount that hit those products.

So you do not need a taxable field. You need a field on your products that mirrors which ones are taxable, and then you group by that field.

## How to pull a sales tax report from Shopify

This takes about five minutes to set up and then it is a saved report you reuse.

### Step 1: give your non-taxable products a value you can group by

Product type is the easiest field to use, and most stores already have something sensible in it.

Open a non-taxable product. In the right column under **Product organization**, set **Type**. In this example the clothing items are set to `Clothing`.

![Setting Product type to Clothing on a non-taxable product in the Shopify admin](/images/blog/shopify-sales-tax-report/02-set-product-type-non-taxable-product.png)

Do the same for the rest. You do not have to open them one at a time. From **Products**, tick the products, then use **Bulk edit** and add the **Type** column.

A product tag works exactly the same way if Product type is already used for something else in your store. So does a collection. Pick whichever one you are not already using for merchandising.

### Step 2: start a new report

Go to **Analytics > Reports**, then click **New exploration** in the top right.

![The Shopify Reports page with the New exploration button](/images/blog/shopify-sales-tax-report/03-analytics-reports-new-exploration.png)

### Step 3: add the four numbers you need

In the **Metrics** panel on the right, add these four:

- **Gross sales** - revenue before discounts
- **Discounts** - the amount taken off
- **Net sales** - gross minus discounts and reversals
- **Taxes** - tax actually charged

![The Shopify report builder with Gross sales, Discounts, Net sales and Taxes selected](/images/blog/shopify-sales-tax-report/04-add-gross-sales-discounts-net-sales-taxes-metrics.png)

### Step 4: group by your product field

In the **Dimensions** panel, add **Product type**. Use **Product tag** instead if that is what you flagged your products with.

![Adding the Product type dimension to a Shopify report](/images/blog/shopify-sales-tax-report/05-add-product-type-dimension.png)

### Step 5: read the report

That is it. One row per group, with all four numbers.

![A Shopify sales tax report split by product type showing gross sales, discounts, net sales and taxes](/images/blog/shopify-sales-tax-report/06-shopify-sales-tax-report-taxable-non-taxable.png)

On the test store that came out as:

| Product type | Gross sales | Discounts | Net sales | Taxes |
| --- | --- | --- | --- | --- |
| Clothing (not taxed) | 68.00 | -5.40 | 62.60 | 0.00 |
| Homeware (taxed) | 40.00 | -2.00 | 38.00 | 6.84 |

Read across the two rows and you have every figure the merchant asked for:

- Gross taxable sales and gross non-taxable sales
- Discounts applied to each side
- Net taxable sales and net non-taxable sales
- Tax charged

The Taxes column is a useful sanity check on its own. Your non-taxable row should read 0.00. If it does not, something in that group is being taxed and you want to know about it before you file.

### Step 6: export it, and save it

Use the **...** menu beside the report name to export a CSV. Use **Save** so the report is one click next month instead of five minutes of rebuilding.

![Exporting a Shopify report to CSV from the three dot menu](/images/blog/shopify-sales-tax-report/07-export-shopify-sales-tax-report-csv.png)

## Do order-level discounts get split correctly?

This was the merchant's real worry, and it deserved a proper test rather than a guess.

If a discount applies to the whole order, and that order has both taxable and non-taxable items in it, does Shopify dump the whole discount on one side?

No. I built the case on a test store to be sure.

One order, two items:

- A \$34 shirt, not taxable
- A \$20 mug, taxable at 18%
- A \$5.40 discount applied to the **whole order**, not to a line

If Shopify split that in proportion to price, the shirt should absorb \$3.40 and the mug \$2.00. The mug's taxable base would drop from \$20.00 to \$18.00, and the tax with it.

![A Shopify draft order showing a 5.40 order level discount and tax recalculated to 3.24](/images/blog/shopify-sales-tax-report/08-order-level-discount-split-across-taxable-and-non-taxable.png)

The tax landed on \$3.24. That is 18% of \$18.00 exactly.

So Shopify put \$2.00 of the discount on the taxable item and the other \$3.40 on the non-taxable one, in proportion to price, and recalculated the tax on the reduced amount. The allocation follows the real tax treatment of the sale.

That is worth knowing whichever way you report. Your discount is already being applied the way your accountant would expect.

## Getting a per-order audit trail

A two-row summary is fine for filing. It is not enough when a number looks wrong and you need to find out why.

Add **Order name** as a second dimension. You now get one row per order, per product type.

![A Shopify report broken down by order name and product type](/images/blog/shopify-sales-tax-report/09-per-order-taxable-non-taxable-breakdown.png)

The first row is the merchant's exact example. Order #1020, Clothing, \$34.00 gross, \$2.00 discount, **\$32.00 net**, \$0.00 tax.

The last row is the split order from the test above. Same order number appears twice, once per product type, with the discount divided between them.

## The difference: "Product type" and "Product type at time of sale"

Search the dimension list for Product type and you get two results. Pick the wrong one and it can put your history in the wrong bucket.

- **Product type** reads the value on the product record **right now**
- **Product type at time of sale** reads what the value was **when the order was placed**

I proved the difference by accident. I renamed a product's vendor after its orders had already been placed, then grouped by both vendor dimensions at once.

![One row of sales showing a different value for Product vendor and Product vendor at time of sale](/images/blog/shopify-sales-tax-report/10-product-field-current-vs-at-time-of-sale.png)

Same sales. Two different answers, side by side, on one row.

For this report you almost always want the plain **Product type**. You are setting these values today and running a report over sales that already happened. The "at time of sale" version recorded whatever was on the product back then, which for most stores is blank, so your rows will come back empty.

The exception is if a product genuinely changed its tax treatment partway through the year. Then "at time of sale" is the honest one, but only if the type was already set on the orders in question.

## What Net sales includes that "gross minus discounts" does not

One caveat, because it will show up in your reconciliation.

Net sales is not only gross minus discounts. It also has returns and cancellations taken out of it. Shopify calls these sales reversals.

For filing that is usually exactly what you want. You should not be paying tax on a sale that came back. But it does mean the arithmetic will not always tie out if you check it by hand against the gross and discount columns.

If you want to see the returns separately, add **Returns** as a fifth metric.

## Which product field should you group by?

All four of these work as report dimensions. The right one depends on your store.

**Product type.** One value per product, so your report comes back clean with no double counting. Best choice if you are not already using it, or if your types happen to line up with taxability.

**Product tag.** Easiest to bulk apply and easiest to add to a product later. The catch is that a product can carry many tags, so a report grouped by tag shows a row for every tag in your store, not just yours. Add a filter for your tag to keep it readable.

**Collection.** Good if you already keep a "non-taxable" collection, which many stores do because Shopify tax overrides need one. A product can sit in several collections, so the same double counting applies.

**Metafield.** The tidiest option for a large catalogue, and you can report on it the same way. More setup up front.

If you already keep a manual collection for a tax override, reuse it. There is a separate write up on [keeping a Shopify tax override collection filled automatically](/blog/shopify-tax-override-automatic-collection) that pairs well with this report.

## Common questions

### Does Shopify handle sales tax?

Shopify calculates and charges the tax at checkout based on your store's tax settings and the regions you have registered in. That part is automatic once configured.

Filing and paying is separate. Shopify does not submit your returns for you as standard. Its reports are there to give you the numbers you or your accountant file with.

### Does Shopify report sales tax to states?

No. Shopify collects the tax on your behalf at checkout and hands it to you. Registering, filing and remitting to each state is yours to do.

That is exactly why a report like the one above matters. The figures have to come from your own store data.

### Does Shopify report to the IRS?

That is a different question from sales tax, and the answer is yes for income reporting. If you use Shopify Payments and cross the reporting thresholds, Shopify issues a 1099-K. You will find it under **Settings > Payments** in your Shopify Payments account details.

### How do I mark a product as tax exempt in Shopify?

On the product, open the variant pricing section and turn off **Charge tax on this product**. That stops tax being charged on it anywhere.

If the exemption only applies in some regions, do not use that checkbox. Use a tax override instead, under **Settings > Taxes and duties**, which applies a different rate to a collection of products in one region only.

There are also customer level exemptions for wholesale and resale buyers, set on the customer record rather than the product.

### Where do I find Shopify tax documents?

Two different things get called tax documents.

For the tax you charged customers, use **Analytics > Reports** and the report above, or Shopify's built in tax reports.

For your own income documents such as the 1099-K, go to **Settings > Payments**, open your Shopify Payments account, and look under documents.

## If your report looks wrong

A short checklist, in the order these actually go wrong.

**A row labelled blank or "not set".** Some products have no Product type. Find them from the Products list by filtering on an empty type, and fill them in.

**Your rows are empty.** You probably picked "Product type at time of sale" instead of "Product type". See the section above.

**The totals do not match your payouts.** They should not. Net sales is revenue. A payout is revenue minus refunds, fees and chargebacks, on a different date. Compare like with like.

**The Taxes column is not zero on your non-taxable row.** Something in that group is still charging tax. Check that each product in it has Charge tax turned off, or that your tax override actually covers it.

**Yesterday's orders are missing.** Check the date range on the report. It defaults to a window that may not include what you are looking for.

## If you would rather not build it by hand

The report above is free and takes five minutes. If you want it scheduled, emailed, or shaped differently for an accountant, a few reporting apps do this well:

- **Report Pundit** - free plan available, very broad custom reporting
- **Mipler Advanced Reports** - free plan available
- **Better Reports** - from \$19.90 a month

All three can build a tax split sales report and send it on a schedule. They are solving the delivery problem, not a missing data problem. The data is already in your store either way.

## The feature request still stands

None of the above changes the fact that the merchant is asking for something reasonable.

A **Taxable** dimension in Shopify's sales reporting would collapse this whole article into one click. No product field to maintain, no risk of a product being missed, and no chance of grouping by the wrong version of the field.

Until that exists, the report above gets you the same numbers, and it is accurate today.


---

---
title: How to Make a Scrolling Announcement Bar in Shopify
description: Most scrolling announcement bars flash an empty gap every time the loop restarts. The cause is a fixed percentage shift. Here is a section that measures itself instead, tested on a live store.
---

## The scrolling bar that flashes every time it loops

A scrolling announcement bar is a strip across the top of the store with text sliding across it. Free shipping over 50. New season now live. That sort of thing.

The usual version is a few lines of CSS. Put the text in a row, animate it leftwards, loop forever.

It works, and then every so often the bar goes blank for a moment before the text reappears. On a dark bar it is a sweep of empty background. It looks broken, because it is.

A merchant hit exactly this and posted their code on the Shopify Community. Here is what the gap looks like:

![The scrolling bar mid-loop with an empty stretch of background and no text](/images/blog/shopify-scrolling-announcement-bar/01-the-flash-empty-gap-in-the-bar.png)

I worked through it on a test store. The cause is simple once you see it, and the fix is not the one usually suggested.

## Why the flash happens

Near the end of the loop, the content runs out before the right edge of the screen.

The animation shifts the text left. When it reaches the end it snaps back to the start. If, at the moment before it snaps, the trailing text has already cleared the right-hand side, there is nothing left to draw. You get a slab of bare background sweeping past.

That empty slab is the flash.

### The arithmetic, because it makes the bug obvious

Numbers help here more than description.

Say your messages come to **900px** per copy. You duplicate them once, so the track is **1800px**. The animation slides left by 50%, which is **900px**.

On a 1200px-wide screen, at the end of the animation the track has moved 900px left. The visible window is therefore showing the region from 900px to 2100px of a track that only exists up to 1800px.

That last **300px has nothing in it**. There is your flash.

Now widen the browser to 1600px and the empty stretch becomes 700px. Narrow it to 900px and it disappears entirely.

Which explains the most confusing property of this bug: **it depends on the screen it is viewed on.** It looks fine on your laptop and broken on a client's monitor, fine in portrait and broken in landscape. Nothing is intermittent. You are just changing one of the two numbers the recipe assumed.

So the real requirement is easy to state:

**There must always be enough content to cover the full viewport, and the restart must land on a pixel-identical frame.**

Miss either condition and it flickers. Most implementations miss both.

## Why the usual advice does not fix it

These are the fixes suggested most often. Each helps with something, but none solves the gap.

**Animate to `translateX(-50%)` with the text duplicated once.** This is the standard recipe and it is the most common cause of the problem. It only works if two copies together are wider than the viewport. Short text on a wide monitor gives you two copies that do not fill the screen, so the gap appears anyway.

**Switch `translateX` to `translate3d` to force GPU compositing.** Worth doing for smoothness, and it can remove judder. It does nothing about running out of content, because the gap is a layout issue and not a rendering one.

**Duplicate the text ten times in the theme editor.** This does work, by brute force. It also breaks the moment someone views the site on an ultrawide monitor, or shortens the text, and it means editing content by hand every time the message changes.

**Bounce the text back and forth instead of looping.** Sidesteps it, but it is a different effect and reads as a bug of its own.

The common thread is that all of them assume a fixed amount of content and a fixed shift. The viewport is not fixed and neither is the text.

Two copies is not a magic number. It is a guess about the relationship between your text width and your visitor's screen width, and that is not a relationship you can know while writing the CSS.

## Two structural bugs in the usual starting code

Before the measuring fix, there are two properties of the typical hand-rolled bar that will sabotage it even after you add the JavaScript. Both were present in the code the merchant posted.

**`position: absolute` on the bar.** Positioning the strip absolutely at the top of the page takes it out of normal document flow. It then overlaps whatever sits beneath it, and more importantly its width stops being tied to its container. Any measurement you take is measuring something other than what you think.

Use `position: relative`, as the code below does. The bar stays in the layout, pushes the page down like a real element, and the viewport width means what you expect.

**`min-width: fit-content` on the track.** This looks equivalent to `width: max-content` and is not. Inside a flex container, `min-width` sets a floor while leaving the element open to being sized by its parent, so the track can still end up constrained to the viewport. Measure that and you get the wrong copy width, which poisons the clone count.

`width: max-content` makes the track exactly as wide as its contents want to be. That is the property you must have in place **before** measuring anything, which is why it is not just a tidiness preference.

Fix these two and the measuring code below has something reliable to measure.

## The fix: measure, clone, then shift by exactly one copy

The reliable approach stops guessing and measures at runtime.

1. Render **one** copy of the announcement text.
2. Measure its actual width in pixels.
3. Clone whole copies until the track is at least **viewport width plus one copy** wide.
4. Animate by exactly **one copy width in pixels**, not by a percentage.
5. Re-run all of that when the viewport resizes.

Step 4 is what removes the flash. Shifting by exactly one copy width means the frame after the restart is pixel-identical to the frame before it. There is no visible seam, because there is no seam at all.

Step 3 is what guarantees the screen is always covered, on any viewport, with any length of text.

## The code

This is a complete section. Create `sections/custom-scrolling-banner.liquid` and paste it in, then add **Scrolling Announcement** to your theme from the theme editor.

Duplicate your theme first. **Online Store > Themes > ... > Duplicate.**

```liquid
{%- if template.name != 'product' -%}
<style>
.custom-scrolling-banner {
  background-color: {{ section.settings.bg_color }};
  color: {{ section.settings.text_color }};
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  z-index: 1001;
  box-sizing: border-box;
}
.custom-scrolling-banner__viewport {
  width: 100%;
  overflow: hidden;
  display: flex;
}
.custom-scrolling-banner__content {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation-name: custom-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.custom-scrolling-banner:hover .custom-scrolling-banner__content { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .custom-scrolling-banner__content { animation: none; transform: none; }
}
.custom-scrolling-banner__copy {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.custom-scrolling-banner__item {
  font-weight: 300 !important;
  letter-spacing: .02em !important;
  font-size: 13px;
  padding: 0 4.5rem;
  white-space: nowrap;
}
@keyframes custom-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift, -50%)); }
}
</style>

<div class="custom-scrolling-banner" data-speed="{{ section.settings.speed }}">
  <div class="custom-scrolling-banner__viewport">
    <div class="custom-scrolling-banner__content">
      <div class="custom-scrolling-banner__copy" data-marquee-copy>
        {% for block in section.blocks %}
          <span class="custom-scrolling-banner__item">{{ block.settings.text }}</span>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  function initMarquee(root) {
    var viewport = root.querySelector('.custom-scrolling-banner__viewport');
    var content  = root.querySelector('.custom-scrolling-banner__content');
    var firstCopy = root.querySelector('[data-marquee-copy]');
    if (!viewport || !content || !firstCopy) return;

    var baseSpeed = parseFloat(root.getAttribute('data-speed')) || 60;
    var originalHTML = firstCopy.outerHTML;

    function layout() {
      content.innerHTML = originalHTML; // reset to a single copy before measuring
      var copyWidth = content.firstElementChild.getBoundingClientRect().width;
      if (copyWidth === 0) return;
      var viewportWidth = viewport.getBoundingClientRect().width;

      // Clone whole copies until the track is at least (viewport + one copy) wide,
      // so a full copy is always sliding in before the loop resets.
      var needed = viewportWidth + copyWidth;
      var copies = 1;
      while (copies * copyWidth < needed) {
        content.insertAdjacentHTML('beforeend', originalHTML);
        copies++;
      }

      // Slide by EXACTLY one copy width -> restart is pixel-identical -> no flash.
      content.style.setProperty('--marquee-shift', '-' + copyWidth + 'px');
      // Keep perceived speed constant regardless of how many copies we cloned.
      content.style.animationDuration = baseSpeed + 's';
    }

    layout();
    if (window.ResizeObserver) {
      new ResizeObserver(layout).observe(viewport);
    } else {
      window.addEventListener('resize', layout);
    }
  }

  document.querySelectorAll('.custom-scrolling-banner').forEach(initMarquee);
})();
</script>
{%- endif -%}

{% schema %}
{
  "name": "Scrolling Announcement",
  "settings": [
    { "type": "range", "id": "speed", "min": 20, "max": 200, "step": 5, "unit": "s", "label": "Scrolling Speed", "default": 60 },
    { "type": "color", "id": "bg_color", "label": "Background Color", "default": "#000000" },
    { "type": "color", "id": "text_color", "label": "Text Color", "default": "#ffffff" }
  ],
  "blocks": [
    { "type": "announcement", "name": "Announcement", "settings": [{ "type": "text", "id": "text", "label": "Text", "default": "Welcome" }] }
  ],
  "presets": [{ "name": "Scrolling Announcement" }]
}
{% endschema %}
```

The result, running continuously with no gap:

![The scrolling announcement bar running seamlessly across the top of the store](/images/blog/shopify-scrolling-announcement-bar/02-seamless-scrolling-bar-after-fix.png)

## The parts worth understanding

**`width: max-content` on the track.** Without it the flex container shrinks to the viewport and the copies wrap or compress instead of forming one long row.

**Resetting `innerHTML` before measuring.** `layout()` runs again on every resize. If you measured without resetting, you would be measuring the clones from last time and the track would grow without bound.

**Setting the shift as a CSS variable.** The keyframes read `var(--marquee-shift)`, so JavaScript changes the distance without rewriting the animation. The `-50%` fallback in the keyframe only applies if the script fails.

**Setting `animationDuration` from the base speed.** Cloning more copies makes the track longer. Without pinning the duration, the bar would appear to speed up on wide screens. This keeps the perceived speed steady.

**`ResizeObserver` on the viewport.** Rotating a phone or dragging a window changes the required copy count. The fallback covers older browsers.

**Two accessibility touches.** Hovering pauses the animation so text can be read, and `prefers-reduced-motion` stops it entirely for anyone who has asked their OS for less movement. Do not remove that second one. Continuous motion is a genuine problem for some people, including anyone prone to motion sickness or vestibular symptoms.

## Adjusting it

**Speed.** The **Scrolling Speed** slider is seconds per loop, so a bigger number is slower. It reads as seconds because that is how the CSS uses it.

**Text.** Each announcement is a block, so add and reorder them in the theme editor rather than editing code.

**Where it shows.** The `{%- if template.name != 'product' -%}` wrapper hides the bar on product pages. Delete that line and its `{%- endif -%}` to show it everywhere.

**Height and font.** Change `height: 40px` on the container and `font-size: 13px` on the item. Keep `white-space: nowrap` or text will wrap and break the measurement.

## Should you use a scrolling bar at all

Worth raising, because it came up in the thread and the objection is fair.

Moving text attracts the eye once and is then ignored. It is close cousin to banner blindness, and a message people have to wait for is a message many will not read at all. A static bar with one clear line often outperforms a rotating one carrying four.

Reasonable uses: a single short message too long for the space, or a genuine sequence such as shipping cutoffs plus a discount code.

Weaker uses: cramming five messages into one strip because they all felt important. That usually means none of them lands.

There is also a middle option worth knowing about: a **fading rotator**. Same strip, same set of messages, but each one fades in, holds for a few seconds, and fades out in place rather than travelling across the screen.

It reads better than a marquee for most purposes. Text that holds still is text people can actually read, the message is centred rather than drifting, and the whole class of bug described in this article cannot occur, because nothing depends on content width versus viewport width. It is also less code.

The case for horizontal scrolling is when the movement itself is part of the look you want, or when a single message is genuinely too long to fit and you would rather it travel than truncate.

If the bar is doing real commercial work, test it against a static one. If it is decoration, a static bar is faster, calmer and less code to maintain.

## If it did not work, check these

**Still flashing.** The script did not run. Check the browser console for errors, and confirm the `<script>` block came across with the rest of the section.

**The bar is blank.** No announcement blocks have been added. Add at least one in the theme editor.

**Text is stacked instead of in a row.** `white-space: nowrap` or `width: max-content` is missing.

**It speeds up on a big monitor.** `animationDuration` is not being set, so the longer cloned track is being covered in the same time.

**It grows until the page scrolls sideways.** `innerHTML` is not being reset at the top of `layout()`, so clones accumulate on every resize.

**It only flashes on wide screens.** The classic `translateX(-50%)` symptom, and a sign the script is not applying its measurement. Inspect the track and check the computed `--marquee-shift` is a pixel value rather than the `-50%` fallback. If it still reads `-50%`, the JavaScript is not reaching that element.

**The speed feels different after the fix.** Expected. A loop is now one copy width, where before it was half the whole track. The duration per loop is unchanged, so the apparent speed shifts. Adjust the Scrolling Speed slider; higher is slower.

**The bar sits over the header.** Adjust `z-index: 1001`, or change `position: relative` depending on where your theme expects it. If the bar is overlapping content rather than pushing it down, something is still `position: absolute`.

**It stopped after a theme update.** Section files get replaced. Re-add the file, and keep a copy outside the theme.


---

---
title: "Shopify Search and Discovery App: Fix Unrelated Search Results"
description: Synonyms are gone from the Shopify Search and Discovery app and store search now pads results with unrelated products. Here is a paste-in fix for Dawn that makes search strict again, and how to rebuild synonyms with tags.
---

## The problem

A merchant who sells embroidered patches asked about this on the Shopify Community in September 2026. A customer types a keyword into their store's search, and the results page lists hundreds of products. Almost none of them have anything to do with the word.

They opened the Shopify Search and Discovery app to fix it and found the Synonyms page marked as retired. Synonyms were the one tool they had to control which words match which products. Other merchants on the Shopify developer forum reported Synonyms disappearing from the app around September 16, 2026, with no changelog entry.

For a shop with a large catalog this costs sales. A shopper who searches for "eagle" and gets 300 mixed patches will usually leave instead of scrolling.

I reproduced the problem on a test store running the free Dawn theme, and then built a fix you can paste into the theme editor in about five minutes.

![Before: a search for "wax" returns the ski wax plus three products that do not mention wax](/images/blog/shopify-search-and-discovery-app/01-before.png)

## Why unrelated products show up

Shopify's storefront search now uses what Shopify calls semantic search. According to Shopify's help center, it "uses related words, concepts, categories and other contexts to improve and expand search results", and it reads product descriptions and even the images. It is switched on automatically.

The idea is that a search for "sofa" can also find a product called "couch". The downside is that the search keeps adding loosely related products, and on some catalogs it adds products that are not related at all.

On my test store the effect was easy to see:

- A search for **wax** returned 4 products. Only 1 was ski wax. The other 3 were a cotton t-shirt, a framed art print and a test product.
- A search for **zebra** returned 3 products. No product on the store mentions a zebra anywhere, in the title, tags or description.
- A search for **shirt** returned 6 products, including the art print.

The same three unrelated products showed up for almost every search I tried. They had empty descriptions and no tags, so there was nothing in them to match. The search added them anyway.

There is no setting in the admin to turn semantic search off. The Synonyms page used to let you steer the matching, and that page is the one that was retired.

## First, check where the bad results appear

Shopify runs two different searches, and it helps to know which one your customers are looking at.

- **The search results page.** This is the full page a shopper lands on after pressing Enter in the search box. Its address starts with `/search?q=`. This is where the padding with unrelated products happens.
- **The search dropdown.** Many themes, Dawn included, show a small list of suggestions while the shopper is still typing. Shopify calls this predictive search. Shopify's documentation says semantic search does not apply to it.

If your dropdown suggestions look fine and the full results page is the problem, the fix below is for you.

## The fix: make store search strict again (Dawn)

The fix is a short piece of code that you paste into your search page. Shopify themes are written in a template language called Liquid, and the theme editor has a **Custom Liquid** section, which is a box where you paste code without touching any theme files.

What the code does, in plain words: when a shopper searches, it asks Shopify for products that contain every word in the **title**, the **tags**, the **product type** or the **SKU**. Asking for specific fields like that switches the loose matching off. If that strict search finds nothing, for example because of a typo, the code runs the normal search instead, so the shopper never sees an empty page.

These are the exact steps I posted in the thread.

### Steps

1. Go to **Online Store**.
2. Click **Edit theme** on your current theme.

![Steps 1 and 2: Online Store, then Edit theme on the current theme](/images/blog/shopify-search-and-discovery-app/03-themes.png)

3. Click **Home page** at the top of the editor and choose **Search**. This opens the template for the search results page. A template is the layout Shopify uses for one kind of page.

![Step 3: pick Search from the page menu at the top of the editor](/images/blog/shopify-search-and-discovery-app/04-template.png)

4. Click **Add section** on the left and pick **Custom Liquid**.

![Step 4: Add section, then Custom Liquid](/images/blog/shopify-search-and-discovery-app/05-add-section.png)

5. Paste this code in the **Liquid** box:

```liquid
<style>.strict-search-wait .template-search{visibility:hidden}</style>
<script>
  (function () {
    var FIELDS = ['title', 'tag', 'product_type', 'variants.sku'];
    var params = new URLSearchParams(location.search);
    var q = (params.get('q') || '').trim();
    if (!q || params.has('loose')) return;

    var words = [], m, re = /\(title:(\S+?) OR /g;
    while ((m = re.exec(q))) words.push(m[1]);

    if (!words.length) {
      if (/[:"()*]|\b(AND|OR|NOT)\b/.test(q)) return;
      var strict = q.toLowerCase().split(/\s+/)
        .map(function (w) { return w.replace(/^-+/, ''); })
        .filter(Boolean)
        .map(function (w) {
          return '(' + FIELDS.map(function (f) { return f + ':' + w; }).join(' OR ') + ')';
        }).join(' AND ');
      if (!strict) return;
      document.documentElement.classList.add('strict-search-wait');
      params.set('q', strict);
      location.replace(location.pathname + '?' + params);
      return;
    }

    var original = words.join(' ');
    {%- if search.results_count == 0 %}
    document.documentElement.classList.add('strict-search-wait');
    params.set('q', original);
    params.set('loose', '1');
    location.replace(location.pathname + '?' + params);
    return;
    {%- endif %}

    function tidy() {
      document.querySelectorAll('input[name="q"]:not([type="hidden"])').forEach(function (i) {
        if (i.value === q) i.value = original;
      });
      var walk = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
      while (walk.nextNode()) {
        var n = walk.currentNode;
        if (n.nodeValue.indexOf(q) > -1) n.nodeValue = n.nodeValue.split(q).join(original);
      }
      if (document.title.indexOf(q) > -1) document.title = document.title.split(q).join(original);
    }
    document.addEventListener('DOMContentLoaded', function () {
      tidy();
      new MutationObserver(tidy).observe(document.body, { childList: true, subtree: true });
    });
  })();
</script>
```

![Step 5: the code pasted into the Liquid box](/images/blog/shopify-search-and-discovery-app/06-liquid-box.png)

6. Click **Save**.

![Step 6: Save in the top right](/images/blog/shopify-search-and-discovery-app/07-save.png)

The section adds nothing visible to the page. It only changes which products the search returns.

### The result

On my test store, the same search for **wax** went from 4 products to 1, the ski wax. The search box still reads "wax", and so does the page heading.

![After: the search for "wax" now returns only the ski wax](/images/blog/shopify-search-and-discovery-app/02-after.png)

The other searches changed the same way:

| Search | Before | After |
| --- | --- | --- |
| wax | 4 products, 3 unrelated | 1 product |
| shirt | 6 products, including an art print | 2 shirts |
| collection liquid | 3 products | 1 product, the only one with both words in the title |
| zebra | 3 unrelated products | falls back to normal search (3 results) |
| snowbord (typo) | 15 products | falls back to normal search (15 results) |

Sorting and the filter bar on the results page keep working. When I changed the sort order on a strict search for "snowboard", the page still showed the same 11 snowboards.

## What changes for your shoppers

Strict search behaves differently from the old search in a few ways. Knowing them helps you set up your products so it works well.

**Plurals and capital letters still match.** A search for "snowboards" found the same 11 products as "snowboard", and "Snowboard" with a capital S did too.

**Every word has to match.** A search for "collection liquid" only returns products that have both words somewhere in the title, tags, product type or SKU. This is what cuts the padding.

**Part of a word does not match.** A search for "snow" does not find a product called "Snowboard". On my test store "snow" returned only the 3 products tagged "snow". If your customers often type the start of a word, add that word as a tag (see the next section).

**Descriptions are not searched.** The code leaves out product descriptions on purpose, because long descriptions are where most loose matches come from. If a word only appears in your description, add it as a tag.

**Typos fall back to the normal search.** When the strict search finds nothing, the page reloads with the standard Shopify search. So a typo still gets results, just the looser kind.

## Rebuild your synonyms with tags

With Synonyms retired, **tags** are the easiest replacement. A tag is a label you add to a product in the admin, under the Tags box on the product page. Strict search looks at tags, so any word you put in a product's tags becomes a search term for that product.

For a patch store, that could look like this:

- A patch titled "Eagle Scout Rank Patch" gets the tags `eagle`, `scout`, `rank`, `bsa`.
- A morale patch gets the tags `morale`, `military`, `velcro`, `hook and loop`.
- A disc golf patch gets `disc golf`, `frisbee`, `disc`.

Your old synonym groups are a good starting list. If you had "velcro = hook and loop", add both words as tags on the products they describe.

To tag many products at once, select them in **Products**, click the **...** menu and choose **Add tags**. For thousands of products, export a CSV from the Products page, fill in the Tags column in a spreadsheet and import it back.

**Product type** works the same way. If every patch has the product type "Patch", a search for "patch" or "patches" returns all of them and nothing else.

## What is left in the Shopify Search and Discovery app

The Search and Discovery app is Shopify's free app for controlling store search, collection filters and product recommendations. With Synonyms gone, Shopify's help center lists these search tools:

- **Product boosts.** You can attach up to 10 search terms to a product so it ranks higher when a shopper searches for one of them. Shopify's help center notes that boosts only apply to products that are available for sale, and that they are not applied when a search uses search syntax. The strict search code above uses search syntax, so boosts will not change the order of strict results. They still apply when the code falls back to the normal search.
- **Search result types.** You can choose whether products, pages and blog posts show in results, and whether out-of-stock products are shown, hidden or placed last.
- **Filters and recommendations.** These are unaffected by the Synonyms change.

For most shops, tags plus the strict search code do more for relevance than boosts, because they control which products appear rather than only their order.

## Using another theme

I tested this on Dawn. The code relies on two things: a search results page at `/search`, and a **Custom Liquid** section you can add to the Search template. Many Shopify themes include a Custom Liquid section.

If your theme has a Custom Liquid section, follow the same steps. After saving, search your store for a word that used to return unrelated products and compare. If the results do not change, check the troubleshooting list below.

## If it did not work

**The results did not change.** Make sure you added the section to the **Search** template, not the Home page. The page menu at the top of the editor has to read "Search", as in the step 3 screenshot.

**You cannot find Custom Liquid in the Add section list.** Type "custom" into the search box at the top of the section list. If it still is not there, your theme does not include that section, and an app is the easier route.

**Some searches still show loose results.** That is the fallback working. It runs when no product has all the words in its title, tags, product type or SKU. Add the missing word as a tag on the products that should match.

**A product you expected is missing.** Check that the search word appears in its title, tags, product type or SKU. Words only in the description are left out on purpose.

**You want to undo it.** Go back to the Search page in the theme editor (step 3), select the Custom Liquid section (the screen in step 5), then use **Remove section** at the bottom of its settings and save. Search goes back to the standard behaviour straight away.

![The Custom Liquid section open in the Search template, where Remove section sits at the bottom of its settings](/images/blog/shopify-search-and-discovery-app/06-liquid-box.png)

## When a search app is the better choice

The code fixes relevance, but it does not add typo correction, a synonyms list or search analytics. If you need those, a dedicated search app replaces Shopify's search entirely. The three with the most reviews on the Shopify App Store are:

- **Smart Product Filter & Search**, 4.9 stars from about 2,200 reviews, with a free plan.
- **Boost AI Search & Filter**, 4.8 stars from about 1,500 reviews, from $29 a month.
- **Searchanise Search & Filter**, 4.8 stars from about 1,000 reviews, with a free plan.

These apps each keep their own copy of your catalog and run their own search, so the semantic padding from Shopify's search does not apply to them. The trade-off is a monthly fee on the higher plans and one more app to maintain.

## Shopify search settings, in one place

Store owners looking for "Shopify search settings" usually expect a single settings page. Shopify splits them up:

- **Theme editor, Search template.** How the results page looks: columns, filters, sorting, and any Custom Liquid sections such as the fix above.
- **Theme editor, Theme settings > Search behavior** (on Dawn). Whether the dropdown suggestions show, and whether they show vendor and price.
- **Search and Discovery app.** Product boosts, which result types appear, and where out-of-stock products go.

There is no switch for semantic search itself in any of these.

## Frequently asked questions

**Can I turn off Shopify semantic search?** There is no setting for it in the admin or in the Search and Discovery app. The strict search code above is a way to stop it padding the results page on your own store.

**Did Shopify remove synonyms for good?** The Synonyms page in the Search and Discovery app shows the feature as retired, and merchants started reporting it around September 16, 2026. Shopify has not announced a replacement. Tags are the closest thing you control today.

**Does this affect the search dropdown?** No. The code only runs on the full search results page. The dropdown suggestions work as before.

**Will this slow my store down?** Only the search results page is affected. It loads once with the normal search and then reloads with the strict one, so a search takes one extra page load. Other pages do not change.

The original question and my reply are on the [Shopify Community thread](https://community.shopify.com/t/search-function-completely-useless-synonyms-retired/686891).


---

---
title: "Shopify Shipping Carriers List and Tracking URLs"
description: Shopify's carrier list is fixed and there is no custom carrier setting. Here is the full list of carriers Shopify recognises, what the Other option changes, and three ways to stop pasting tracking links.
---

## The problem

Your courier is not in Shopify's shipping carrier list.

So every order goes the same way. You pick **Other**, you type the tracking number, then you paste the whole tracking link on top of it. Thirty orders a day and that is thirty pasted links.

What most merchants want instead is a prefix. Save the first part of the link once, type only the number, and let Shopify glue them together.

Shopify has no setting for that. The carrier list is fixed, you cannot add to it, and there is nowhere to store a link pattern.

There are still three ways to stop pasting links, and one of them is probably sitting in the dropdown you already use.

## What the shipping carrier field actually does

The carrier box is not decoration. It decides whether Shopify builds the tracking link for you.

Shopify keeps a list of carriers it recognises. Pick one of those and Shopify takes the tracking number you typed, drops it into that carrier's tracking address, and turns the number into a working link on the order page and in the shipping confirmation email.

Pick **Other** and Shopify has nothing to build from, so it asks you for the finished link instead.

That is the whole mechanism. The carrier name is the instruction, not a label.

There is a third case worth knowing about. If you leave the carrier blank, Shopify will try to guess the courier from the shape of the tracking number. Several couriers use similar number formats, so the guess is often wrong and the link lands on the wrong tracking page. Do not rely on it.

## Check the list before you reach for Other

The carrier list is longer than the dropdown makes it look, and it is searchable. Start typing and it filters.

On a test store I typed `dpd` into the **Shipping carrier** box. Six entries came back.

![The Shopify shipping carrier dropdown filtered to dpd, showing DPD, DPD Belgium, DPD Germany, DPD Hungary, DPD Local and DPD UK](/images/blog/shopify-shipping-carriers-tracking-url/01-carrier-list-no-dpd-poland.png)

DPD, DPD Belgium, DPD Germany, DPD Hungary, DPD Local, DPD UK. No DPD Poland.

That is the shape of the problem for most merchants outside the big five markets. The parent brand is there. The national arm is not.

Before you write the list off, try the parent entry on one real parcel. Fulfil with the plain carrier name, open the order, and click the tracking number. If the link opens your parcel, you never have to paste a link again. If it opens a tracking page that cannot find the number, you have your answer in ten seconds and you have lost nothing.

## The Shopify shipping carriers list

Two lists apply to your store at once.

The first shows for shops in any country. It is the long one, and it covers the large international couriers plus a lot of regional ones: DHL Express, DHL eCommerce, FedEx, UPS, USPS, Royal Mail, Evri, GLS, DPD, Chronopost, Colissimo, PostNL, PostNord, Poste Italiane, Correos, CTT, Canada Post, Australia Post, Japan Post, China Post, SF Express, Sendle, Mondial Relay, Packeta, Venipak, Whistl and roughly a hundred more.

The second is country specific and much shorter. Shopify adds a handful of local couriers based on where your shop is located:

- **Australia:** Australia Post, Sendle, Aramex Australia, TNT Australia, Hunter Express, Couriers Please, Bonds, Allied Express, Direct Couriers, Northline, GO Logistics
- **Austria:** Osterreichische Post
- **Bulgaria:** Speedy
- **Canada:** Intelcom, BoxKnight, Loomis, GLS
- **Czechia:** Zasilkovna
- **France:** Colissimo, Mondial Relay, Colis Prive, GLS
- **Germany:** Deutsche Post, DHL, DHL Express, Swiship, Hermes, GLS
- **Greece:** ACS Courier
- **India:** DTDC, India Post, Delhivery, Gati KWE, Professional Couriers, XpressBees, Ecom Express, Ekart, Shadowfax, Bluedart
- **Ireland:** Fastway, DPD Ireland
- **Italy:** BRT, GLS Italy
- **Netherlands:** DHL Parcel, DPD
- **Norway:** Bring
- **Poland:** Inpost
- **Spain:** SEUR
- **Turkey:** PTT, Yurtici Kargo, Aras Kargo, Surat Kargo
- **United Kingdom:** Evri, DPD UK, Parcelforce, Yodel, DHL Parcel, Tuffnells
- **United States:** GLS, Alliance Air Freight, Pilot Freight, LSO, Old Dominion, Pandion, R+L Carriers, Southwest Air Cargo

Poland gets one entry. A Polish merchant shipping with DPD, DHL Parcel or Pocztex is in the same position as the merchant whose thread started this article.

Capitalisation matters if you are sending fulfilments through an app or a script rather than typing them. The carrier name has to match Shopify's spelling exactly or the link is not built.

## What Other changes on the screen

Choosing **Other** adds a field. That is the visible difference.

![The Shopify fulfilment screen with Other selected, showing an extra Tracking URL field asking for a valid tracking page link](/images/blog/shopify-shipping-carriers-tracking-url/02-other-tracking-url-field.png)

**Tracking URL**, with the placeholder "Enter valid tracking page link". Shopify wants the finished address, already carrying the number.

Nothing on that screen remembers what you typed last time. There is no default, no recent list and no pattern to save. Every order starts the field empty, which is why the job feels heavier than it is.

## Pick a listed carrier and the field goes away

Switch the same order to a carrier Shopify knows and the Tracking URL field disappears.

![The same fulfilment screen with DPD selected, with only a tracking number field and no Tracking URL field](/images/blog/shopify-shipping-carriers-tracking-url/03-listed-carrier-number-only.png)

Tracking number, carrier, done. Shopify builds the rest.

This is the whole reason to test the parent brand entry before building a workaround. One field beats two, and it costs one parcel to find out.

## Getting prefix plus number without a setting

If the listed carrier does not resolve your parcels, you can still stop typing the link. The prefix lives in a spreadsheet instead of in Shopify.

Every tracking link is the same two parts: a fixed address, then your number on the end.

```
https://tracktrace.dpd.com.pl/parcelDetails?typ=1&p1=00015206181534
[--------------- fixed prefix ----------------][--- your number ---]
```

So build it in a sheet:

1. Column A holds the order number.
2. Column B holds the tracking number, which is the only thing you type.
3. Column C holds a formula that joins your prefix to column B. In Google Sheets or Excel that is `="https://tracktrace.dpd.com.pl/parcelDetails?typ=1&p1="&B2`, with your own courier's address in place of that one.
4. Fill the formula down the column once. It builds every link from then on.

Then upload the sheet with a bulk fulfilment app, which takes a CSV of orders, tracking numbers and tracking links and writes them into Shopify in one go. Search the Shopify App Store for "bulk fulfill" and you will find several, most with a free tier for low volumes.

You have the prefix behaviour you wanted. It just lives one screen to the left.

**Where to find your courier's prefix:** track one real parcel on your courier's own website, then copy the address out of the browser bar and delete the tracking number off the end. What is left is the prefix.

## The better fix: stop fulfilling in the admin

Typing tracking numbers into Shopify by hand is the step worth removing, not the link.

Most couriers outside the Shopify Shipping countries are reached through a shipping platform. You create the label there, and the platform writes the tracking number and the tracking link back into the Shopify order over the API. The order goes from unfulfilled to fulfilled without anybody opening the fulfilment screen.

In Poland that means the local platforms on the App Store, such as Apaczka, Furgonetka or Sendit. Elsewhere the same category exists under different names. Search the App Store for your courier by name first, because national couriers often publish their own app.

Two things to check before installing one:

- Does it write the **tracking link** back, or only the number? Some only send the number, which leaves you where you started.
- Does it support the specific national arm you use? "DPD" in an app listing does not always mean DPD Poland.

## If the tracking link still does not work

A few failure modes come up repeatedly.

**The number is right but the page says not found.** The parcel is usually not in the courier's system yet. Most couriers publish scan data a few hours after the label is created, not at the moment of creation.

**The link goes to a search page instead of the parcel.** Your prefix is the search page address, not the parcel address. Track a real parcel, wait for the page that shows that parcel's history, and copy the address from there.

**The number is not clickable at all.** Either the carrier is Other with the URL field left empty, or the carrier field is blank. Open the order, use **Edit tracking** on the fulfilment, and set both.

**The customer's email had no tracking button.** The shipping confirmation carries whatever tracking details existed at the moment you fulfilled. Adding the link afterwards updates the order page, not the email that already went out. Fix the tracking first, then resend the shipment details from the fulfilment menu.

## Carrier, tracking number, tracking URL

These three fields get mixed up, and the difference decides whether the link works.

- **Tracking number** is the courier's reference for the parcel. It is the only part that changes per order.
- **Shipping carrier** tells Shopify which courier's address pattern to use. Picking a recognised name is what makes the number clickable without any further input.
- **Tracking URL** is the finished web address for that one parcel. Shopify only asks for it when it cannot build it, which means when the carrier is Other.

Fill in the first two and let Shopify handle the third wherever you can. Fill in all three only when you have to.

## What to do now

1. Open any unfulfilled order and type your courier's name into **Shipping carrier**. Check whether the parent brand is listed.
2. If it is, fulfil one parcel with it and click the tracking number to see where it lands.
3. If it does not resolve, look for your courier's own app or a local shipping platform on the App Store, so the number and the link are written for you.
4. If you are staying in the admin, move the prefix into a spreadsheet formula and fulfil in bulk from a CSV.

None of these is a custom carrier setting, because Shopify does not have one. All three remove the pasting.


---

---
title: Shopify Shipping Rates Wrong for Multiple Items (Fixed)
description: A customer adds a second item and the shipping quote drops. Here is why Shopify stops using the package you assigned to a product, and the two settings that put the rate back where it belongs.
---

## The problem

A customer buys one heavy item and Shopify quotes a sensible shipping price. The same customer adds a small item to the cart and the quote goes down. Not up, down. You are now shipping more weight for less money, and the difference comes out of your margin.

I ran into this while answering a merchant on the Shopify Community. They sell around 6,000 products, from quarter ounce packets of herbs up to five pound crystal specimens. They had carefully set a package on every single product. Mixed orders were still being priced in a bubble mailer.

I reproduced it on a test store with USPS rates turned on, shipping from California to New York.

- One 5 lb specimen on its own, with a 12 x 10 x 8 inch box assigned to it: **USPS Ground Advantage $16.85**
- The same specimen plus one 0.25 oz packet of herbs: **$9.54**

Adding a second item made shipping $7.31 cheaper.

![One heavy item on its own quotes $16.85 on USPS Ground Advantage](/images/blog/shopify-shipping-rates-multiple-items/02-one-heavy-item-alone-ground-advantage.png)

![Adding one 0.25 oz packet drops the same service to $9.54](/images/blog/shopify-shipping-rates-multiple-items/03-adding-a-small-item-drops-the-rate.png)

## Why it happens

Shopify does have a Package field on each product. Open any product, scroll to the Shipping section, and it sits next to Product weight.

That field only applies when the order contains exactly one item.

Hover the small information icon beside it and Shopify says so in four words: *Used for single-item orders containing this product.*

![The Package field on a Shopify product, with the tooltip reading "Used for single-item orders containing this product"](/images/blog/shopify-shipping-rates-multiple-items/01-product-package-single-item-orders-only.png)

The moment an order has more than one item, Shopify ignores every per-product package and prices the whole order in one box: your **store default package**. That is a single setting for the entire shop.

Two things follow from that, and they catch people out.

**Quantity counts as multiple items.** Two of the same 0.25 oz packet is a multi-item order. On my test store, one packet quoted $5.97 and two packets quoted $8.13, because the second one pushed the order out of its own mailer and into the store default box.

**Setting a package on every product does nothing for mixed carts.** If most of your orders contain more than one line, most of your rates never touch those settings. The merchant with 6,000 products had done a lot of work that only ever applies to single-item orders.

## Before you change anything: which kind of rate are you on?

The fix only matters if Shopify is working out your shipping price from a box and a weight. Check **Settings > Shipping and delivery > Shipping profiles**, open your profile and look at the rates in your domestic zone.

- A rate showing a fixed price like $8.00 is a **flat rate**. You typed that number in and Shopify charges it regardless of what is in the cart. Packages have no effect on it.
- A rate marked **Calculated** is a live quote from USPS, UPS, FedEx or another carrier. Shopify sends them the order weight and the box dimensions, and they send back a price. This is the one the package feeds.
- A rate set by **Package weight** is priced from bands you define by weight. Packages affect these too, but only through the weight of the box itself, not its size.

If everything in your domestic zone is a flat rate, your rates are not wrong because of packages. Skip to the weight bands section further down, which is usually the better setup for a catalogue with a wide range of sizes.

## The fix: point the store default at the box you actually use

One setting does most of the work.

### 1. Find your current default

Go to **Settings > Shipping and delivery**, then open the **Packages** section. Every saved package is listed, and exactly one carries a **Store default** badge.

![The Packages section of Shopify shipping settings, with the Store default badge on one package](/images/blog/shopify-shipping-rates-multiple-items/04-packages-store-default-badge.png)

That badge is the box every multi-item order in your shop is priced in. If it is sitting on your smallest mailer, every mixed order is being quoted as though it ships in a mailer.

### 2. Move the badge to a realistic box

Pick the box you reach for most often on a normal mixed order. Not the smallest mailer, not the largest carton you own. On the package you want, open the **...** menu and choose **Set as default**.

![The Set as default option in the package menu in Shopify shipping settings](/images/blog/shopify-shipping-rates-multiple-items/05-set-package-as-store-default.png)

Saving takes effect immediately. There is nothing to publish.

### 3. Check that box's empty weight while you are there

Each package stores a **Weight (empty)** value. Shopify adds it to the order weight before asking the carrier for a price, so a heavy box raises every multi-item quote in the shop.

![The Weight (empty) field in the Shopify add package dialog](/images/blog/shopify-shipping-rates-multiple-items/06-package-empty-weight-field.png)

It matters more than it looks. My test box weighed 0.75 lb empty. Two 0.25 oz packets of herbs weigh half an ounce between them, but with that box added the order was treated as weighing over three quarters of a pound. Weigh your box on a kitchen scale and put the real number in.

### 4. Leave your per-product packages alone

They are not wasted. Single-item orders still use them, and for most catalogues that is a large share of orders. A lone herb packet kept quoting $5.97 after I changed the default, because that order has one item and still uses its own mailer.

Here is the same two item cart after the default was moved to the 12 x 10 x 8 box.

![The same cart of two items now quoting $16.85 on Ground Advantage](/images/blog/shopify-shipping-rates-multiple-items/07-same-cart-correct-rate.png)

$16.85 again, matching what the heavy item costs on its own.

## The setup that scales: price by weight instead

Changing the default fixes the worst error. It does not fix the underlying problem, which is that one box has to represent every possible mixed order. If your products range from an envelope to a carton, no single box is right for all of them.

The way out is to stop letting the box decide. Price the order on its own weight.

In your domestic zone, choose **Add shipping option**, set **Rate type** to **Package weight**, then add one band per weight range. Each band has a minimum weight, a maximum weight and a price.

![Weight based shipping bands set up on the domestic zone of a Shopify shipping profile](/images/blog/shopify-shipping-rates-multiple-items/08-weight-based-shipping-bands.png)

The ladder I used on the test store:

| Order weight | Price |
| --- | --- |
| 0 to 0.5 lb | $5.95 |
| 0.5 to 1 lb | $7.95 |
| 1 to 2 lb | $9.95 |
| 2 to 5 lb | $13.95 |
| 5 to 10 lb | $18.95 |
| 10 lb and up | $24.95 |

Three things make this worth the setup time on a large catalogue.

- Nothing is configured per product. Six thousand products need six thousand correct weights, which you need anyway, and zero package assignments.
- Every order is priced on what it actually weighs, so a big mixed order costs more than a small one. That is the behaviour merchants expect and rarely get from a single default box.
- The price is yours. Carrier quotes move around, and a customer who sees $16.85 one day and $9.54 the next loses confidence in the checkout.

The cost is that a weight band charges the same across the country, so a parcel going three states over subsidises one going coast to coast. Set your bands from what you actually pay on an average order rather than a best case, and check them against a month of real labels.

Work out your bands from your own label history before you publish them. Shopify does not suggest numbers.

## Splitting heavy items into their own shipping profile

There is a middle option if only a handful of products are the problem, for example if most of what you sell fits in a mailer and a dozen items need a carton.

A **shipping profile** is a separate set of rates that applies to a chosen list of products. Put the heavy items in their own profile and give them their own rate.

The part worth knowing is how Shopify combines them when a cart contains products from both profiles. **Rates with the same name are added together.** I tested this with a $12.00 rate in a heavy items profile and a $7.95 rate in the general profile, both named the same thing. A cart with one product from each quoted $19.95.

One catch to watch for. Any rate name that exists in only one of the two profiles disappears from mixed carts entirely. In my test the carrier rates and the express option were all in the general profile, and the mixed cart showed one option instead of five. Whatever names you use, create them in every profile.

## Why a bigger box sometimes costs the same

Worth knowing before you agonise over box sizes. Carriers do not price small parcels purely by weight.

On my test store, USPS Ground Advantage in the 12 x 10 x 8 inch box quoted $16.85 for a 5 lb order, $16.85 for 10 lb and $16.85 for 15 lb. At 25 lb the price jumped to $82.80. Under a certain size and weight, USPS prices the parcel by how much space it takes up, not what it weighs, so the dimensions you declare matter far more than they seem to.

That is another argument for getting the default package right rather than guessing. The box you declare can move the price into a completely different pricing regime.

## Can I assign a package in bulk, or through an app I write?

Not through Shopify's own tools. The package on a product is only editable one product at a time in the admin. There is no bulk editor column and no CSV field for it.

It is not available to developers either. As of the 2025-10 admin API, packages can be updated, deleted or set as default, but not created, and a product has no package field at all. Anyone building an internal tool to push package assignments across a catalogue will find there is nothing to push to.

Given that per-product packages only apply to single-item orders anyway, this matters less than it first appears.

## If the rate still looks wrong

**The quote did not change after I moved the default.** Shipping quotes are cached per cart for a short time. Empty the cart and add the items again, or test in a private window.

**No carrier rates appear at all.** Carrier quotes need a complete origin address. Under **Settings > Locations**, open the location that fulfils your online orders and check it has a street, a city, a state and a postcode. Mine returned no carrier options at all until the shop location had a full address.

![The address on a Shopify location, under Settings then Locations](/images/blog/shopify-shipping-rates-multiple-items/09-location-origin-address.png)

**The rate is right in the cart and wrong at checkout.** Cart page estimates on many themes use a simplified calculation. The checkout number is the real one.

**A small order is being charged too much.** Check the empty weight of your default package. A carton weighing three quarters of a pound will push a two ounce order into a higher band.

**I want free shipping over a threshold on top of this.** That is a separate setting and it interacts with discount codes in ways that catch people out. We covered it in [how to offer free shipping on Shopify](/blog/shopify-free-shipping).

## Package, weight and profile: which does what

These three settings get mixed up constantly, so here is the division of labour.

- **Product weight** is the weight of the item itself, with no packaging. It is used on every order, single or multiple, and it should be accurate on every product. This is the one worth auditing first.
- **Package** is a box or mailer with dimensions and an empty weight. A package set on a product is used for single-item orders of that product. The store default package is used for everything else.
- **Shipping profile** decides which rates a product is eligible for at all. It has nothing to do with boxes, and it is the lever for treating one part of a catalogue differently from the rest.

If only one of those is wrong on your store, it is usually the default package, because it was set once when the shop was new and never looked at again.

## What to do

1. Find the package carrying the Store default badge, using the steps above.
2. Move that badge to the box you use for a typical mixed order.
3. Put the real empty weight of that box on it.
4. If your catalogue spans envelopes to cartons, add weight bands to your domestic zone and stop depending on the box at all.
5. Leave per-product packages in place. They still price single-item orders.


---

---
title: "Shopify Shipping Zones: Fix Products Sold Out in One Country"
description: Products show Sold out for customers in one country while your admin shows stock. The cause is a shipping profile with no zone for that country. Here is how Shopify shipping zones and profiles decide what a customer can buy, and how to fix it in six clicks, with screenshots.
---

## The problem: sold out in one country, in stock everywhere else

A UK merchant asked about this on the Shopify Community. Their admin showed stock for a group of products. They could add those products to the basket themselves. Then a customer in Ireland sent a screenshot of the same products marked Sold out.

The quantities were not zero. The merchant had recently added Ireland as a country they ship to. They wanted to know which setting they had missed.

Three replies in the thread gave long checklists: markets, locations, inventory, catalogs. Each item on those lists is a real setting. None of them told the merchant which one to open first.

I rebuilt the problem on a test store. A tote bag with 25 in stock showed Add to cart for UK visitors and could not be bought from Ireland. One setting fixed it: the shipping zone inside the product's shipping profile.

![Before: the product page for a visitor from Ireland, with the buy button disabled although 25 are in stock](/images/blog/shopify-shipping-zones-sold-out-by-country/01-before.png)

![After: the same product page for a visitor from Ireland, now showing Add to cart](/images/blog/shopify-shipping-zones-sold-out-by-country/02-after.png)

## How Shopify decides a product is sold out for a customer

Shopify does not only ask "is there stock?" It asks "is there stock this customer can receive?"

To answer that, it looks at three things together:

- **The customer's market.** A market is a group of countries you sell to, set up under Settings > Markets. Each visitor is placed in one market based on their country.
- **The location holding the stock.** A location is any place that holds your inventory, such as your shop, a warehouse or a supplier.
- **The shipping profile of the product.** A shipping profile is a set of shipping rules that applies to a group of products. It says which locations ship those products, and to which countries.

Inside each shipping profile are **shipping zones**. A shipping zone is a list of countries plus the rates you charge to ship there. If a product's profile has no zone covering the customer's country, no rate exists. Shopify then treats the product as unavailable for that customer, even with stock on the shelf.

The button label depends on your theme. Some themes say Sold out, others say Unavailable. Both mean the same thing here.

## Why adding Ireland did not fix it

Most stores start with one profile, the **General profile**. Every product lands there by default. When a merchant adds a new country under Shipping and delivery, they usually add it to the General profile.

Products in a **custom profile** do not see that change. A custom profile is a second profile you create for products that ship differently, such as heavy items, fragile items or print-on-demand goods. Each custom profile has its own zones. Adding Ireland to the General profile leaves every custom profile exactly as it was.

That explains the pattern in the thread. Some products sold to Ireland fine. The products in a separate profile showed Sold out. The UK kept working because the custom profile already had a UK zone.

## Check this first: which profile holds the product?

Go to **Settings > Shipping and delivery**. The Shipping profiles card lists every profile, with how many products and zones each one has.

![The Shipping profiles card, listing the General profile and the custom profiles with their product and zone counts](/images/blog/shopify-shipping-zones-sold-out-by-country/03-shipping-profiles.png)

- If you only see the General profile, open it and check that Ireland (or your new country) sits in a zone with a rate.
- If you see custom profiles too, the sold out products are almost certainly in one of them.

To find a product's profile, open each custom profile and read its product list.

## The fix: add the country to the profile, step by step

These are the same steps I posted on the Community thread, with the same screenshots.

**1. Go to Settings, then Shipping and delivery.**

**2. Click the shipping profile that holds the sold out products.** On my test store it was a custom profile called UK only, with 1 product and 1 zone.

![Settings, Shipping and delivery: the Shipping profiles card with the custom profile highlighted](/images/blog/shopify-shipping-zones-sold-out-by-country/03-shipping-profiles.png)

**3. Click Add zone.** The profile page lists its products, the location it ships from, and its zones. Mine had one zone, United Kingdom, with a Standard rate of $4.95. There was no zone for Ireland.

![The shipping profile page with only a United Kingdom zone, and the Add zone button](/images/blog/shopify-shipping-zones-sold-out-by-country/04-add-zone.png)

**4. Name the zone Ireland, tick Ireland in the country list, and click Done.** You can also add Ireland to an existing zone if you want the same rate as another country.

![The Create new shipping zone dialog, with the zone named Ireland and Ireland ticked](/images/blog/shopify-shipping-zones-sold-out-by-country/05-create-zone.png)

**5. Click Add shipping option under the new Ireland zone.** Enter a name and a price. Shopify also asks for a transit time, and will not let you click Done without one. I used $6.95 and 3 to 5 business days.

![The Add shipping option page with a price of 6.95 and the Done button](/images/blog/shopify-shipping-zones-sold-out-by-country/06-add-shipping-option.png)

**6. Click Save.** The profile now shows two zones, Ireland and United Kingdom, each with its rate.

![The profile with the new Ireland zone and the Save button](/images/blog/shopify-shipping-zones-sold-out-by-country/07-save.png)

About ten seconds after saving, the tote bag showed Add to cart for a visitor from Ireland. Nothing else changed: same stock, same location, same market.

Repeat the steps for every custom profile that holds products you want to sell in the new country.

## Shipping zones vs shipping profiles

These two terms get mixed up, and the Shopify admin puts them on the same page.

| | Shipping profile | Shipping zone |
| --- | --- | --- |
| What it is | A group of products with shared shipping rules | A list of countries inside a profile |
| What it holds | Products, the locations that ship them, and zones | Countries and the rates for them |
| How many | One General profile, plus any custom ones you add | As many as you like per profile |
| Where to edit | Settings > Shipping and delivery | Inside a profile, under Shipping zones |

A zone never exists on its own. Each zone belongs to one profile, for one set of locations. So "we ship to Ireland" is only true per profile.

## Markets and shipping zones work together

Adding a country in Markets and adding it to a shipping zone are two separate jobs.

- **Markets** decide the currency, language and prices a visitor sees, and which products are listed for them.
- **Shipping zones** decide whether a product can actually reach them.

My test store showed one more detail. Before I set up a UK market, UK visitors were placed in the store's main market, the United States. The UK only profile had no US zone, so the tote bag showed as unavailable in the UK as well. Once the UK had its own market, UK visitors saw Add to cart.

So when a product is unavailable in one country, check two things:

- The country sits in an active market under Settings > Markets.
- Every profile holding the products has a zone for that country, with a rate.

## The same rule, used on purpose

Some merchants use this behaviour deliberately. On my test store a wall calendar sits in a profile whose only zone is Australia. Visitors from Australia can buy it. Visitors from the US, the UK and Ireland see it as unavailable.

That is how you limit a product to certain countries without an app. Put the products in their own profile and only add zones for the countries you want to sell them in.

A profile with no shipping rates at all makes products pickup only. I covered that in [how to make a product pickup only on Shopify](/blog/how-to-make-product-pickup-only-shopify).

## Still sold out after adding the zone?

**Is the zone missing a rate?** A zone with no shipping option does not count. The admin shows a warning on zones without rates.

**Is the right location in the profile?** The profile page lists the locations it ships from. If the location holding your stock sits under Not fulfilling from, add it to the profile.

**Does the location sell online?** Under Settings > Locations, the location needs Fulfill online orders turned on. If this is off, the product is sold out in every country, not just one. I covered that case in [Shopify shows sold out but it's in stock](/blog/shopify-shows-sold-out-in-stock).

**Is Managed Markets on for that market?** Shopify Managed Markets will not ship products fulfilled by some apps, such as print-on-demand apps. Customers then see "Shipping not available" at checkout. See [Shopify Managed Markets: shipping not available](/blog/shopify-managed-markets-shipping-not-available).

**Is the product listed in that market?** Under Settings > Markets, open the market and check that its product list includes the item.

**Is the customer on an old page?** A customer who still has the product open may need to refresh it. On my test store the change showed up within ten seconds of saving.

## How to test what a customer in another country sees

You do not need a VPN to check. Add `?country=IE` to the end of a product link, using the two-letter code of the country you want to test. For example:

`your-store.com/products/linen-tote-bag?country=IE`

The page loads as a visitor from Ireland would see it, including their market's currency and the product's availability. Swap `IE` for `GB`, `US` or any other code to compare.

## Common questions

**Does adding a country in Markets turn on shipping to it?**
No. Markets control what the visitor sees. Shipping zones control whether the order can be delivered. You need both.

**Do I need a separate zone for every country?**
No. One zone can hold many countries with the same rate. A single "Europe" zone with Ireland, France and Germany works.

**Why does the General profile not cover every product?**
Products moved into a custom profile leave the General profile. They follow only the zones of their new profile.

**Can one product be in two profiles?**
No. Each product variant belongs to one shipping profile at a time.

---

This article is based on my answer to a question on the Shopify Community: <a href="https://community.shopify.com/t/products-show-as-sold-out-for-customers-in-ireland-but-i-have-stock/688952" rel="nofollow">Products show as sold out for customers in Ireland, but I have stock</a>.


---

---
title: "Show a Discount on the Shopify Product Page"
description: "An automatic discount is invisible on the product page until the cart. Here is a tag-driven badge that shows the discounted price on the page itself, and matches checkout exactly."
---

## The problem

You set up an automatic discount. 20% off. It works perfectly at checkout.

And the product page still says the full price.

The shopper has no idea the promotion exists until they have already added to cart, which is exactly the moment you needed them convinced. Every sale you lose there is a sale the discount was supposed to win.

I reproduced this on a test store and built the fix that closes it. The result shows the discounted price on the product page and matches the checkout to the paisa.

## Why Shopify does not do this for you

This is not a theme problem and it is not a setting you have missed.

Automatic discounts are evaluated **on the cart**. Liquid, the template language your product page is built in, has no access to them. There is no `product.discount` object, no `product.automatic_discount`, nothing. Shopify does not know which discounts apply to a product until there is a cart with that product in it, because discounts can depend on quantity, cart total, customer and market.

So the product page cannot ask "is this on offer?" and get an answer. It has to be told.

That is why "which app shows the discount on the product page" is such a busy question in the forums. The apps are not doing anything magic. They are being told, the same way the fix below is told.

## The mechanism: one tag drives everything

The design that works is to make **one product tag** the single source of truth:

1. The tag defines an **automated collection**.
2. The collection scopes the **discount**.
3. The same tag switches on the **badge** on the product page.

There is one switch. Tag a product and it joins the promotion, gets discounted at checkout, and starts showing the badge. Untag it and all three stop together.

That matters more than it sounds. The usual homemade version of this badge is hard-coded text, which drifts the moment someone edits the discount, and then your product page is advertising a promotion that no longer applies. With one tag there is nothing to drift.

## Step 1: tag the products

Pick a tag name for the promotion. I used **`promo-20`**.

Open each product in the promotion and add the tag, or select them all on the Products list and use **Add tags** for a batch.

## Step 2: build the collection from the tag

Go to **Products → Collections → Create collection**. Name it something like "Promo eligible", and choose **Automated**.

Set one condition:

**Tag** - **is equal to** - `promo-20`

Save. Every tagged product falls in, and anything you tag later joins automatically.

### Watch the sales channel

New collections are created **published to zero channels**, and you can see the count on the collection page.

![The collection page showing the sales channel popover with 0 channels and Online Store toggled off](/images/blog/shopify-show-discount-on-product-page/04-collection-published-to-zero-channels.png)

For the **discount** this does not matter, and you can leave it unpublished if you do not want shoppers browsing the collection. But if you ever plan to link to it, or to write Liquid that reads it, publish it to the Online Store here.

Which leads to the part that cost me the most time on this build.

### Do not drive the badge from product.collections

My first version checked whether the product was in the promo collection, using `product.collections` in Liquid. It rendered nothing at all.

A debug block explained why. On a product that was definitely in the new collection, Liquid returned this:

```
DEBUG collections: [tops-and-shirts] | count=1
```

One collection, a long-standing one, and no sign of the collection I had just made, even after publishing it to the Online Store.

A **tag** has no such problem. `product.tags` is available immediately and does not depend on collection indexing. So the badge reads the tag, and only the discount reads the collection.

## Step 3: point the discount at the collection

Create your automatic discount as normal. Under **Applies to**, choose **Specific collections** and pick the collection you just built.

Choosing a collection rather than "All products" matters for a second reason: a percentage against "All products" is treated as an **order** discount and shows as one lump against the cart, while a collection-scoped one is a **product** discount and shows per line item, which is what makes the numbers on the product page match what the shopper sees later.

## Step 4: add the badge to the product page

In **Online Store → Customize**, switch the top dropdown to a **Product** template. In the left panel, open the **Product information** section, click **Add block**, choose **Custom Liquid**, and drag it to sit directly under the **Price** block.

![The Shopify theme editor on a product page, with Product information and Custom Liquid in the section list on the left, and the finished discount badge showing under the price](/images/blog/shopify-show-discount-on-product-page/03-theme-editor-product-badge.png)

Paste this in and press Save.

```liquid
{%- assign promo_tag = 'promo-20' -%}
{%- assign promo_percent = 20 -%}

{%- if product.tags contains promo_tag -%}
  {%- assign price = product.selected_or_first_available_variant.price -%}
  {%- assign saving = price | times: promo_percent | divided_by: 100 -%}
  {%- assign after = price | minus: saving -%}
  <div class="promo-badge">
    <span class="promo-badge__pill">Save {{ promo_percent }}%</span>
    <span class="promo-badge__text">
      {{ after | money }} in the cart. Discount applied automatically at checkout.
    </span>
  </div>
  <style>
    .promo-badge { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
      margin: 0 0 1.2rem; padding: 0.8rem 1rem; border-radius: 0.6rem;
      background: rgba(var(--color-foreground), 0.06); }
    .promo-badge__pill { flex: none; padding: 0.3rem 0.8rem; border-radius: 999px;
      font-size: 1.2rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
      background: rgb(var(--color-button)); color: rgb(var(--color-button-text)); }
    .promo-badge__text { font-size: 1.4rem; }
  </style>
{%- endif -%}
```

Two values at the top are yours:

- **`promo_tag`** must match the tag exactly, including case.
- **`promo_percent`** must match the discount. This is the one number that exists in two places, so change both together.

The price maths uses `selected_or_first_available_variant`, so a product with variants shows the figure for the variant currently selected.

## What it looks like

Tested on Dawn. A tagged product, priced Rs. 40.00:

![A Shopify product page showing Rs. 40.00 with a SAVE 20% pill underneath reading Rs. 32.00 in the cart, discount applied automatically at checkout](/images/blog/shopify-show-discount-on-product-page/01-badge-on-product-page.png)

The badge sits directly under the price: a **SAVE 20%** pill and the line "Rs. 32.00 in the cart. Discount applied automatically at checkout."

A product without the tag shows nothing at all:

![The same theme on an untagged product, showing only Rs. 60.00 with no badge](/images/blog/shopify-show-discount-on-product-page/02-no-badge-on-excluded-product.png)

That second screenshot matters as much as the first. The badge cannot leak onto items outside the promotion, because it is gated by the same tag that scopes the discount.

## Proving the number is real

A badge that promises a price the checkout does not honour is worse than no badge. So, both products in one cart:

![Checkout showing the tee reduced from 40.00 to 32.00 by STOREWIDE 20% OFF, the jacket untouched at 60.00, subtotal 92.00 and savings 8.00](/images/blog/shopify-show-discount-on-product-page/03-checkout-matches-the-badge.png)

- Harbour Cotton Tee: **Rs. 40.00 → Rs. 32.00**, labelled "STOREWIDE 20% OFF (-Rs. 8.00)"
- Clearance Rain Jacket: **Rs. 60.00**, untouched
- Subtotal Rs. 92.00, total savings Rs. 8.00

The badge said Rs. 32.00. The checkout charged Rs. 32.00. That is the whole objective.

## Why not just use a compare-at price?

You can, and for a permanent price cut you probably should. Set the compare-at price to the old figure and the price to the new one, and every free theme renders a strike-through and a Sale badge with no code at all.

It is the wrong tool for a **promotion**, though, for three reasons:

- You have to edit every product to start it, and edit every product again to end it.
- The real price changes, so your reporting shows the discounted figure as the price rather than as a discount.
- It does not follow rules. "20% off this collection for the weekend" has to be applied by hand, product by product.

If the crossed-out price is what you are actually after, that is covered in [compare at price](/blog/shopify-compare-at-price), including why it sometimes fails to show at all.

## Showing a percentage next to the price instead

Some stores want just "-20%" rather than a sentence. Replace the badge markup with the pill on its own:

```liquid
<span class="promo-badge__pill">-{{ promo_percent }}%</span>
```

If you want that on **collection** pages as well as the product page, the same `product.tags contains` test works inside a product card, but the card is built from a theme file rather than a block you can drop in, so it means editing `snippets/card-product.liquid` rather than adding a Custom Liquid block. That is a theme file edit and it does not survive a theme update, so weigh it up.

## Common problems

**The badge does not appear.** Check the tag matches exactly, including capitals. `Promo-20` and `promo-20` are different strings to `contains`.

**The badge appears but the price is wrong.** `promo_percent` and the discount value have drifted apart. They are two separate numbers and nothing keeps them in sync for you.

**It shows on the wrong products.** The tag is on more products than you thought. Open the automated collection and read the item count; it is the fastest audit.

**The discount is not applying at checkout even though the badge shows.** The badge and the discount are independent. Check the discount is Active, in date, and that another discount is not knocking it out. Two discounts refuse to run together by default, and [combinations](/blog/shopify-discount-combinations) explains the switch.

**The discount shows as one lump instead of per item.** The discount is targeting "All products", which makes it an order discount. Point it at your collection.

## The main points
- Liquid **cannot see automatic discounts**. The product page has to be told, which is all any app is doing.
- Use **one tag** as the single source of truth: tag defines collection, collection scopes discount, tag gates the badge.
- Build the collection as **Automated**, condition **Tag is equal to** your tag.
- Do **not** drive the badge from `product.collections` - in testing it returned only a long-standing collection and missed the new one. `product.tags` is immediate and reliable.
- Add the badge as a **Custom Liquid block** under the Price block. No theme file edited.
- Verified on Dawn: badge said Rs. 32.00 off a Rs. 40.00 tee, checkout charged Rs. 32.00, and an untagged Rs. 60.00 product showed no badge and paid full price.


---

---
title: How to Show Shopify Variants as Separate Products
description: Shopify's new collection variant rules surface one card per product, not one per colour. Here is the workaround that gives you a card per colour and still links them, tested on a live store.
---

## The problem: one product, one card, no matter how many colours

You sell a tee in four colours. On the collection page you want four cards, one per colour, the way every fashion retailer does it.

Shopify shows one.

The 2026 collections release added **variant-targeting rules**, which looked like the answer. You can build a collection that says "show the Rose colour" and it works. One colour, one card, correct image.

Then you ask for two colours and it stops behaving.

A merchant documented this carefully on the Shopify Community and the findings are worth repeating, because they define the shape of the problem:

- **Target one variant option** and it works exactly as expected.
- **Target two options in one rule set** and the front end still renders a single card. Both options appear in the filter. The product count reads 2, which is technically correct but not what anyone wants to see.
- **Build two single-variant collections and combine them** with collection rules and Shopify surfaces the products as-is, with every option back in the filter.

So the rules select **products**, and the variant targeting decides which variant's image represents that product. It does not multiply the product into one card per variant.

I reproduced this on a development store and built a workaround that does produce a card per colour. It is not a theme tweak. It is a modelling change, and it comes with real trade-offs that I will be direct about.

![Four colour cards in a collection, one per colour](/images/blog/shopify-show-variants-as-separate-products/01-four-colour-cards-in-collection.jpeg)

## Why Shopify works this way

Worth understanding, because it tells you which fixes are impossible.

In Shopify's data model, the **product** is the unit that appears in a collection. A collection is a list of products. Variants are options *inside* a product, not members of a collection.

Everything downstream inherits that. Collection pagination counts products. The product count reads products. `collection.products` in Liquid is a list of products. A theme looping over that list can only render what the list contains.

Variant targeting did not change the model. It changed **which variant's image and price a product card shows**. That is a presentation hint attached to a product entry, not a way to put four things in a list that holds one.

This is why no theme setting, no app that only touches CSS, and no clever Liquid inside the product loop can give you four cards from one product. The loop runs once. You cannot render four cards from one iteration without breaking the count, the pagination, and the filters all at once.

If you want four cards, you need four products.

## The approach: four products, made to feel like one

Split the tee into four products, one per colour. Group them with a tag. Then add a colour switcher on the product page so shoppers can move between them without going back to the collection.

That last part is what makes this acceptable rather than annoying. Four separate products with no link between them is a worse experience than one product with a colour picker. Four products **with** a switcher is close to what large retailers actually ship, and it is why their colour pages rank separately.

**Duplicate your theme before editing.** Online Store > Themes > ... > Duplicate.

## Step 1: one product per colour, grouped by tag

Create a product per colour. Name them consistently, with the colour after a separator:

- `ZZ Demo Tee - Sand`
- `ZZ Demo Tee - Rose`
- `ZZ Demo Tee - Pine`
- `ZZ Demo Tee - Rain`

The separator matters. The switcher code reads the colour name out of the title by splitting on `-`, so keep the pattern identical across the group.

Give all four the same tag. Something namespaced and obviously internal, like `zz-demo-tee-group`.

Then create a **smart collection** with the condition **Tag is equal to `zz-demo-tee-group`**.

![A smart collection built from a tag rule, showing all four colour products](/images/blog/shopify-show-variants-as-separate-products/03-smart-collection-tag-rule.jpeg)

Four products, four cards, each with its own image. The collection page now looks the way you wanted.

Two notes on this step:

- Use a **smart collection**, not a manual one. New colours join automatically when you tag them.
- The tag is doing double duty. It builds the collection, and in step 2 it is how each product finds its siblings.

## Step 2: link the products with a colour switcher

Now the product page. One new snippet, one line in an existing file.

### 2a: create snippets/color-switcher.liquid

Create the file and paste:

```liquid
{%- assign collection_handle = 'zz-demo-tee-group' -%}
{%- assign siblings = collections[collection_handle] -%}
{%- if siblings != blank and siblings.products_count > 1 -%}
  <div style="margin:0 0 1.5rem;">
    <p>Colour: <strong>{{ product.title | split: ' - ' | last }}</strong></p>
    <div style="display:flex;gap:1rem;flex-wrap:wrap;">
      {%- for sib in siblings.products -%}
        {%- assign cname = sib.title | split: ' - ' | last -%}
        {%- assign hex = '#cccccc' -%}
        {%- case cname -%}
          {%- when 'Rain' -%}{%- assign hex = '#6f8faf' -%}
          {%- when 'Pine' -%}{%- assign hex = '#2f5d43' -%}
          {%- when 'Rose' -%}{%- assign hex = '#c67b8e' -%}
          {%- when 'Sand' -%}{%- assign hex = '#cdb891' -%}
        {%- endcase -%}
        {%- if sib.id == product.id -%}
          {%- assign bd = '#111' -%}
        {%- else -%}
          {%- assign bd = '#ddd' -%}
        {%- endif -%}
        <a
          href="{{ sib.url }}"
          title="{{ cname }}"
          aria-label="{{ cname }}"
          style="width:4.4rem;height:4.4rem;border-radius:50%;background:{{ hex }};display:inline-block;border:3px solid {{ bd }};"
        ></a>
      {%- endfor -%}
    </div>
  </div>
{%- endif -%}
```

![The colour switcher snippet](/images/blog/shopify-show-variants-as-separate-products/04-color-switcher-snippet.jpeg)

Three things to change for your store:

- **Line 1** is the collection handle, which is the slug in the collection's URL after `/collections/`. Here it matches the tag, which keeps things simple, but it does not have to.
- The **`case` block** maps colour names to hex values. Add a `when` for each colour you sell. Anything unmatched falls back to grey, so a missing entry degrades without breaking the page instead of breaking the page.
- The **`split: ' - '`** separator must match your product titles exactly, spaces included.

The `bd` variable draws a dark ring around the swatch for the product you are currently on. That is the "you are here" state, and without it shoppers lose track of which colour they are looking at.

### 2b: render it on the product page

In `sections/main-product.liquid`, add one line where you want the swatches, inside the product info column:

```liquid
{% render 'color-switcher' %}
```

![The render line added to main-product.liquid](/images/blog/shopify-show-variants-as-separate-products/05-render-colour-switcher-in-main-product.jpeg)

Put it above the variant picker if you have other options like size, so the flow reads colour first, then size.

The result: each colour is its own product and its own URL, and the swatches move between them.

![The colour switcher on the product page with the active colour ringed](/images/blog/shopify-show-variants-as-separate-products/02-colour-switcher-on-product-page.jpeg)

## The trade-offs, stated plainly

This is a real modelling change and it is not free. Know what you are taking on.

**Inventory is now per product.** Four products means four inventory records instead of one product with four variants. If your 3PL, ERP or POS assumes one SKU per product, check that first.

**Reviews and metafields fragment.** Reviews attach to a product. Split into four and you have four review counts instead of one. Some review apps support grouping. Many do not.

**Every colour is a separate URL.** This is the main reason retailers do it: four pages that can each rank for "green tee" rather than one page competing with itself. It also means four sets of images, descriptions and SEO fields to maintain.

**The switcher is manual.** Adding a fifth colour means a new product, the tag, and a new `when` line in the `case` block. Miss the last one and the swatch renders grey.

**"Add to cart" adds one colour.** Which is correct, but different from a variant picker where the choice happens in place.

If those are acceptable, this works well. If inventory or reviews are dealbreakers, read the next section instead.

## The alternative: Combined Listings

If you are on **Shopify Plus**, use the free **Combined Listings** app instead of the switcher.

The model is the same, one product per colour, but Shopify handles the grouping natively. You nominate a parent product and attach the children. The storefront renders a real option picker, the URLs stay separate, and you do not maintain a `case` block.

That is strictly better than the Liquid switcher. The only reason this article leads with the switcher is that Combined Listings is Plus-only, and most people asking this question are not on Plus.

If you are on Plus, do steps 1 and 1 only, then set up Combined Listings and skip step 2 entirely.

## What about a filter app?

Apps like Boost AI Search & Filter and Globo Smart Product Filter build their own variant-level index and can show variants as separate cards without splitting your products.

That is a genuinely different trade: you keep one product, one inventory record, one set of reviews, and you pay monthly for an app that renders your collection page.

Choose the app if:

- Your catalog is large and splitting products would multiply it uncomfortably.
- Inventory or reviews cannot fragment.
- You want this behaviour on filters too, not just the grid.

Choose separate products if:

- You want each colour to have its own indexable URL. An app rendering cards client-side does not give you that.
- You do not want a recurring cost or another script on the collection page.
- The number of colour groups is small enough to maintain by hand.

The SEO point is the one people usually miss. A filter app changes what shoppers see. Separate products change what Google sees. Those are not the same goal, and only you know which one you are actually after.

## What I confirmed on the test store

The original finding holds: Shopify's variant-targeting rules select products and choose a representative variant. They do not expand one product into several cards, and combining two single-variant collections does not either. That is the data model, not a bug, and it is unlikely to change.

The workaround produced what was actually wanted:

- **Four products, four cards**, one per colour, each with the right image, in a smart collection driven by a tag.
- **A colour switcher** linking all four, with the current product ringed, from one snippet and one render line.
- **No app**, and nothing that breaks the product count or pagination, because the collection genuinely contains four products.

If you take one thing from this: the reason no setting exists is that a collection is a list of products. Once you accept that, the fix stops being a hunt for a toggle and becomes a decision about how you want to model your catalog.


---

---
title: "Shopify Shows Sold Out but It's in Stock: The Fix"
---

## Why your whole store went sold out at once

Your products show Sold Out on the storefront. Your admin shows stock sitting right there. Customers cannot buy, and you are losing sales while it looks fine from the back office.

A store owner posted this on the Shopify Community, worried they were losing sales by the hour. When every product goes sold out at the same moment, the cause is rarely the products. You did not set each one to zero by hand. The stock exists, it is just not counting toward online orders.

That points at one setting on a location, not at your catalog. A location in Shopify is a place that holds stock, such as your shop, a warehouse, or a supplier. Each location has a switch that decides whether its stock can be sold online. When that switch is off for the location holding everything, the whole store reads as sold out.

I reproduced this on a test store. A product with 25 units in stock flipped to Sold Out the moment its location stopped fulfilling online orders, and came straight back when I turned it on. Here is how to find and fix it.

## First, read the Available column

Open your admin, go to Products, then Inventory.

There are several number columns here, and the difference between two of them is the whole answer. On hand is how many units physically sit at the location. Available is how many a customer can actually buy right now. Those are not the same number.

![The Shopify inventory page, showing the Available column separate from the On hand column](/images/blog/shopify-shows-sold-out-in-stock/01-inventory-available-column.png)

Look at Available, not On hand. What it shows tells you which problem you have:

- Available shows a dash or 0, while On hand has units. Your stock is real, but it is at a location that is not selling online. This is the common case, and the fix is the next section.
- Available shows a positive number, yet the storefront still says Sold Out. Then it is not your inventory at all. It is your theme or an app, covered further down.

Reading this column first saves you from changing the wrong thing.

## Turn on the location that holds your stock

Go to Settings, then Locations. Click the location that holds your inventory.

In the Fulfillment section there is a switch labelled "Use inventory at this location to fulfill online orders." If it is off, every product stocked there shows as sold out online. Turn it on and click Save.

![The location settings page with the fulfill online orders switch turned on](/images/blog/shopify-shows-sold-out-in-stock/02-fulfill-online-orders-toggle.png)

That single switch is the fix for most stores. Once it is on and saved, the storefront recalculates, and products with stock at that location become buyable again.

## The default location is always on, so look at the others

There is a detail that decides which location to check. Your default location, the main one Shopify set up first, is always set to fulfill online orders and cannot be switched off. Shopify blocks it on purpose.

![Shopify note explaining the default location always fulfills online orders](/images/blog/shopify-shows-sold-out-in-stock/03-default-location-always-on.png)

So if your stock is all at the default location, this switch is not your problem, and you should jump to the shipping and theme checks below.

The store-wide sold out usually happens when your inventory lives at a second location, such as a warehouse or a supplier's location, and that one has the switch off. Two ways to fix it: turn that second location on, or move the stock to your default location under Products, Inventory.

## Check the shipping profile too

A location can be set to fulfill online orders and still not sell, if no shipping rate reaches it.

Your shipping rates live under Settings, Shipping and delivery. Shopify groups your locations into shipping profiles, which are the sets of rates that apply to them. Any location listed under "Not fulfilling from" has no rates attached, so customers cannot check out with its stock, and the product reads as unavailable.

Add that location into a shipping profile that has rates, and its stock becomes purchasable again.

## When the stock is available but it still says sold out

If Available shows a real number and the storefront still says Sold Out, the inventory side is fine. The problem is in front of it, in your theme or an app.

Your theme is the design layer that decides what the product page shows. A theme can show Sold Out for its own reasons, especially after a recent change.

- Preview a fresh copy of Dawn, Shopify's free default theme. In Online Store, Themes, add Dawn, then use Preview. If the product sells on Dawn, your live theme is the cause, and the theme's developer or support can point to the setting.
- Turn off recently installed apps one at a time. Inventory-sync and dropshipping apps are the usual cause here. They connect an outside stock feed to your store, and when that feed drops or breaks, the app can push every product to zero or hide the buy button.

Work through those two and you will land on which layer is holding the button back.

## How to confirm it is fixed

After you flip the setting, check the storefront rather than the theme editor preview, and check it the way a customer would.

Open your live product page in a private or incognito browser window. That skips your own cached version and any preview state, so you see what a real visitor sees. If the buy button is back, you are done.

The storefront can also hold the old sold out state for a short while after you save, because Shopify caches product pages. If the admin now shows Available with a number but the page still says Sold Out, give it a few minutes and reload the incognito window before assuming the fix did not work.

## If it is sold out in one country only

If the store sells fine for you but shows sold out for buyers in one country, the cause moves from locations to markets. A market is a group of countries you sell to, each shipping from certain locations. When no fulfilling location serves that market, its buyers see sold out while other shoppers buy normally.

That is a separate setup with its own fix. It is worth ruling out here, but the full walkthrough is in our guide on [Managed Markets showing shipping not available](/blog/shopify-managed-markets-shipping-not-available).

## What the inventory columns actually mean

The Inventory page has four number columns, and mixing them up sends people fixing the wrong thing. Here is what each one is.

- On hand: the units physically at the location, whether or not they can be sold.
- Committed: units already promised to orders that are not fulfilled yet.
- Unavailable: units set aside, such as damaged stock or safety stock, that are not for sale.
- Available: what a customer can buy right now. This is On hand minus Committed and Unavailable.

So a product can read On hand 10 and Available 0 at the same time, if those 10 units are all committed or held back. Available is the number the storefront listens to.

## If it is one product, not the whole store

Everything above is for a store-wide sold out. If only one product or one variant is affected, a variant being one version of a product, such as a size or a colour, the checks are narrower.

Open that product and scroll to its Inventory section. Confirm two things. First, that Track quantity is on and the count is above zero. Second, that the stock is assigned to a location that fulfills online orders. A single product often shows sold out because its stock sits only at a location the online store does not sell from, which is the same root cause as the store-wide version, just on one item.

## Does turning off Track quantity fix it

It hides the symptom, and it is the wrong tool for this.

If you turn off Track quantity on a product, the buy button shows no matter what, because Shopify stops counting stock for it. That does get customers buying again. It also means you can oversell, since Shopify will keep taking orders after you run out.

Use it only for made-to-order items you never run out of. For normal stock, fix the location setting instead, so the count stays accurate.

## What to do, in order

A Shopify store that shows sold out with stock in the admin has stock that is not counting toward online orders. Read the Available column first, not On hand. If Available is a dash or 0, turn on "Use inventory at this location to fulfill online orders" for the location holding your stock, the switch shown above under Settings, Locations. If Available shows a real number and it still says sold out, test on a fresh Dawn theme and pause any inventory-sync app.

I tested this on a Dawn store: 25 units in stock, Sold Out with the location's online fulfillment off, and available again the moment it was on.


---

---
title: "Shopify Side Menu: Add a Vertical Navigation Bar"
---

## What a Shopify side menu is, and why the theme fights you

A side menu is a navigation bar that runs down the left edge of the screen instead of across the top. On a desktop it sits as a thin vertical rail. On a phone it usually flips to a fixed bar pinned along the bottom, close to the thumb.

It looks simple. Then you open your theme editor and there is no setting for it.

A merchant asked for exactly this on the Shopify Community. They run the Dawn theme. They wanted the desktop nav vertical on the left, and the mobile nav fixed to the bottom, like a phone app. Two people replied. Both said the same thing: Dawn does not do this, you would need to hire a developer or rebuild the header in code.

That answer is half right. Dawn does not ship the layout. But you do not need to touch theme files or hire anyone. One Custom Liquid section produces the whole thing.

I reproduced it on a Dawn store and the result matches the look they were after. This post walks through what is going on and gives you the exact code.

![A vertical side menu running down the left of a Shopify store on desktop](/images/blog/shopify-side-menu-vertical-navigation-bar/01-shopify-side-menu-desktop.png)

## Why Dawn has no setting for a vertical menu

Dawn's header is one section, and that section is built to be horizontal. Logo on the left, menu across the middle, cart on the right. Every setting in it assumes that row.

There is no toggle that rotates it to a column, because the header's internal layout is fixed in the theme's own code. The settings only let you rearrange pieces inside the horizontal band.

So when the community answers say "Dawn doesn't work that way," they are describing this. The header is a horizontal component and no amount of clicking turns it vertical.

The move is not to fight the header. It is to hide it and lay your own bar on top.

## The one concept that makes this easy: Custom Liquid

Custom Liquid is a section you can add in the theme editor. It accepts HTML, CSS, and Liquid, and it renders wherever you place it.

Two facts about it do all the work here.

It renders **inline**, so a `<style>` tag inside it applies to the live page. You can hide the theme's header and position your own bar without editing a single theme file.

It can live in the **Header group**, which every page loads. Drop the section there once and your new navigation appears site-wide, not just on the home page.

That is the entire trick. Hide the horizontal header with CSS, draw a vertical bar, and pin it with `position: fixed` so it stays put as the page scrolls.

## Add the section

The steps are the same on any Online Store 2.0 theme, Dawn included.

Open your Shopify admin. Go to Online Store, then Themes, and click Customize on your live theme.

In the left panel you will see three groups: Header, Template, and Footer. Under Header, click Add section, then choose Custom Liquid.

![Adding a Custom Liquid section under the Header group in the Shopify theme editor](/images/blog/shopify-side-menu-vertical-navigation-bar/03-add-custom-liquid-section.png)

A settings panel opens with a Liquid code box. Paste the code from the next section into it and click Save.

![Pasting the code into the Liquid code box and clicking Save](/images/blog/shopify-side-menu-vertical-navigation-bar/04-paste-code-save.png)

Because the section sits in the Header group, it now shows on every page of the store.

## The code

Paste this whole block into the Liquid code box.

```liquid
<style>
  :root{ --rail-bg:#f4f0e6; --rail-fg:#1a1a1a; --rail-w:104px; }
  .ck-nav a{ display:flex; flex-direction:column; align-items:center; gap:6px;
    text-decoration:none; color:var(--rail-fg); font-size:12px; }
  .ck-nav svg{ width:22px; height:22px; }
  .ck-rail{ position:fixed; top:0; left:0; height:100vh; width:var(--rail-w); z-index:6;
    display:flex; flex-direction:column; align-items:center; gap:30px;
    padding:26px 0; background:var(--rail-bg); border-right:1px solid rgba(0,0,0,.08); }
  .ck-rail .ck-nav__logo{ margin-bottom:14px; }
  .ck-bar{ display:none; }
  .section-header{ display:none !important; }
  @media (min-width:990px){ body{ padding-left:var(--rail-w); } }
  @media (max-width:989px){
    .ck-rail{ display:none; }
    body{ padding-bottom:78px; }
    .ck-bar{ position:fixed; left:0; right:0; bottom:0; z-index:6;
      display:flex; justify-content:space-around; align-items:flex-end;
      padding:10px 10px 12px; background:var(--rail-bg); border-top:1px solid rgba(0,0,0,.08); }
    .ck-bar .ck-nav__logo{ position:absolute; left:50%; top:-26px; transform:translateX(-50%);
      width:56px; height:56px; border-radius:50%; background:var(--rail-bg);
      display:flex; align-items:center; justify-content:center; box-shadow:0 -3px 8px rgba(0,0,0,.06); }
  }
  .ck-panel{ position:fixed; inset:0; z-index:20; background:var(--rail-bg);
    display:none; padding:80px 24px; overflow:auto; }
  .ck-panel:target{ display:block; }
  .ck-panel__close{ position:absolute; top:22px; right:26px; font-size:30px; text-decoration:none; color:var(--rail-fg); }
  .ck-panel ul{ list-style:none; margin:0; padding:0; max-width:640px; }
  .ck-panel li{ border-bottom:1px solid rgba(0,0,0,.08); }
  .ck-panel a.ck-link{ display:block; padding:16px 0; font-size:22px; text-decoration:none; color:var(--rail-fg); }
  .ck-panel form{ max-width:640px; display:flex; gap:10px; }
  .ck-panel input[type=search]{ flex:1; padding:14px; font-size:18px; border:1px solid rgba(0,0,0,.2); background:#fff; }
  .ck-panel button{ padding:14px 22px; font-size:16px; border:0; background:var(--rail-fg); color:#fff; cursor:pointer; }
</style>

{%- capture nav -%}
  <a href="#ck-menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg><span>Menu</span></a>
  <a href="#ck-search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg><span>Search</span></a>
  <a href="{{ routes.root_url }}pages/wishlist"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M6 3h12v18l-6-4-6 4z"/></svg><span>Wish List</span></a>
  <a href="{{ routes.all_products_collection_url }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></svg><span>Recent</span></a>
{%- endcapture -%}
{%- capture logo -%}
  <a href="{{ routes.root_url }}" class="ck-nav__logo">{% if settings.logo != blank %}<img src="{{ settings.logo | image_url: width: 96 }}" width="48" alt="{{ shop.name }}">{% else %}<span>{{ shop.name }}</span>{% endif %}</a>
{%- endcapture -%}

<nav class="ck-rail ck-nav">{{ logo }}{{ nav }}</nav>
<nav class="ck-bar ck-nav">
  <a href="#ck-menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg><span>Menu</span></a>
  <a href="#ck-search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg><span>Search</span></a>
  {{ logo }}
  <a href="{{ routes.root_url }}pages/wishlist"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M6 3h12v18l-6-4-6 4z"/></svg><span>Wish List</span></a>
  <a href="{{ routes.all_products_collection_url }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></svg><span>Recent</span></a>
</nav>

<div id="ck-menu" class="ck-panel"><a href="#" class="ck-panel__close">&times;</a>
  <ul>{%- for link in linklists['main-menu'].links -%}<li><a class="ck-link" href="{{ link.url }}">{{ link.title }}</a></li>{%- endfor -%}</ul>
</div>
<div id="ck-search" class="ck-panel"><a href="#" class="ck-panel__close">&times;</a>
  <form action="{{ routes.search_url }}" method="get" role="search"><input type="search" name="q" placeholder="Search"><button type="submit">Search</button></form>
</div>
```

## How the desktop side menu works

The rail is a `position: fixed` box glued to the left edge, `100vh` tall. `flex-direction: column` stacks the items down instead of across.

One line pushes the whole store over so nothing hides behind the rail:

```css
@media (min-width:990px){ body{ padding-left:var(--rail-w); } }
```

And one line hides the theme's own header on the desktop breakpoint:

```css
.section-header{ display:none !important; }
```

`.section-header` is the wrapper Dawn puts around its header section. Hiding it clears the horizontal bar so your vertical one is the only navigation on screen.

## How the mobile bottom bar works

Below 990 pixels the rail is hidden and a second bar takes over. It is fixed to the bottom, stretched full width, with the items spread evenly by `justify-content: space-around`.

The logo floats in the middle in a small circle that pokes above the bar, which is the phone-app look the merchant wanted.

![The same navigation as a fixed bottom bar on mobile, with a floating logo in the middle](/images/blog/shopify-side-menu-vertical-navigation-bar/02-shopify-mobile-bottom-nav.png)

`body { padding-bottom: 78px; }` keeps the last bit of every page clear of the bar so it never covers a button or the footer.

## What each button does

Menu and Search work out of the box.

Menu opens a full-screen panel listing your Main menu links. It uses the `:target` CSS trick, so tapping Menu shows the panel and tapping the X hides it, with no JavaScript at all.

![Tapping Menu opens a panel with the store's main menu links](/images/blog/shopify-side-menu-vertical-navigation-bar/05-side-menu-overlay.png)

Search opens a panel with a search box that posts to your store's search page.

Wish List and Recent are wired as plain links so the four-item layout is complete. Dawn has no native wishlist or recently-viewed feature, so those two are placeholders. Point Wish List at a wishlist app, or swap those two links for Cart and Account. They are ordinary anchor tags, so you change the destination by editing the `href`.

## Make it yours

Three values at the top of the code control the look.

`--rail-bg` is the bar's background color. `--rail-fg` is the text and icon color. `--rail-w` is the desktop rail width in pixels. Change those and both the desktop rail and the mobile bar update together.

Your logo comes from Theme settings, then Logo. Once it is set, it appears in the rail and inside the mobile circle automatically. With no logo set, the store name shows as text instead.

To rename an item, edit the `<span>` label. To change where it goes, edit its `href`. The menu you see in the Menu panel is your existing Main menu, so manage those links the normal way under Navigation, no code needed.

## Should the top header stay or go

This code hides the header everywhere so the side menu is the only navigation, which is what most people asking for this layout want.

If you would rather keep the announcement bar at the top, leave it. The announcement bar is a separate section, not part of `.section-header`, so it stays visible above your content.

If you want the header back on certain templates only, that is a different job. You would scope the hide rule to specific page types rather than applying it globally. For a whole-store side menu, the version above is what you want.

## What to check if it does not look right

If content hides behind the rail, your theme may use a class other than `.section-header` for its header. Dawn uses `.section-header`. On a different theme, open the storefront, right click the header, choose Inspect, and read the section's class name, then swap it into the hide rule.

If the Menu panel does not open, make sure you pasted the whole block. The panels rely on the two `<div>` blocks at the bottom with the `id="ck-menu"` and `id="ck-search"` anchors.

If the mobile bar sits too high or too low, adjust the `bottom` and `padding` values in the mobile media query.

## Will this work on themes other than Dawn

Yes, with one small change. The layout is plain CSS pinned to fixed positions, so it does not depend on Dawn specifically. The only theme-specific line is the one that hides the existing header.

Dawn wraps its header in `.section-header`. Most Online Store 2.0 themes use a similar wrapper class, but the exact name varies. Refuse, Sense, Craft, and other Shopify-made themes are Dawn-based and often use the same class, so the code frequently works unchanged.

If your header does not disappear, find its class. Open your storefront, right click the header, choose Inspect, and look at the section wrapper's class. Replace `.section-header` in the hide rule with whatever your theme uses. Everything else stays the same.

## Do I need an app for this

No. There is no app cost and nothing to install. It is one section you add in the theme editor, using a feature Shopify already ships on every Online Store 2.0 theme.

Apps make sense for the two placeholder items. A wishlist needs a wishlist app to actually save products, and a proper recently-viewed feed needs one too. The navigation layout itself does not need any of that.

## Side menu, vertical menu, mega menu: the difference

These get mixed up, so quickly:

A **side menu** or **vertical menu** runs down the side of the page. That is what this post builds.

A **mega menu** is a wide dropdown panel that opens from a top menu item, showing many links and sometimes images. It is still a horizontal header underneath.

A **hamburger menu** is the three-line icon that opens a slide-out drawer, common on mobile. Dawn already uses one on small screens.

They solve different problems. If your catalog is deep and you want big categorised dropdowns, you want a mega menu. If you want the app-style rail and bottom bar, you want the side menu above.

## The short version

Dawn cannot make a vertical side menu from settings, but it does not need to. One Custom Liquid section in the Header group hides the horizontal header, draws a fixed left rail on desktop, and switches to a fixed bottom bar on mobile. Menu and Search work immediately, the colors and width are three editable values, and no theme files are touched.


---

---
title: "Shopify Size Chart: Add a Popup Next to the Price"
description: "Put a Size guide link right next to the price on your Shopify product page. It opens a popup with your size chart image. One block, no app, works on Horizon."
---

## The problem: a size chart shoppers actually notice

A store owner asked me how to add a size chart to their Shopify product page.

They did not just want a size chart somewhere on the page. They wanted it in a specific spot: right next to the price, on the same line. A small **Size guide** link that a shopper sees the moment they look at the price and start thinking about which size to pick.

Clicking it should open a popup with the size chart image and a close button. Nothing fancy. Just the chart, front and centre, with a clear way to close it again.

That is a good instinct. On a fashion or apparel store, the size question is the number one reason people hesitate or return an item. Putting the answer one click away, right where the shopper is already looking, removes that friction.

This guide shows you how to build exactly that. It is one block of code, no paid app, and it works on the Horizon theme. I built it and tested it on a real Horizon store.

![Before: the price sits on its own line with no size chart link next to it](/images/blog/shopify-size-chart-popup/01-price-row-before.png)

## Why the size chart usually ends up in the wrong place

Most size charts on Shopify stores end up in one of three awkward places.

Some sit in a tab or accordion far below the buy button, so the shopper has to scroll past everything to find them. Some live on a completely separate page, which means leaving the product to go look, then coming back. And some are baked into the product description as a plain image, which looks fine on desktop and breaks on mobile.

None of those put the size chart where the decision actually happens, which is right at the price and the size selector.

There is a reason it is hard to place it there. On modern themes like Horizon, the product page is built from separate blocks that stack on top of each other. The price is one block. If you add another block, it lands above or below the price, not beside it. Getting a link onto the same row as the price takes a small amount of code, which is why most people give up and reach for an app.

You do not need an app. You need one Custom Liquid block that places the link for you.

## What we are building

Here is what the finished result does:

- Adds a small **Size guide** link on the same row as the price.
- Opens a popup with your size chart image when clicked.
- Gives the popup a close button, plus close on the Esc key or a click outside.
- Lets you turn the underline on the link on or off with one setting.
- Uses your theme's own text colour, so it matches your store automatically.
- Works on desktop and mobile.

It is a single block, so there are no theme files to edit and nothing to break. If you ever want to remove it, you delete the block and everything is gone.

## Before you start: which theme is this for

This guide is written for **Horizon**, Shopify's newer free theme that uses blocks and web components. The code targets the way Horizon builds its price element, so it drops in cleanly there.

If you are on an older theme like Dawn, the idea is the same but the price markup is different, so the selector in the code would need a small change. The steps for adding a Custom Liquid block are almost identical across themes, so you can still follow along.

Not sure which theme you run? In your Shopify admin, go to **Online Store > Themes** and look at the name of your live theme at the top.

## Step by step: add the size chart popup

### 1. Open the theme editor

In your admin, go to **Online Store > Themes**, then click **Customize** on your live theme. In the preview, open any product page. This is the page you will be editing.

### 2. Add a Custom Liquid block

Click into the product information area. Click **Add block**, type **Custom liquid** into the search, and choose **Custom Liquid**.

Position does not matter. The code finds the price and places the link next to it for you, so you can drop the block anywhere in the product area.

![Add a block, search Custom liquid, and choose Custom Liquid](/images/blog/shopify-size-chart-popup/02-add-custom-liquid-block.png)

### 3. Paste the code

A **Liquid code** box appears. Paste this into it:

![Paste the code into the Liquid code box](/images/blog/shopify-size-chart-popup/03-paste-liquid-code.png)

```liquid
{%- comment -%} ---- Size guide popup. Set the 3 values below. ---- {%- endcomment -%}
{%- assign sg_label     = 'Size guide' -%}
{%- assign sg_underline = true -%}
{%- assign sg_image_url = 'PASTE_YOUR_SIZE_CHART_IMAGE_URL' -%}

<dialog class="sg-modal" data-sg-modal>
  <button type="button" class="sg-modal__close" data-sg-close aria-label="Close">&times;</button>
  <img class="sg-modal__img" src="{{ sg_image_url }}" alt="{{ sg_label }}" loading="lazy">
</dialog>

<style>
  product-price.sg-has-link {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 4px;
  }
  product-price.sg-has-link > * { width: auto; flex: 0 0 auto; max-width: 100%; }
  .sg-link {
    appearance: none; background: none; border: 0; padding: 0; margin: 0;
    font: inherit; font-size: 0.85em; line-height: 1.2; color: inherit;
    opacity: 0.85; cursor: pointer;
  }
  .sg-link.sg-underline { text-decoration: underline; text-underline-offset: 2px; }
  .sg-link:hover { opacity: 1; }
  .sg-modal {
    width: min(92vw, 640px); max-height: 88vh; padding: 0; border: 0;
    border-radius: 12px; overflow: visible;
    background: rgb(var(--color-background-rgb, 255 255 255));
    color: rgb(var(--color-foreground-rgb, 26 26 26));
  }
  .sg-modal::backdrop { background: rgba(0, 0, 0, 0.55); }
  .sg-modal__img {
    display: block; width: 100%; height: auto; max-height: 88vh;
    object-fit: contain; border-radius: 12px;
  }
  .sg-modal__close {
    position: absolute; top: -14px; inset-inline-end: -14px;
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
    background: rgb(var(--color-foreground-rgb, 26 26 26));
    color: rgb(var(--color-background-rgb, 255 255 255));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
</style>

<script>
  (function () {
    var LABEL = {{ sg_label | json }};
    var UNDERLINE = {{ sg_underline | json }};
    var modal = document.querySelector('[data-sg-modal]');
    if (!modal) return;
    if (modal.parentNode !== document.body) document.body.appendChild(modal);

    function openModal() { modal.showModal ? modal.showModal() : modal.setAttribute('open', ''); }
    function closeModal() { modal.close ? modal.close() : modal.removeAttribute('open'); }

    document.addEventListener('click', function (e) {
      if (e.target.closest('[data-sg-open]')) { e.preventDefault(); openModal(); }
      else if (e.target.closest('[data-sg-close]')) { e.preventDefault(); closeModal(); }
      else if (e.target === modal) closeModal();
    });

    function inject() {
      var price = document.querySelector('product-price');
      if (!price || price.querySelector('[data-sg-open]')) return;
      price.classList.add('sg-has-link');
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'sg-link' + (UNDERLINE ? ' sg-underline' : '');
      btn.setAttribute('data-sg-open', '');
      btn.textContent = LABEL;
      price.appendChild(btn);
    }
    inject();
    new MutationObserver(inject).observe(document.body, { childList: true, subtree: true });
  })();
</script>
```

### 4. Set your three values

At the very top of the code there are three lines to edit. That is all you touch.

- `sg_label` is the link text. Keep `'Size guide'` or change it to `'Size chart'`, whatever you prefer.
- `sg_underline` is `true` for an underlined link, or `false` for no underline. The store owner who asked wanted this choice, and it is one word.
- `sg_image_url` is the address of your size chart image. Upload the chart in **Settings > Files**, copy its URL, and paste it here in place of the placeholder text.

### 5. Save

Click **Save**. That is the whole setup.

The underlined **Size guide** link now sits on the same row as the price, and clicking it opens your chart.

![After: an underlined Size guide link now sits on the same row as the price](/images/blog/shopify-size-chart-popup/04-size-chart-on-price-row.png)

The popup shows your size chart image with a round close button in the corner. It closes on the button, on the Esc key, or on a click outside the image, whichever the shopper reaches for first.

![The size chart popup open, with the chart image and a close button](/images/blog/shopify-size-chart-popup/05-size-chart-popup-open.png)

## How to make the size chart image

The popup is only as good as the image you feed it, so spend a minute on the chart itself.

A clear size chart for apparel usually has a row per size and a column per measurement. The common columns are bust or chest, waist, hips, and length. Put the measurements in centimetres, or list both centimetres and inches if you sell internationally.

Keep it readable. A wide, low table with big text works better in a popup than a tall, cramped one. Export it as a PNG or JPG.

Then upload it: in your admin go to **Settings > Files**, click **Upload files**, choose your chart, and once it appears, copy its URL. That URL is what goes into `sg_image_url` in the code.

If you sell very different product types, you can make more than one chart and add a second Custom Liquid block with a different image on the templates that need it.

## How do I add a size chart to Shopify without an app?

You add a Custom Liquid block to your product page and paste in a small piece of code, exactly like the steps above. Custom Liquid is a built-in block type, so it costs nothing and installs nothing.

Size chart apps exist and some are good, especially if you need a different chart for every product with no code at all. But for a single store-wide chart that opens in a popup next to the price, an app is more moving parts than you need. The block above does the job and you own every line of it.

## Can I put the size guide right next to the price?

Yes, and that is the main thing this guide solves.

On Horizon the price lives in its own block, and the theme stacks blocks vertically by default, so a normal block lands under the price rather than beside it. The code handles that. It finds the price element, switches it to a horizontal layout, and drops the link in on the same row. It also re-checks after the shopper changes a variant, so the link never disappears when the price updates.

If you would rather have the link somewhere else, such as under the size selector, you can move it, but next to the price is where shoppers look first.

## How do I show a size chart for one product only?

The block above shows the same chart on every product that uses the template, which is what most single-brand stores want.

If you genuinely need a different chart per product, Shopify has a metafield-based approach. You create an image metafield on the product, upload a chart to each product, and reference that metafield in the code instead of a fixed URL. Shopify's own help has a tutorial on building a pop-up size chart with metafields. It is more setup, but it lets every product carry its own chart.

For most stores, one good chart shown everywhere is simpler and just as effective.

## Where do I upload the size chart image in Shopify?

Go to **Settings > Files** in your admin. That is Shopify's built-in file library, and any image there gets a public URL you can use anywhere, including in this popup.

Upload the chart, wait for it to finish processing, then click the copy icon next to it to grab the URL. Paste that into `sg_image_url`. Do not paste the address of an image from another website, since that can break or load slowly. Host it in your own Files library.

## If the size chart is still not showing

A few things to check if the link or popup does not appear.

First, confirm you saved the block. The editor does not apply changes until you click Save.

Second, check the image URL. Paste it into a new browser tab on its own. If it does not open there, it will not open in the popup either. Make sure it is the full address, starting with https.

Third, make sure you are on Horizon. The code targets Horizon's price element. On a different theme the link may not attach, and the selector would need adjusting for that theme's markup.

Fourth, if you already had a separate size guide link elsewhere on the page, you now have two. Keep whichever you prefer and remove the other. They do not conflict, it just looks tidier with one.

## Size chart, size guide, size table: same thing?

Shoppers and merchants use these words interchangeably, and for this purpose they mean the same thing: a reference that maps a size label like S, M, or L to real body measurements.

The label on the link is up to you. `Size guide` and `Size chart` both read well. Whatever you type into `sg_label` is what shoppers see, so use the phrase your customers are used to.

The important part is not the word. It is the placement. A size reference the shopper can reach in one click, right beside the price, answers the size question before it becomes a reason to leave.

## The short version

To add a size chart popup next to the price on Shopify Horizon:

- Open **Online Store > Themes > Customize** and go to a product page.
- Add a **Custom Liquid** block anywhere in the product area.
- Paste the code above.
- Set your label, choose underline on or off, and paste your size chart image URL from **Settings > Files**.
- Save.

One block, no app, and the size chart lands exactly where shoppers look. I tested it on a Horizon store and the link sits cleanly on the price row with the popup opening on click.


---

---
title: "How to Add a Size Chart in Shopify Without an App"
description: Build a size chart that applies itself to new products from their product type, translates into any language, and recommends a size. Free, no app, tested on Dawn.
---

## The problem

Every clothing store needs a size chart, and every clothing store hits the same three walls.

The first is that you have to attach the chart to each product by hand. Fine for 20 products. Miserable when you import 500 t-shirts and every one of them needs the same chart pointed at it.

The second is language. If you sell in English and French, the chart has to switch with the rest of the store, and most solutions leave it stranded in one language.

The third is that a chart is passive. It shows numbers. It does not tell a shopper which size to buy, which is the actual question they have.

A merchant asked about exactly this on the Shopify Community. They wanted multiple charts, auto-assignment to new arrivals, English and French, and a clean frontend. They had already installed several apps and none of them ticked all four boxes.

The answer is that you do not need an app. Shopify ships the two pieces required, both free and both made by Shopify. What is missing is about 200 lines of theme code to join them together.

I built it and tested it on a Dawn 15.5 store. Here is the whole thing.

## Why the apps struggle with this

It is worth understanding why, because it tells you what to build instead.

Auto-assignment and auto-translation are not really features. They are consequences of where your data lives.

A size chart app stores your chart rows in the app's own database. That database is outside Shopify, so Shopify's translation system cannot see it. The app has to build its own translation layer, and its own rules for deciding which product gets which chart.

Some apps do that well. But you are then renting a data model, and it only speaks the languages and rules that vendor decided to support.

If the chart instead lives inside Shopify as native content, translation comes free, because Shopify's own translation app can already read it. Assignment comes free too, because Liquid can look the chart up at render time from something the product already has.

That is the whole trick, and it is why this ends up simpler than the app route rather than harder.

## What a Shopify metaobject is

This is the piece most merchants have not met yet, so it is worth two minutes.

You probably know **metafields**. A metafield adds one extra field to something that already exists. A "care instructions" box on a product, a "founded in" date on the shop.

A **metaobject** is different. It is a whole custom record type that you define, that exists on its own rather than hanging off a product. You decide what fields it has, then you create as many entries of it as you like.

So "Size chart" becomes a thing your store understands. Each entry is one chart, with a heading, a table, a note. It is not attached to any product. It just exists, and products find it.

The distinction matters here for two reasons.

Because entries stand alone, one chart can serve a thousand products without being copied onto any of them.

And because metaobjects are native Shopify content, Shopify's free Translate and Adapt app can translate their fields, exactly as it translates product titles.

Metaobjects are on every Shopify plan, including Basic. You will find them under Settings, then Custom data.

## Step 1: define the chart type

Go to Settings, then Custom data, then Metaobjects, then Add definition. Name it `Size chart`. Shopify derives the type `size_chart` from that name, which is what the code will reference.

Add four fields:

- **Heading**, single line text. The chart's title, which doubles as the link label.
- **Table**, multi-line text. The chart itself.
- **Note**, single line text. The "measure your chest, not the garment" line.
- **Recommender**, multi-line text. Optional, covered further down.

Leave the Translations toggle on. It is on by default, and it is what makes the French step work later.

![The Size chart metaobject definition with four fields and the Translations toggle enabled](/images/blog/shopify-size-chart/03-size-chart-metaobject-definition.jpeg)

## Step 2: add one entry per product type

This is the step that removes the manual work, so it is worth doing deliberately.

You are not creating one chart per product. You are creating one chart per **kind** of product.

In the Table field, the first line is your column headers and every line after it is a row. Separate the cells with a pipe character:

```
Size | Chest (cm) | Waist (cm) | Length (cm)
XS | 82-87 | 66-71 | 66
S | 88-93 | 72-77 | 68
M | 94-99 | 78-83 | 70
L | 100-105 | 84-89 | 72
XL | 106-113 | 90-97 | 74
XXL | 114-121 | 98-105 | 76
```

Then the important part. Set the entry's **Handle** to the product type, lowercased with dashes.

Product type "T-Shirt" becomes handle `t-shirt`. Product type "Shirt" becomes handle `shirt`. Product type "Co-ord Set" becomes handle `co-ord-set`.

That handle is the entire auto-assignment mechanism. There is no rule builder and no per-product setting. The theme handleizes the product's type and looks for a chart with that handle.

![The size chart entry showing the pipe-separated table and the handle set to t-shirt](/images/blog/shopify-size-chart/04-size-chart-entry-handle.jpeg)

## Step 3: add the snippet

Online Store, then Themes, then the three dots next to your theme, then Edit code. In the snippets folder click Add a new snippet and name it `size-chart`.

The snippet resolves the chart in this order, first match wins:

1. A `custom.size_chart` metafield on the product, if you want to override one product by hand.
2. A chart whose handle matches the product type.
3. A chart whose handle matches any of the product's tags.
4. A chart with the handle `default`.

If none of those match, nothing renders. No empty button, nothing to clean up.

The full snippet is in the source thread linked at the bottom of this article. The part worth understanding is the lookup:

```liquid
{%- assign type_handle = product.type | handleize -%}
{%- assign chart = metaobjects.size_chart[type_handle] -%}
```

That is it. `metaobjects.size_chart[handle]` fetches an entry by handle at render time, so nothing is stored on the product.

## Step 4: put it on the product page

Open the theme editor, open a product template, click Add block, choose **Custom Liquid**, and paste one line:

```liquid
{% render 'size-chart' %}
```

Drag it under the variant picker. That is the last thing you have to do per theme, and you never touch it again.

Here is the result. Two products, nothing configured on either one, two different charts:

![Two products with no chart assigned, each showing a different size chart based on product type](/images/blog/shopify-size-chart/01-two-products-two-size-charts.jpeg)

The Red Sports Tee is product type `T-Shirt`, so it gets the t-shirt chart with Chest, Waist and Length. The White Cotton Shirt is product type `Shirt`, so it gets the shirt chart with Chest, Neck and Sleeve.

Import 500 more t-shirts tomorrow and every one of them shows the t-shirt chart, because they are all type `T-Shirt`. That is the auto-apply, and there is nothing to maintain.

## The size recommender

A chart shows numbers. A recommender answers the question.

The version I built reads the table that is already on the page, so you never type your measurements twice. Enter a chest measurement, get a size, and the matching row highlights.

![The size recommender returning M for a 96 cm chest with the M row highlighted](/images/blog/shopify-size-chart/02-size-recommender-result.jpeg)

It works out which columns are usable on its own. In the test above it offered Chest and Waist but not Length, because Length holds single numbers rather than ranges like `94-99`. A column only appears in the dropdown if most of its cells look like a range.

Enter a measurement inside a range and it says "Your size: M". Enter something past the end of the chart and it says "Closest size: XXL" instead of failing with no error.

One honest limit. This does not invent sizing. It cannot know what a Large means at your manufacturer, because nothing can. You type the numbers once per product type and the recommender is a lookup against your own table. That is also what the paid apps are doing.

## Step 5: translate it

Install **Translate and Adapt**, which is free and made by Shopify. Open the chart entry, then More actions, then Localize.

You get your English in one column and an empty column for each language you have added, side by side.

![Translate and Adapt showing the English size chart fields beside their French translations](/images/blog/shopify-size-chart/05-translate-adapt-french.jpeg)

Translate the heading, the column headers, the note, and the recommender labels. The size letters and the numbers stay exactly as they are, so most of the work is four short phrases.

Then it switches on its own. On the French storefront the heading, the table headers, the note, the button and the result line all come back in French. No theme code changes between the two languages.

That is the payoff of keeping the data inside Shopify. You are not configuring a translation feature. You are translating content, and the storefront does the rest.

One detail worth copying. Put the punctuation inside the label rather than in the code. French wants a space before a colon, so the French label reads `Votre taille :` while the English one reads `Your size:`. If the colon is hardcoded in your JavaScript, French comes out subtly wrong forever.

## Does this work on my theme?

The code uses no theme classes, no theme snippets and no theme variables, and its CSS is scoped to the snippet. It should drop into any Online Store 2.0 theme.

Two things are worth knowing before you paste it into a heavily customised theme.

**The dialog moves itself to the end of the page.** This is deliberate. Dawn puts a CSS `transform` on the product information column, and any transformed ancestor becomes the containing block for `position: fixed`. Before I moved the dialog, it was rendering 309px wide instead of filling the viewport. Reparenting it to `<body>` fixes that on any theme with the same pattern.

**Custom Liquid blocks are a 2.0 feature.** If your product template has no Add block button, you are on a vintage theme. Add the `{% render %}` line to the product section file directly instead.

## Common questions

**Do I need a size chart app at all?** Not for charts, assignment, or translation. An app is worth paying for if you want body-scan sizing, per-variant recommendations from returns data, or a support team to call.

**Can one chart cover several product types?** Yes. Give the entry the handle of your most common type, then add the other types as tags on those products. The snippet falls back to tags after the product type.

**What if a product has no matching chart?** Nothing renders. No button appears and the page is unaffected, which is the correct behaviour for accessories and one-size items.

**Where do metaobject entries live?** Content, then Metaobjects. The definition lives under Settings, then Custom data. Two different screens, which trips people up.

**Does this slow the page down?** The lookup is one Liquid call at render time, and the markup is a table. There is no external script and no app embed, so it is faster than any app version.

**Can I use inches and centimetres?** Add both as columns. The recommender offers each numeric column separately, so a shopper picks whichever they measured in.

## If it is not working

**No button appears.** The handle does not match the product type. Check for capitals and spaces. Product type `T Shirt` handleizes to `t-shirt` but `T-Shirt ` with a trailing space does not. Compare the entry handle against the type exactly.

**The chart shows on the wrong products.** You probably have a `default` entry catching everything. Rename or delete it while you test.

**The table renders as one long line.** Your rows are separated by something other than real line breaks. Retype them in the Shopify admin rather than pasting from a word processor.

**The recommender dropdown is empty.** No column contains ranges. It needs cells like `94-99` to work. A column of single numbers is displayed but not offered as a measurement.

**French shows English.** Either the language is not published under Settings, then Languages, or the entry has not been translated yet. The theme falls back to the default language rather than showing nothing.

**The dialog is narrow or clipped.** An ancestor has a `transform`, `filter` or `contain` on it. That is the containing-block problem described above, and moving the dialog to `<body>` is the fix.

I tested all of this on a Dawn 15.5 development store, in English and French, on the live storefront rather than the theme editor preview. The measurements and behaviour above are from that store.


---

---
title: How to Set Up Shopify Smart Collections With Metafields (Not Tags)
description: Building one tag per collection turns into hundreds of typo-prone tags fast. Here is how to run Shopify smart collections off product type and metafields instead, tested on a store.
---

## The problem: one tag per collection does not scale

A merchant asked about this on the Shopify Community, and it is one of those problems that only shows up once your catalog gets big.

They run a print-on-demand apparel store with more than 80 collections. The menu is organised across audience (Men, Women, Kids, Youth, Baby), garment type (Graphic Tees, Oversized Tees, Hoodies, Joggers, Hats) and design themes (Road Trips, Coffee Break, Nature Escape).

To get a product into the right automated collection, they created one exact tag per collection. Over 80 of them. Every tag is a full multi-word name like "Men's Graphic Tees".

You can see the setup in their own planning sheet. The last column, "Condition Tag", holds one long tag for every collection.

![A spreadsheet listing over 80 Shopify collections, each with its own unique multi-word condition tag such as Men's Graphic Tees](/images/blog/shopify-smart-collections-metafields/01-condition-tag-per-collection.png)

Three things break as the store grows:

- **Typing errors.** Every publish means hand-typing exact multi-word tags. One misspelled tag and the product misses its collection.
- **Tag clutter.** The backend fills with hundreds of single-use tags that mean nothing on their own.
- **Cross-categorisation.** A product that belongs in several places (a men's graphic tee that is also in a design theme) needs several compound tags stacked on it, which gets hard to track.

This is a common wall to hit. The good news is that the fix removes the tag list almost entirely, and I set the whole thing up on a store to confirm it works.

## Why it happens: you are encoding three things into one field

The root cause is not tags themselves. It is that each tag tries to describe three separate things at once (audience and garment and theme), rolled into a single label like "Men's Graphic Tees".

Shopify smart collections can match on more than one condition at a time. So you never needed a combined tag. You needed to keep the three dimensions apart and let the collection combine them.

Once the three dimensions are separate fields, "Men's Graphic Tees" stops being a tag you type. It becomes a rule: garment is a Graphic Tee and audience is Men. The collection does the combining for you.

That one change is what collapses 80-plus unique tags down to a handful of reusable values.

## The better structure: three fields, not 80 tags

Here is the model I would use. It replaces every compound tag with three clean fields.

**1. Garment goes in the native Product type field.**

Graphic Tees, Hoodies, Joggers, Hats. This is a field Shopify already gives every product, so it costs you nothing new. Set it once per product. That erases roughly a third of your tag list on its own, because the garment dimension is now handled without a single tag.

**2. Audience and Design theme become two metafields.**

Not free-text tags. Two list metafields with a fixed set of allowed values. One for audience (Men, Women, Kids, Youth, Baby) and one for design theme (Road Trips, Coffee Break, Nature Escape, and so on).

The word "metafield" sounds technical, but for this job it is just an extra field on the product that you define once and then fill from a dropdown.

**3. Every collection becomes a two-condition smart collection.**

"Men's Graphic Tees" is now: Product type is Graphic Tees, and Audience includes Men. No compound tag anywhere.

Let me walk through the exact setup, because the details matter.

## Step 1: Create the two metafields with a fixed value list

In your admin go to Settings, then Custom data, then Products, then Add definition.

Give it a name (Audience). For Type, pick **Choice list (single line text)**. Then add your allowed values: Men, Women, Kids, Youth, Baby.

The choice list is the part that kills typos. Because the values are fixed, you pick one from a dropdown when you edit a product. You cannot misspell "Men" if you are choosing it from a list rather than typing it.

There is one switch you must not miss. On the definition, turn on **Use as a condition in collections**. Do this before you build any collections. If it is off, the metafield will not show up as an option when you build the collection rules.

![A Shopify metafield definition with a fixed choice list of audience values and the Use as a condition in collections toggle switched on](/images/blog/shopify-smart-collections-metafields/02-metafield-definition-choice-list.png)

Repeat the same steps for a Design theme definition, with its own list of theme values.

## Step 2: Set the values on your products from a dropdown

Open a product and find its metafields. Set Audience and Design theme by picking from the dropdown.

Notice there is no typing here. You are choosing from the fixed list you defined, so the values are always spelled the same way across every product.

![A Shopify product showing Audience set to Men and Design theme set to Road Trips, both chosen from dropdown lists](/images/blog/shopify-smart-collections-metafields/03-audience-dropdown-on-product.png)

Because these are **list** metafields, one product can hold more than one value. A design that suits men and women can carry both audiences. A product can sit in two themes. That is how one product lands in several collections without stacking a pile of tags on it.

## Step 3: Build the smart collection from two conditions

Create a collection and set it to an automated (smart) collection. Set it to match **all** conditions, then add two:

- Product type is equal to Graphic Tees
- Audience includes Men

Save it. Shopify fills the collection by matching those rules against your catalog, and it re-checks them whenever a product changes.

When I tested this, a tee with Product type set to Graphic Tees and Audience set to Men dropped straight into the collection. A hoodie with the same audience but a different product type stayed out, exactly as it should. The collection built itself from the two fields, with no tag involved.

![A Shopify smart collection with two conditions, Product type is Graphic Tees and Audience includes Men, showing one matching product](/images/blog/shopify-smart-collections-metafields/04-smart-collection-autofills.png)

## Do list metafields really work as collection conditions? Yes

This is worth calling out, because a lot of advice online assumes only single-value metafields can be used in automated collections.

That is not true. A **list** metafield works as a smart collection condition, as long as its definition has "Use as a condition in collections" turned on. In the rule builder it reads as "Audience includes Men". I confirmed it end to end on a test store, and the collection populated correctly.

So you do not have to choose between "one value per product" and "usable in collections". You get both. One product can hold several audience or theme values and still feed every collection those values belong to.

## Filling this in across an existing catalog

Setting up the fields is the easy part. The real work is applying them to products you already have. Do not do it one product at a time.

- **Use Shopify's bulk editor.** Select a batch of products and set the metafield values in a grid, rather than opening each product.
- **Or export and import a CSV.** Map audience, theme and product type in a spreadsheet and bring them back in one file.

For new products coming from Printful, the native Product type comes across on sync, so the garment dimension is handled automatically. You only set the two dropdown values once at publish.

If your design names are already sitting in your product titles (common in print-on-demand), you can even skip the theme metafield. A "Title contains" condition can drive the theme collections straight off the title. Just test it for false matches first, because a title word can appear where you did not expect it.

## Smart collections vs manual collections

A quick distinction, because the wording trips people up.

A **manual** collection is one you fill by hand. You add and remove products yourself, and you can drag them into a custom order.

A **smart** collection (Shopify also calls these automated collections) is one you fill with rules. You set conditions, and Shopify adds any product that matches and removes any that stops matching. This is what you want for 80 collections, because you are never hand-adding a product again.

Everything above uses smart collections. That is the whole point: the rules maintain membership so you do not have to.

## Metafields vs tags: when to use which

Both can drive automated collections, so which should you reach for?

- **Tags** are best for temporary, loose labels. A campaign, a season, a quick flag you will remove later. They are free text, which is exactly why they attract typos at scale.
- **Metafields** are best for stable, structured data that describes what a product permanently is. Audience and design theme are structural, so they belong in metafields with a fixed value list.
- **Native fields** (product type, vendor) are best of all when they fit, because they already exist and need no setup.

The rule of thumb: if a value describes what the product fundamentally is, and you will build navigation on it for years, put it in a native field or a metafield. Save tags for things that come and go.

## How many conditions can one smart collection have?

Plenty for this. A single smart collection can combine multiple conditions, and you choose whether a product must match **all** of them or **any** of them.

For this catalog structure, two conditions per collection is the norm (product type plus audience, or audience plus theme). You are not going to run out of room.

## If a collection is not filling, check these

If you build the rules and nothing shows up, it is almost always one of three things:

- **The definition toggle is off.** If "Use as a condition in collections" is not on, the metafield either will not appear as a condition or will not match. Turn it on and rebuild the rule.
- **The value does not match exactly.** Smart collection conditions are literal. This is the whole reason for the fixed choice list, so make sure the collection condition uses the same value the products actually carry.
- **Product type is not set.** If you are conditioning on Product type is Graphic Tees, every tee needs that product type filled in. Empty product type means no match.

## The takeaway

You do not fix 80 messy collections by cleaning up 80 tags. You remove the need for them.

Put the garment in the native Product type field. Put audience and design theme in two list metafields with fixed dropdown values. Then build each collection from two conditions instead of one hand-typed tag.

Your 80-plus one-off tags collapse into a native field plus about a dozen reusable dropdown values. Typos become impossible, the tag list clears out, and a product that belongs in several places just carries several values. The collections take care of themselves after that.


---

---
title: Shopify Sold Out Overlay: Grey Out Products and Add a Sold Out Box
description: Shopify themes mark a sold out product with a small pill in the corner of the card. Here is how to turn that pill into a black Sold Out box across the middle of the photo, and fade the photo behind it, with no theme code and no app.
---

## The problem

Your collection page has a mix of products. Some are in stock, some sold out. A shopper scrolling the grid should be able to tell them apart in a glance, without reading anything.

Most Shopify themes do mark sold out products. The mark is just small: a pill in the bottom left corner of the card, in the same colour as every other badge, at about twelve pixels tall. On a phone, in a grid of four products, most people scroll straight past it.

The look that streetwear and drop based stores use instead is much louder. The product photo fades back, and a solid black square sits in the middle of it with SOLD OUT in white capitals. There is no mistaking it.

![A Shopify collection page where the sold out product only has a small pill in the corner of the card](/images/blog/shopify-sold-out-overlay/01-before-small-sold-out-pill.png)

This guide builds that, using two rules of custom CSS, no app, and no edits to any theme file. The screenshots are from the Spotlight theme, and the same approach works on Dawn and every theme built from it, which covers Craft, Taste, Studio, Ritual, Trade, Crave, Refresh and Sense.

## The part most tutorials get wrong

Search this and you will find answers that tell you to add a new element to the card: open `card-product.liquid`, find the image block, and paste in a `<div>` that says Sold Out, wrapped in a check for whether the product is available.

That works, and it is more work than the job needs. It means editing a theme file, which a theme update can overwrite, and it means understanding Liquid, Shopify's templating language, well enough to put the check in the right place.

There is a shortcut, and it comes from something your theme already does.

Your theme is already printing the words "Sold out" on that card. That is what the small pill is. The text exists, the check for whether the product is available has already run, and the element is already sitting inside the product photo's container.

So you do not need a new element. You need to restyle the one that is already there.

## What the theme gives you to work with

Two class names do all the work here. A class is a label on an element that CSS can point at.

**`.price--sold-out`** goes on the price block of any card whose product is unavailable. Your theme adds it automatically. This is the marker that tells CSS "this whole card is a sold out product", and it is more reliable than looking at the badge, because the sold out badge and the sale badge share the same class name as each other.

**`.card__badge`** is the little box holding that pill, and **`.badge`** is the pill itself.

Between them you can say: on any card that contains a sold out price, take the badge, and turn it into something much bigger.

The connecting piece is a CSS feature called `:has()`. It lets a rule select a parent based on what is inside it. `.card-wrapper:has(.price--sold-out)` means "a product card that contains a sold out price". Every browser released since early 2023 supports it, so it is safe to use on a live store now.

## Step by step

### 1. Open the theme editor

From your Shopify admin, go to **Online Store > Themes**, then click **Customize** on the theme you are using.

### 2. Switch the preview to a collection page

The editor opens on your home page. Use the page dropdown in the top bar, the one that says Home page, and pick **Collections**, then any collection. The preview will reload showing your product grid.

This matters, because the box you are about to use belongs to whichever section you have selected, and the product grid section only exists on collection pages.

### 3. Click Product grid

In the left sidebar you will see the sections that make up the collection page. Click **Product grid**.

![The Shopify theme editor with the Product grid section selected in the left sidebar](/images/blog/shopify-sold-out-overlay/02-click-product-grid.png)

### 4. Open the Custom CSS box

The right hand panel now shows every setting for that section. Scroll it all the way to the bottom, past Filtering and sorting and past Padding, and you will find a collapsed row called **Custom CSS**. Click it to open.

![The Custom CSS box at the bottom of the Product grid section settings](/images/blog/shopify-sold-out-overlay/03-custom-css-box.png)

Shopify puts one of these boxes on every section and every block. Whatever you type into it is automatically limited to that section, so a rule pasted here cannot leak onto your product pages or your home page even if the selector is broad. That scoping is the reason this box is safer than editing a stylesheet.

### 5. Paste the CSS

```css
.card-wrapper:has(.price--sold-out) img{opacity:.35}
.card-wrapper:has(.price--sold-out) .card__badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;z-index:2}
.card-wrapper:has(.price--sold-out) .badge{display:grid;place-items:center;width:120px;height:120px;background:#000;color:#fff;border:0;border-radius:0;padding:0;font-size:1.6rem;font-weight:700;text-transform:uppercase;word-spacing:120px;text-align:center}
```

Then click **Save** in the top right.

### 6. Check it

![The same collection page with the sold out products faded behind a black Sold Out box](/images/blog/shopify-sold-out-overlay/04-after-black-box.png)

The sold out cards now have a faded photo and a black square in the middle. The in stock cards, including any with a Sale badge, are exactly as they were.

## What each line does

**Line one** fades the photo. `opacity: .35` means the image renders at thirty five percent strength, so it washes out towards the page background without going grey. Lower numbers fade it further. At `.2` the product is barely readable, at `.6` the effect is subtle.

**Line two** moves the badge. By default it sits in a corner. `position: absolute` with `top: 50%`, `left: 50%` and a `translate(-50%, -50%)` pins it to the exact centre of the photo. That translate is the standard way to centre something, because `top: 50%` alone puts the element's top edge at the middle rather than its centre.

**Line three** turns the pill into the box. It sets a fixed 120 by 120 square, a black background, white text, removes the theme's rounded corners and border, and makes the text bold and uppercase.

The odd one in that list is `word-spacing: 120px`. That is what stacks SOLD and OUT onto two lines. The words are separated by more space than the box is wide, so the browser has no choice but to break between them. Delete it and the text sits on one line.

## Changing the look

Everything you are likely to want to adjust is a number or a colour in that block.

- **Box size.** Change both `120px` values in line three. They should stay equal to each other to keep the box square.
- **Box and text colour.** `background:#000` and `color:#fff`. A white box with black text reads well on dark product photography.
- **Rounded corners.** Replace `border-radius:0` with something like `border-radius:8px`.
- **How faded the photo gets.** The `.35` in line one.
- **One line instead of two.** Delete `word-spacing:120px;`.
- **Text size.** `font-size:1.6rem` is 16 pixels. Note that rem values in Shopify themes work out to ten times smaller than you might expect, so 1.6rem is 16px, not 25px.

## Two limits worth knowing before you edit it

**The box holds 500 characters.** The CSS above uses 445. If you add to it and Save stops working, that is why. Shopify counts the whole box, not each rule, and refuses to save anything longer. Shorten a selector or drop a property rather than adding a fourth rule.

**The box will not accept the `content` property.** This is the one that catches people out, because the obvious way to write a Sold Out overlay is to invent a new element with `::after` and give it `content: "SOLD OUT"`. Shopify's validator rejects any rule containing `content`, and the save fails with "Invalid property value: content". Restyling the badge your theme already prints sidesteps this entirely, which is the second reason to prefer that approach over inventing an element.

## Making it work everywhere else

The Custom CSS box belongs to one section. That is a feature, not a limitation, but it does mean the rule only covers the section you pasted it into.

If you also show products on your home page, in a Featured collection row, that row is a different section with its own Custom CSS box. Open the home page in the editor, click that section, scroll to its Custom CSS box, and paste the same three lines.

The same goes for a related products row on your product pages, and for a collection list on any custom page you have built.

If you want it everywhere at once, there is a theme wide version of the same box. In the theme editor, click the **Theme settings** icon in the top left, scroll to the bottom, and you will find a Custom CSS box there too. Rules pasted there apply to every page of the theme. The trade off is that they are not scoped, so a broad selector really can affect something you did not intend, and you have to be more careful about what you put in.

## If nothing changes after you save

Run through these in order.

- **You pasted it into the wrong section.** The most common cause. Check that the sidebar had Product grid highlighted, not Collection banner, when you opened the Custom CSS box.
- **Nothing in the grid is actually sold out.** Set one product's inventory to zero, with its inventory policy set to stop selling when out of stock, and reload. A product that is allowed to oversell never gets a sold out badge and never gets `.price--sold-out`.
- **Your theme hides badges.** Some themes have a setting to turn product card badges off. If the small pill was never showing in the first place, there is nothing to restyle. Turn the badge back on in the section or theme settings first.
- **Your theme is not from the Dawn family.** Themes bought from third party marketplaces often use their own class names. Right click a sold out card, choose Inspect, and look for the class on the price element. If it is not `price--sold-out`, substitute whatever your theme uses in all three rules.
- **You are looking at a cached page.** Reload with a hard refresh, or open the store in a private window.

## A note on stock, not styling

This changes how a sold out product looks. It does not change what a shopper can do with it, and it does not hide it.

That is usually right. Keeping sold out products visible preserves their search rankings and the links pointing at them, and it shows returning shoppers that the item existed. If you would rather they disappeared from the grid entirely, that is a sorting setting on the collection rather than CSS, and it is a decision worth making deliberately.

If you want shoppers to be able to ask for the product when it returns, a back in stock app adds a notify button to the product page, and the black box above sits happily alongside it.

## What you end up with

Three lines of CSS, in a box Shopify gives you, scoped to one section, with no theme file edited and nothing to uninstall. The words on screen come from your theme's own translation file, so they follow the shopper's language, and if you ever delete the CSS the badge goes straight back to being a small pill in the corner.


---

---
title: Sort Shopify Variant Options Alphabetically
description: Put your Shopify variant colors or sizes in A-Z order in Horizon with a small script - no re-creating variants by hand.
---

## The problem

You open a product page. The color buttons are in a messy order.

Blue sits next to Green, then Black shows up at the end. There is no pattern. It looks random to the shopper.

A merchant asked about this on the Shopify Community. He runs the Horizon theme. His color option is named "Couleur dominante" (French for "dominant color"). His products came in from eBay through the Reputon import app.

The variants landed in whatever order the import fed them. Not A to Z. He wanted them sorted alphabetically on the storefront.

He also said the obvious fix did not work for him. In Shopify admin you can drag variants into a new order. But with a long color list, dragging is slow and painful. On Horizon it is even harder. He managed it for sizes, but not for the big color list.

I reproduced this on a test store on the Horizon theme. Same thing. The color buttons rendered in import order, not alphabetical order.

Here is what that looks like before any fix. The "Couleur dominante" buttons are scattered, not sorted.

![Couleur dominante color buttons in random import order on a Horizon product page](/images/blog/shopify-sort-variant-options-alphabetically/01-couleur-dominante-random-order.png)

This guide shows the small script that fixes it. It sorts the color buttons A to Z on the storefront. It leaves your sizes and everything else alone.

## Why it happens

Shopify stores your variants in a fixed order. That order is set when the variants are created.

If you type them in by hand, they keep the order you typed. If an app imports them, they keep the order the app sent. Reputon, DSers, Matrixify, and most feed apps do not sort colors for you. They just push the rows in.

The theme then renders the option buttons in that exact stored order. Horizon does not re-sort them. Dawn does not either. No free Shopify theme does.

So the "random" look is not a bug. It is the theme faithfully showing the order in your data.

There is no built-in toggle for this. Shopify has no setting that says "show variant options in A-Z order." You cannot turn it on in the theme editor. This is the part most forum answers skip.

That leaves you three real choices:

- Reorder the variants by hand in admin (drag them). Slow, and Horizon makes it awkward with many values.
- Re-import a pre-sorted CSV file. Heavy, and it risks breaking your variant images.
- Sort them for display with a small script. Fast, safe, and reversible.

This guide takes the third path. The script never touches your data. It only reorders the buttons in the shopper's browser.

## Before you start: check your option name

The script matches your color option by its name. Out of the box it looks for these words: `color`, `colour`, and `couleur`.

So it already covers English "Color", British "Colour", and French "Couleur dominante". The match is loose. It only needs the word to appear inside the name.

Go to your product in Shopify admin. Look at the option label above your color swatches or buttons. Note the exact wording.

If your option is named something else, like "Farbe" (German) or "Shade" or "Finish", you will add that word to the script. I show exactly where below. Sizes and other options are never touched, so you do not need to change anything for them.

## The fix

This uses a Custom Liquid block. That is a small box in the theme editor where you can paste your own HTML, Liquid, or JavaScript. It runs only on the page you add it to.

**Step 1. Open the theme editor.**

Go to Online Store > Themes. On your Horizon theme, click Customize. Then open any product page in the editor.

**Step 2. Add a Custom Liquid block under Product information.**

In the left panel, find the Product information section. Click Add block. Choose Custom Liquid.

![Add block then Custom Liquid under Product information in the Horizon theme editor](/images/blog/shopify-sort-variant-options-alphabetically/02-add-block-custom-liquid.png)

**Step 3. Paste the script and save.**

Paste this code into the Custom Liquid box. Then click Save.

```html
<script>
document.addEventListener('DOMContentLoaded', function () {
  // Option names to sort A->Z. Add your exact option name / language here.
  var SORT_OPTIONS = ['color', 'colour', 'couleur'];

  function valueText(label) {
    var t = label.querySelector('.variant-option__button-label__text') || label;
    return (t.textContent || '').trim();
  }

  function sortOptions() {
    document.querySelectorAll('variant-picker fieldset.variant-option--buttons').forEach(function (fs) {
      var legend = fs.querySelector('legend');
      if (!legend) return;
      var name = legend.textContent.trim().toLowerCase();
      if (!SORT_OPTIONS.some(function (k) { return name.indexOf(k) !== -1; })) return;

      var items = Array.prototype.slice.call(fs.querySelectorAll('.variant-option__button-label'));
      if (items.length < 2) return;

      var sorted = items.slice().sort(function (a, b) {
        return valueText(a).localeCompare(valueText(b), undefined, { numeric: true, sensitivity: 'base' });
      });
      if (sorted.some(function (el, i) { return el !== items[i]; })) {
        sorted.forEach(function (el) { fs.appendChild(el); });
      }
    });
  }

  sortOptions();

  // Horizon re-renders the picker when a shopper switches an option, so re-apply.
  document.querySelectorAll('variant-picker').forEach(function (picker) {
    new MutationObserver(sortOptions).observe(picker, { childList: true, subtree: true });
  });
});
</script>
```

That is the whole fix. Save, then view the product on your live storefront.

Here is the same product after the script. The colors are now A to Z. The sizes stayed exactly as they were.

![Color buttons now sorted A to Z with sizes untouched on the Horizon product page](/images/blog/shopify-sort-variant-options-alphabetically/03-colours-sorted-az.png)

I tested this on a Horizon store. The color buttons went from import order to clean A-Z order. The size option kept the order I set. Switching a size did not scramble the colors back.

### How the script works, in plain words

You do not need to read code to use it. But here is what each part does.

- It finds the color option group on the page. It matches the option name against your word list.
- It grabs each color button and reads its text.
- It sorts those buttons by name, A to Z. Numbers inside names sort naturally too, so "10" comes after "2", not before.
- It moves the whole button, not just the label. That keeps every button linked to the right variant. So the shopper still buys the color they clicked.
- Horizon rebuilds the button list each time a shopper changes an option. So the script watches for that and re-sorts. This is the "MutationObserver" line. It means the order never jumps back to random.

Nothing in your admin changes. Nothing in your variant data changes. This is display only. Turn it off by deleting the block, and you are back to where you started.

### To cover a different option name

Say your color option is named "Shade". Find this line in the script:

```js
var SORT_OPTIONS = ['color', 'colour', 'couleur'];
```

Add your word in lowercase:

```js
var SORT_OPTIONS = ['color', 'colour', 'couleur', 'shade'];
```

Save. That is all. You can add as many words as you need.

## An alternative: reorder in admin (no code)

If you only have a few colors, skip the script. Just drag them.

Go to your product in Shopify admin. Open the variants area. Drag each color value into A-Z order. Save.

This changes the real stored order. So it shows everywhere: the product page, quick add, and any app that reads variants.

The catch is scale. With 5 or 8 colors this is fine. With 30 colors it is slow and error prone. On Horizon the drag handles can be fiddly with a long list. That is exactly why the merchant in this thread asked for a script instead.

There is also the CSV route. You can export your products, sort the color rows alphabetically in a spreadsheet, and re-import. It works, but it is heavy. Re-sorting rows can break the link between a color and its variant image if you are not careful. For a display change, the script is far lighter.

My rule of thumb:

- A handful of colors, and you want it saved in the data: drag in admin.
- Many colors, or many products: use the script.

## Does Shopify have a setting to sort variant options?

No. There is no native toggle to sort variant options alphabetically.

Shopify renders variant options in their stored order. The theme editor has no A-Z switch for the variant picker. This is true on Horizon, Dawn, and the other free themes.

So to control display order you either reorder the data by hand or sort it with a small script. The script in this guide is the fastest way to get a clean A-Z picker without editing every product.

## How do I sort Shopify colors alphabetically without an app?

Use the Custom Liquid block above. No app needed.

The block holds a short script. It sorts the color buttons on the storefront. It leaves your data alone. It costs nothing and adds no third-party code to your store.

If you prefer no code at all, drag the color values into order in admin. That also needs no app. The trade-off is time when the list is long.

Both paths keep you off the app store. The script scales better. The drag method saves the order in your data.

## Will sorting variants alphabetically change my variant images or inventory?

No. The script only moves the buttons on screen.

Each button stays tied to its own variant. So the price, the image, and the stock for each color stay correct. When a shopper clicks "Blue", they still get the Blue variant, its Blue photo, and its Blue stock.

Your admin stays untouched. Your inventory counts stay untouched. Reports and orders are not affected. This is a pure display change in the browser.

If you use the drag method in admin instead, that does change the stored order. But it still does not change images or stock. It just re-sequences the variants.

## Why are my imported variants in random order?

Because the import kept the order of the source feed.

Apps like Reputon, DSers, and Matrixify push variant rows in the order they receive them. eBay, AliExpress, and supplier feeds are rarely sorted by color. So your colors land in that raw order.

The theme then shows that order as is. It looks random because the source was never sorted. Nothing is broken. The order is just inherited from the feed.

Sorting it after import is exactly what the script does, without a re-import.

## Does this work on the Shopify variant picker in Horizon?

Yes. The script targets Horizon's variant picker directly.

Horizon builds its option buttons inside a `variant-picker` element, with each option group in a `fieldset`. The script reads those, sorts the color group, and re-applies after Horizon re-renders. That re-render step is why a generic snippet from another theme often does nothing here.

A snippet written for Dawn or an older theme uses different class names. It will not find Horizon's buttons. This one is built for Horizon's structure, so it works where the copy-paste answers fail.

## If it did not work

A few things to check.

- **Nothing changed after saving.** Make sure your color option name contains one of the words in the list. Open the script and confirm your word is there, in lowercase. "Couleur dominante" works because "couleur" is in the list.
- **Only the color option should sort.** If your sizes also reordered, your size option name probably contains a listed word by accident. Rename the option, or remove the stray word from the list.
- **It works, then scrambles when I click a size.** This means the re-apply part was removed. Keep the whole script, including the `MutationObserver` block at the bottom. That is what re-sorts after Horizon rebuilds the buttons.
- **The block is on the wrong section.** The Custom Liquid block must sit on the product template so it loads on product pages. Add it under Product information, not in the footer.
- **Swatch style vs button style.** The script targets button-style options. If your theme setting shows colors as dropdowns instead of buttons, the picker structure differs. Switch the color option to buttons or swatches in the theme settings, then re-check.

## Definitions and distinctions people confuse

**Variant vs option.** An option is the label, like "Color" or "Size". A variant is one full combination, like "Blue / Large". Sorting an option reorders its values. It does not create or delete variants.

**Display order vs stored order.** Display order is what the shopper sees on the page. Stored order is what lives in your admin data. The script changes display order only. Dragging in admin changes stored order.

**Sorting variants vs sorting products.** This guide sorts the option values inside one product. It does not sort products inside a collection. Collection sorting is a separate setting in admin.

**Custom Liquid block vs theme code editing.** A Custom Liquid block is a safe box in the theme editor. You can add or remove it with no risk to core theme files. Editing theme code directly is more powerful but easier to break. For this fix, the block is enough.

**Alphabetical vs custom order.** The script sorts A to Z. If you want a custom order, like putting your best-selling color first, alphabetical sorting is the wrong tool. For that, drag the variants into your chosen order in admin instead.

To recap the whole thing: Shopify has no native switch to sort variant options alphabetically. Horizon shows colors in import order. A small Custom Liquid script sorts the color buttons A to Z on the storefront, keeps every button tied to the right variant, leaves your sizes and data untouched, and re-applies each time the picker re-renders. For a short list, dragging in admin is the no-code path. For a long list, the script wins.


---

---
title: Square Size Buttons on Shopify Dawn (Custom CSS)
description: Turn Dawn's round size pills into square boxes that match the Add to cart button, with one block of CSS and no app.
---

## The problem

Dawn shows product sizes as round pills by default. They are oval buttons with a thin grey outline and a pale fill when selected.

Many stores want a sharper, more premium look. A merchant on the Shopify Community asked for exactly that. They wanted the size pills to be square, with a thin border and the size text in the middle. The look they described was "the same as the Add to cart button".

Their store runs Dawn 16.0.0. I rebuilt their product page on a test store with the same theme version and the same sizes, XS to XXL. Then I changed the pills until they matched the Add to cart button.

Here is the starting point. This is how Dawn draws the sizes before any change.

![Dawn size pills before the change, drawn as round ovals](/images/blog/shopify-square-size-buttons-dawn/01-round-size-pills-before.png)

And this is the result after the fix.

![Dawn size pills after the change, drawn as square boxes with a thin border](/images/blog/shopify-square-size-buttons-dawn/02-square-size-pills-after.png)

The selected size stays filled in black. A sold out size keeps its strike through line.

## What you can change without code

Dawn has a settings panel for the pills. Open **Theme settings** in the theme editor and look for **Variant pills**. Variant is Shopify's word for one version of a product, such as the medium size.

The panel has three sliders in its Border group.

| Setting | Dawn's default | What it does |
| --- | --- | --- |
| Thickness | 1px | How thick the outline is |
| Opacity | 55% | How strong the outline colour is. 100% is solid |
| Corner radius | 40px | How round the corners are. 0 is square |

Set Corner radius to 0 and Opacity to 100%. The pills turn into boxes with a solid outline. That already looks close to the Add to cart button.

There is one thing the sliders cannot do. They cannot give every box the same height and a minimum width. Each pill is as wide as its text plus padding, so a short size like S looks narrower than XL. If you want an even row of boxes, add a small block of CSS.

CSS is the code that controls how a page looks. Dawn gives you a box for it, so you do not need to edit any theme files.

## Make the sizes equal squares with Custom CSS

Dawn has one place for your own style rules. It is called **Custom CSS** and sits at the bottom of Theme settings. Rules you put there apply to the whole store.

Here is the code I used. It sets a thin solid border, removes the rounding, and gives each box the same height and a minimum width of 5rem. A rem is a size unit tied to the text size. On Dawn, 5rem is 50 pixels.

```css
.product-form__input.product-form__input--pill input[type="radio"] + label {
  border: 1px solid rgb(var(--color-foreground));
  border-radius: 0;
  min-width: 5rem;
  height: 5rem;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-form__input.product-form__input--pill input[type="radio"] + label::before {
  border-radius: 0;
}
```

The first rule styles the box. The second removes a hidden layer Dawn adds behind each pill for its optional shadow, so no round edge shows through.

On my test store the boxes came out 50 pixels tall. They were 50 to 58 pixels wide for S to XL, and about 66 pixels for XXL, which has the most letters.

## Step by step

Every step below is the screen you will see in your own admin.

### 1. Open the theme editor

Go to **Online Store** > **Themes**. Click **Edit theme** on the theme you want to change.

Work on a copy first if the store is live. Click the three dots next to your theme and choose **Duplicate**. Test there, then repeat the steps on the live theme.

![The Edit theme button on the Themes page](/images/blog/shopify-square-size-buttons-dawn/03-edit-theme-button.png)

### 2. Open Custom CSS

Click the **Theme settings** icon. It is the gear in the left toolbar. Scroll down the list and click **Custom CSS**.

### 3. Paste the code

Click inside the box. Press the End key, press Enter to start a new line, then paste the code from above.

Do not delete what is already in the box. Other rules there belong to your theme or to a past change. Put the new code under them.

![Theme settings with the Custom CSS box open](/images/blog/shopify-square-size-buttons-dawn/04-theme-settings-custom-css.png)

### 4. Save

Click **Save** in the top right corner. A black message says **Changes saved**. The preview on the right shows the new boxes straight away.

![The Save button in the theme editor toolbar](/images/blog/shopify-square-size-buttons-dawn/05-save-button.png)

This is what the editor looked like on my test store after I pasted and saved. The code is in the box and the preview shows square boxes.

![Dawn theme editor with the pasted CSS saved and square size boxes in the preview](/images/blog/shopify-square-size-buttons-dawn/06-code-saved-in-editor.png)

## What each line of the code does

You do not need to understand the code to use it. If you want to tweak it, this is what each line controls.

- **border: 1px solid ...** draws a thin solid outline in your main text colour.
- **border-radius: 0** removes the rounded corners.
- **min-width: 5rem** stops a box from being narrower than 50 pixels.
- **height: 5rem** gives every box the same height.
- **padding: 0 1rem** adds space left and right of the letters, and none above or below.
- **display, align-items and justify-content** put the size text in the middle of the box, both across and up and down.

## Do the boxes fit on a phone?

My before and after screenshots were taken at a phone width of 430 pixels. All six boxes, XS to XXL, fit on one row there with the 5rem setting.

If you have more sizes, or longer names, the boxes wrap onto a second row. That is fine and happens by itself. If you would rather keep them in one row, lower the **5rem** to 4rem.

## Change the size of the boxes

Change **5rem** in the code to make the boxes bigger or smaller. Both numbers should match if you want a square. Try 4rem for a compact look and 6rem for a chunky one.

If your sizes are long words like "Extra Large", the box needs to grow wider. Remove `height` and use padding instead, for example `padding: 1.2rem 1.6rem;`.

## Change the border colour

The code uses your theme's main text colour for the border. That is black on a standard Dawn store, which matches the Add to cart button.

To use another colour, replace `rgb(var(--color-foreground))` with a colour code, such as `#999999` for grey.

## Why the border and the corners come from two places

You may notice that the settings panel and the CSS both change the same things. The settings panel is the clean way to do it when the sliders are enough. The CSS wins when the two disagree, because Dawn reads the Custom CSS box after its own stylesheets. I checked this in the page source of the test store. The Custom CSS block comes after the file that styles the size pills.

That is also why the code starts with two class names instead of one. Two class names make the rule stronger, so it still applies if your theme or an app adds its own pill style later.

## What if it did not work?

**Nothing changed in the preview.** Check that you pasted the code into **Custom CSS** under **Theme settings**. The same box exists inside individual sections, and rules there only apply to that section.

**The pills are still round on one page.** The code targets the size pills on the product page. Other places that show sizes, such as a quick add popup, may use their own styling.

**You use dropdowns, not pills.** Dawn can show options as a dropdown instead. These steps change pills only. In the theme editor, open your product page and click the variant picker block. Switch its type to pills.

**The sold out size looks different.** That is intended. Dawn gives a sold out size a paler border and a strike through line so shoppers can tell it is unavailable. If you want to hide unavailable sizes instead, see [how to hide unavailable variants](/blog/shopify-hide-unavailable-variants).

**You use Horizon, not Dawn.** Horizon builds its variant buttons differently, and the class names above do not exist there. The post on [turning Horizon variant buttons into a dropdown](/blog/shopify-variant-dropdown-instead-of-buttons) has the Horizon version of sharp corners.

## Related changes you might want

Once the boxes match your Add to cart button, a few neighbouring changes usually follow.

- Make the option name bold: [bold the variant option name](/blog/shopify-bold-variant-option-name).
- Fix a variant list that grows too tall: [too many variants layout](/blog/shopify-too-many-variants-layout).
- Learn where the Custom CSS box lives and what it can do: [how to add custom CSS in Shopify](/blog/how-to-add-custom-css-in-shopify).

## Summary

- In the editor, scroll the settings list to the box labelled Custom CSS.
- Paste the code under anything already in the box and click **Save**.
- Change **5rem** to adjust the box size.
- Use the **Variant pills** sliders if you only want sharp corners and a solid border.

Tested on Dawn 16.0.0 with a six size product, XS to XXL, with XS selected and XXL sold out.


---

---
title: Add a Star Rating to Shopify Without an App
description: Add product star ratings to a Shopify theme with custom code, and when a free reviews app is the smarter route.
---

## The problem

A merchant asked about this on the Shopify Community. He wanted a star rating on his product page. Not from an app. He wanted custom code, and he wanted every part of it editable.

He posted a picture of the look he was after. Filled stars, an empty star for the leftover, a rating number, and a line of small print like "4,777 Aggregated Reviews".

This is a very common ask. You see a star rating on a competitor store and want the same badge on yours. But you do not want to install a full reviews app just to show it.

I reproduced this on a test store running Kalles, the same theme the merchant used. Then I built a single theme section that draws the exact badge and exposes every value in the theme editor. No app. No paid plan. It drops straight in.

Here is the result on a live Kalles store.

![Custom star rating badge rendered on a live Kalles product page](/images/blog/shopify-star-rating-without-app/01-star-rating-rendered-kalles.png)

The rest of this post shows how it works, how to add it, and the one big decision to make before you copy any code.

## Why a custom star rating is not the same as reviews

This is the part most forum answers skip. It matters, so read it first.

There are two completely different things people mean by "shopify star rating".

**A star display.** This is a graphic. It shows stars and a number that you type in. It does not collect anything. It does not change on its own. You decide it says 4.7, and it says 4.7 until you edit it. This is what the merchant asked for, and it is what custom code gives you fast.

**A reviews system.** This collects real ratings from real buyers. Customers leave a rating. The store averages them. The star display updates by itself. This needs a database behind it, which a theme snippet does not have. So this part needs an app.

A star made of custom code is honest only if the number is real. If you type "4.7 from 4,777 reviews" and you have not sold 4,777 units, that is a made-up claim. It can mislead shoppers and it can breach the review-display rules many regions enforce.

So decide up front:

- You want a **rating figure you control** (a store-wide badge, a trust line, a hero number you can back up). Custom code is perfect. Keep reading the fix below.
- You want **real, per-product reviews that customers submit**. Skip to the free app section. Custom code cannot do that job.

## What you get with the custom code

The section I built draws the star badge with plain SVG stars and a little CSS. Everything is a theme setting, so you never touch code again after pasting it once.

The clever part is the partial star. It is exact, not a rounded half. Two identical rows of stars sit on top of each other. The empty row is grey. The filled row is coloured and clipped to a percentage. Set the rating to 4.7 and the fifth star fills to 94 percent. Set 4.5 for a true half. Set 5 for full. I tested this on the Kalles store, and the badge above is that render, with the fifth star clipped to 94 percent.

You can change all of this from the theme editor:

- The rating number, and how many stars total (3 to 10).
- Filled star colour, empty star colour, star size, and the gap between stars.
- Show or hide the (4.7) number.
- The count text and the label next to it, like "4,777 Aggregated Reviews".
- Text colour and size.
- Background colour, corner radius, padding, and left/center/right alignment.

## The fix: add the star rating section

This works on Kalles and on most themes, because it is a self-contained section. Nothing in it depends on Kalles internals.

**Step 1: open the code editor.**

Go to Online Store > Themes. Find your theme. Click the "..." menu, then Edit code.

Under the Sections folder, click Add a new section. Name it `custom-star-rating`. Shopify creates a starter file with placeholder content. Delete everything inside it.

![Shopify code editor with a new custom-star-rating section file under Sections](/images/blog/shopify-star-rating-without-app/02-edit-code-add-section-file.png)

**Step 2: paste the code.**

Paste the block below into the empty file. Then click Save at the top right.

```liquid
{%- liquid
  assign max = section.settings.max_stars
  assign rating = section.settings.rating
  if rating > max
    assign rating = max
  endif
  assign pct = rating | times: 100.0 | divided_by: max
  assign star_path = 'M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.857 1.401-8.169L.132 9.21l8.2-1.192z'
-%}

{%- capture stars -%}
  {%- for i in (1..max) -%}
    <svg class="csr__star" viewBox="0 0 24 24" width="{{ section.settings.star_size }}" height="{{ section.settings.star_size }}" aria-hidden="true"><path d="{{ star_path }}"/></svg>
  {%- endfor -%}
{%- endcapture -%}

<div class="csr csr--{{ section.settings.alignment }}" style="
  --csr-fill: {{ section.settings.star_fill_color }};
  --csr-empty: {{ section.settings.star_empty_color }};
  --csr-gap: {{ section.settings.star_gap }}px;
  --csr-text: {{ section.settings.text_color }};
  --csr-text-size: {{ section.settings.text_size }}px;
  --csr-bg: {{ section.settings.background_color }};
  --csr-pad-y: {{ section.settings.padding_vertical }}px;
  --csr-pad-x: {{ section.settings.padding_horizontal }}px;
  --csr-radius: {{ section.settings.corner_radius }}px;
  --csr-pct: {{ pct }}%;
">
  <div class="csr__inner">
    <span class="csr__stars" role="img" aria-label="{{ rating }} out of {{ max }} stars">
      <span class="csr__stars-base">{{ stars }}</span>
      <span class="csr__stars-fill">{{ stars }}</span>
    </span>

    {%- if section.settings.show_number -%}
      <span class="csr__num">({{ rating }})</span>
    {%- endif -%}

    {%- if section.settings.review_count != blank -%}
      <span class="csr__count">{{ section.settings.review_count }} {{ section.settings.count_label }}</span>
    {%- endif -%}
  </div>
</div>

<style>
  #shopify-section-{{ section.id }} .csr__inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    flex-wrap: wrap;
    background: var(--csr-bg);
    padding: var(--csr-pad-y) var(--csr-pad-x);
    border-radius: var(--csr-radius);
  }
  #shopify-section-{{ section.id }} .csr--left   { text-align: left; }
  #shopify-section-{{ section.id }} .csr--center { text-align: center; }
  #shopify-section-{{ section.id }} .csr--right  { text-align: right; }
  #shopify-section-{{ section.id }} .csr--center .csr__inner { justify-content: center; }
  #shopify-section-{{ section.id }} .csr--right  .csr__inner { justify-content: flex-end; }

  #shopify-section-{{ section.id }} .csr__stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    white-space: nowrap;
  }
  #shopify-section-{{ section.id }} .csr__stars-base,
  #shopify-section-{{ section.id }} .csr__stars-fill {
    display: inline-flex;
    gap: var(--csr-gap);
  }
  #shopify-section-{{ section.id }} .csr__stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--csr-pct);
    overflow: hidden;
  }
  #shopify-section-{{ section.id }} .csr__stars-base .csr__star { fill: var(--csr-empty); }
  #shopify-section-{{ section.id }} .csr__stars-fill .csr__star { fill: var(--csr-fill); }

  #shopify-section-{{ section.id }} .csr__num,
  #shopify-section-{{ section.id }} .csr__count {
    color: var(--csr-text);
    font-size: var(--csr-text-size);
    line-height: 1.2;
  }
  #shopify-section-{{ section.id }} .csr__num { font-weight: 600; }
</style>

{% schema %}
{
  "name": "Custom star rating",
  "tag": "section",
  "class": "section-custom-star-rating",
  "settings": [
    { "type": "header", "content": "Rating" },
    { "type": "range", "id": "rating", "label": "Rating", "min": 0, "max": 5, "step": 0.1, "default": 4.7 },
    { "type": "range", "id": "max_stars", "label": "Number of stars", "min": 3, "max": 10, "step": 1, "default": 5 },
    { "type": "checkbox", "id": "show_number", "label": "Show rating number", "default": true },

    { "type": "header", "content": "Review count text" },
    { "type": "text", "id": "review_count", "label": "Count", "default": "4,777" },
    { "type": "text", "id": "count_label", "label": "Label", "default": "Aggregated Reviews*" },

    { "type": "header", "content": "Stars" },
    { "type": "color", "id": "star_fill_color", "label": "Filled star color", "default": "#E8836B" },
    { "type": "color", "id": "star_empty_color", "label": "Empty star color", "default": "#4a4a4a" },
    { "type": "range", "id": "star_size", "label": "Star size", "min": 10, "max": 48, "step": 1, "unit": "px", "default": 22 },
    { "type": "range", "id": "star_gap", "label": "Space between stars", "min": 0, "max": 14, "step": 1, "unit": "px", "default": 3 },

    { "type": "header", "content": "Text" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#ffffff" },
    { "type": "range", "id": "text_size", "label": "Text size", "min": 10, "max": 30, "step": 1, "unit": "px", "default": 16 },

    { "type": "header", "content": "Layout" },
    { "type": "select", "id": "alignment", "label": "Alignment", "default": "left",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ]
    },
    { "type": "color", "id": "background_color", "label": "Background", "default": "#211d1a" },
    { "type": "range", "id": "corner_radius", "label": "Corner radius", "min": 0, "max": 40, "step": 1, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding_vertical", "label": "Vertical padding", "min": 0, "max": 80, "step": 2, "unit": "px", "default": 16 },
    { "type": "range", "id": "padding_horizontal", "label": "Horizontal padding", "min": 0, "max": 80, "step": 2, "unit": "px", "default": 16 }
  ],
  "presets": [
    { "name": "Custom star rating" }
  ]
}
{% endschema %}
```

**Step 3: drop the section onto the page.**

Go back to Online Store > Themes and click Customize. Open the page where you want the badge. Click Add section. Type "star". Pick Custom star rating.

![Shopify theme editor Add section picker filtered to Custom star rating](/images/blog/shopify-star-rating-without-app/03-add-section-customize.png)

Drag it wherever you want. On a product page, put it right under the title or under the price.

**Step 4: set your values.**

With the section selected, the settings panel on the left holds every knob. Rating, star count, colours, sizes, the count text, alignment, padding. Change one and the preview updates live.

![Custom star rating section settings in the Shopify theme editor](/images/blog/shopify-star-rating-without-app/04-star-rating-section-settings.png)

That is the whole custom-code route. One file, pasted once, then all clicks after that.

## The alternative: a free reviews app for real reviews

If you want ratings that customers actually leave, custom code is the wrong tool. You need a reviews app, and you do not need to pay for one.

Judge.me has a free plan. It is the most common free choice for Shopify product reviews. On the free plan you get:

- Unlimited review requests by email after an order.
- A star widget on the product page that shows the real average.
- A star badge you can place on collection pages and the home page.
- Photo reviews and a reviews carousel.

Setup is short. Install Judge.me from the Shopify App Store. It adds its widgets to your theme through the theme editor as app blocks. You place the star widget where you want it, the same way you added the section above. From then on the stars update themselves as reviews come in.

So the honest split is simple. Use the custom section when you control the number and want a styled badge. Use a free reviews app when you want genuine, self-updating shopify product reviews without app fees.

You can even run both. Collect real reviews with Judge.me on the product page, and use the custom badge for a hero trust line elsewhere, as long as the number matches reality.

## How do I add a star rating in Shopify without an app?

Add a theme section that draws the stars with code, then place it through the theme editor. That is exactly the fix above. You create one section file under Sections in Edit code, paste the Liquid and CSS, save, then add it to any page from Customize. No app is installed and no monthly fee applies. The trade-off is that the number is one you type, not one collected from buyers.

## How do I show a real average rating from reviews?

For a real average you need a reviews app, because the average has to be stored and recalculated as new reviews arrive. A theme file has no place to keep that running total. Install a free reviews app like Judge.me, let it collect ratings, and drop its star widget on the product page. The widget reads the live average and updates on its own. This is the correct answer whenever the goal is trust from real customers rather than a designed badge.

## Can I add a star rating with custom code and keep it editable?

Yes, and that is the point of building it as a section rather than a hard-coded snippet. Every value in the section above is a theme setting. You edit the rating, the star count, the colours, the sizes, and the label from the theme editor, with no code after the first paste. If instead you hard-code the stars directly into a template, you would have to open the code every time you want to change the number. The section approach keeps the shopify reviews custom code out of your way.

## Does the star rating work on any theme, not just Kalles?

Yes. I built and tested it on Kalles, but nothing in it relies on Kalles. It is a standalone section with its own SVG stars and its own scoped CSS. The styles are namespaced to the section id, so they will not clash with your theme. It works the same on Dawn, Horizon, and most Theme Store themes. The only thing that differs per theme is where the Add section button sits in the editor, and every theme has one.

## If it did not work

A few things trip people up. Here is how to fix each.

**The stars do not appear after saving.** Check that you pasted into a file under the Sections folder, not Snippets. Only sections show up in the Add section picker. Also confirm you deleted the starter placeholder before pasting.

**The section is not in the Add section list.** The file must contain the schema block at the bottom, including the presets line. If the schema has a typo, Shopify hides the section. Re-copy the whole block, top to bottom.

**The partial star fills the wrong amount.** The fill is rating divided by star count. If you set 8 stars and a rating of 4, the bar fills to half of eight stars, not four full stars. Keep the star count at 5 for a normal five-star scale.

**The colours look off.** The filled and empty colours are separate settings. If both are the same colour you cannot see the partial fill. Set the empty star to a light grey and the filled star to your brand colour.

**Two star badges show up.** You probably added the section twice. Open Customize, find the extra one in the section list, and remove it.

## Definitions people confuse

**Star rating.** The visual: stars, a fill level, a number. It is a display, not a data source.

**Product review.** A single customer's rating plus optional text and photos. Many reviews average into the rating.

**Reviews app.** Software that collects reviews, stores them, and averages them. It supplies the number your stars show. Judge.me is one free option.

**Theme section.** A block of Liquid and CSS you add and arrange in the theme editor. The custom star rating here is a section. It draws stars but stores no reviews.

**App block.** A widget an installed app injects into your theme. A reviews app's star widget is an app block. It reads live data from the app.

The one-line takeaway: if you only need to shopify add star rating as a designed badge with a number you stand behind, the custom section is the fastest and cheapest route. If you need real ratings from buyers, install a free reviews app. Pick the tool that matches the job, and the star rating shopify shoppers see will actually mean something.


---

---
title: Add a Sticky Bottom Navigation Bar in Shopify
description: Give mobile shoppers a fixed bottom navigation bar in Shopify with a free Liquid snippet - no app required.
---

## The problem

A merchant asked about this on the Shopify Community. They wanted a free, mobile-friendly bottom navigation bar for their store.

Their goal was simple. A bar that stays pinned to the bottom of the screen on phones, with quick buttons like Home, Shop, Search, Cart and Account. Always visible, so a shopper never has to scroll back up to move around the store.

This is the same pattern that most shopping apps use. A row of icons fixed to the bottom edge of the phone. On the web, Shopify does not ship one by default.

I reproduced the request on a test store on a Dawn theme. Dawn is Shopify's free reference theme, so if it works there it works on almost every free theme. Here is the result on a real phone. The bar sits at the bottom, and the Cart button carries a live count.

![Result on a phone: a sticky bottom navigation bar with Home, Shop, Search, Cart and Account, plus a live cart count badge](/images/blog/shopify-sticky-bottom-navigation-bar/04-result-mobile-sticky-bar.png)

That is a Shopify sticky bottom navigation bar, built with free Liquid code and nothing else. No app, no monthly fee. Below is exactly how to add it.

## Why Shopify has no built-in bottom bar

This is the part most forum answers skip, and it explains why you have to add code at all.

Shopify themes are built for one navigation menu at the top. The header holds your main menu, the logo, search and the cart icon. That layout came from desktop, where a top bar is the norm.

A **sticky bottom navigation bar** is a mobile-app idea. It puts the main actions within thumb reach at the bottom of the screen. Shopify's free themes were never given a setting for it, so there is no toggle to switch on.

You have two honest ways to add one. Pay for an app that injects a bar. Or paste a small piece of free Liquid code that draws the bar itself. This guide does the second, because it costs nothing and you control every button.

The word "sticky" here means the bar uses CSS `position: fixed`. Fixed means the element stays glued to one spot on the screen while the page scrolls behind it. That is the mechanism behind every sticky footer menu you have seen.

## Before you start: check your theme type

This fix works on any free Online Store 2.0 theme. That includes Dawn, Craft, Sense, Refresh, Ride, Taste and Spotlight.

Online Store 2.0 is Shopify's current theme system. The quick way to tell you have it: open the theme editor and look for an **Add section** button in the left panel. If it is there, you are on a 2.0 theme and this code will work.

Older "vintage" themes, like the original Debut, work differently and are not covered here. If you are unsure, you almost certainly have a 2.0 theme, because every new Shopify store ships with one.

You do not need coding skills. You paste the code once, then set the buttons from the theme editor with normal clicks.

## The fix: a free sticky bottom navigation bar

The code below is a self-contained theme section. A section is a block of a Shopify page that you can add and configure from the theme editor. Because it is one section, everything lives in a single file: the bar, its styles, its icons and its settings.

Once it is in, you never touch the code again. Labels, links, icons and colours are all set with clicks.

### Step 1. Add the code

Go to Online Store, then Themes. On your theme, open the `...` menu and choose **Edit code**.

In the file tree, find the **Sections** folder. Click **Add a new section**, name it `mobile-bottom-nav`, delete the starter code the editor drops in, paste the full code from the block below, then **Save**.

![Step 1: create a new section named mobile-bottom-nav in the Edit code screen](/images/blog/shopify-sticky-bottom-navigation-bar/01-add-section-edit-code.png)

Here is the complete code. Paste all of it.

```liquid
{%- comment -%} Sticky mobile bottom navigation bar {%- endcomment -%}
{%- liquid
  assign wrap_id = 'mbn-' | append: section.id
-%}

<style>
  #{{ wrap_id }}{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: flex;
    align-items: stretch;
    background: {{ section.settings.bg_color }};
    border-top: 1px solid {{ section.settings.border_color }};
    box-shadow: 0 -2px 12px rgba(0,0,0,.10);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #{{ wrap_id }} .mbn-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: {{ section.settings.bar_height }}px;
    text-decoration: none;
    color: {{ section.settings.icon_color }};
    font-size: 11px;
    line-height: 1;
    position: relative;
  }
  #{{ wrap_id }} .mbn-item svg{ width: 24px; height: 24px; }
  #{{ wrap_id }} .mbn-item.is-active{ color: {{ section.settings.active_color }}; font-weight: 600; }
  #{{ wrap_id }} .mbn-badge{
    position: absolute;
    top: 6px;
    left: 54%;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: {{ section.settings.badge_color }};
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
  }
  #{{ wrap_id }} .mbn-badge[hidden]{ display: none; }
  @media (min-width: {{ section.settings.hide_above }}px){
    #{{ wrap_id }}{ display: none; }
  }
  @media (max-width: {{ section.settings.hide_above | minus: 1 }}px){
    body{ padding-bottom: calc({{ section.settings.bar_height }}px + env(safe-area-inset-bottom)); }
  }
</style>

<nav id="{{ wrap_id }}" role="navigation" aria-label="Bottom navigation">
  {%- for block in section.blocks -%}
    {%- liquid
      assign is_active = false
      if block.settings.link == routes.root_url and request.page_type == 'index'
        assign is_active = true
      elsif block.settings.link contains '/cart' and request.page_type == 'cart'
        assign is_active = true
      elsif block.settings.link contains '/collections' and request.page_type == 'collection'
        assign is_active = true
      elsif block.settings.link contains '/account' and request.page_type contains 'customers'
        assign is_active = true
      endif
    -%}
    <a href="{{ block.settings.link | default: '#' }}"
       class="mbn-item{% if is_active %} is-active{% endif %}"
       {{ block.shopify_attributes }}>
      {%- case block.settings.icon -%}
        {%- when 'home' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>
        {%- when 'shop' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16l-1 13H5L4 7Z"/><path d="M8.5 7a3.5 3.5 0 0 1 7 0"/></svg>
        {%- when 'search' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></svg>
        {%- when 'cart' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M3 4h2l2.2 11.2a1 1 0 0 0 1 .8h8.6a1 1 0 0 0 1-.8L21 8H6"/></svg>
        {%- when 'account' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 5-6 8-6s6.5 2 8 6"/></svg>
        {%- when 'heart' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.5 2.8 5 6 5c2 0 3.2 1.2 4 2.4C10.8 6.2 12 5 14 5c3.2 0 4.7 3.5 3.2 6.4C19 15.6 12 20 12 20Z"/></svg>
        {%- when 'menu' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        {%- when 'phone' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h3l1.5 5-2 1.5a12 12 0 0 0 6 6l1.5-2 5 1.5v3a2 2 0 0 1-2 2A17 17 0 0 1 4 5a2 2 0 0 1 2-2Z"/></svg>
      {%- endcase -%}
      {%- if block.settings.show_cart_count -%}
        <span class="mbn-badge" data-mbn-count {% if cart.item_count == 0 %}hidden{% endif %}>{{ cart.item_count }}</span>
      {%- endif -%}
      <span>{{ block.settings.label }}</span>
    </a>
  {%- endfor -%}
</nav>

<script>
  (function(){
    var badges = document.querySelectorAll('#{{ wrap_id }} [data-mbn-count]');
    if(!badges.length) return;
    function paint(n){
      badges.forEach(function(b){ b.textContent = n; b.hidden = (n <= 0); });
    }
    function refresh(){
      fetch('{{ routes.cart_url }}.js', {headers:{'Accept':'application/json'}})
        .then(function(r){ return r.json(); })
        .then(function(c){ paint(c.item_count); })
        .catch(function(){});
    }
    var _fetch = window.fetch;
    window.fetch = function(){
      var url = arguments[0] && (arguments[0].url || arguments[0]);
      var p = _fetch.apply(this, arguments);
      if(typeof url === 'string' && /\/cart\/(add|change|update|clear)/.test(url)){
        p.then(function(){ setTimeout(refresh, 60); });
      }
      return p;
    };
    document.addEventListener('visibilitychange', function(){ if(!document.hidden) refresh(); });
  })();
</script>
```

The section also ships with a schema block that gives you the settings and the five default buttons. It is part of the same file. You can see the full schema in our forum reply, linked at the foot of this page.

### Step 2. Turn it on for every page

Go back to your theme and click **Customize** to open the theme editor.

In the left panel, find the **Footer** group. Click **Add section**, type "mobile", and choose **Mobile bottom nav**. Save.

![Step 2: add the Mobile bottom nav section under the Footer group in the theme editor](/images/blog/shopify-sticky-bottom-navigation-bar/02-add-under-footer-group.png)

Adding it to the Footer group is what makes the bar show on every page of the store, not just the home page. Because the code is fixed to the bottom, it floats above the footer rather than sitting inside it.

### Step 3. Set your links

Click the section in the editor. Each **Nav item** is one button in the bar.

For each one, set the **Label** (the text under the icon), the **Link** (where it goes), and pick an **Icon** from the dropdown. Icons include home, shop, search, cart, account, wishlist, menu and contact.

On your Cart button, turn on **Show cart item count**. That is what draws the live badge.

![Step 3: set each Nav item label, link and icon, and turn on Show cart item count](/images/blog/shopify-sticky-bottom-navigation-bar/03-nav-item-settings.png)

That is the whole setup. You now have a Shopify mobile bottom menu that you edit with clicks.

## An alternative: a no-code app

If you would rather not touch code at all, there are apps in the Shopify App Store that add a mobile bottom menu for you. Search "mobile bottom bar" or "sticky bottom navigation".

The trade-off is real. Most charge a monthly fee, they add their own script to every page, and you are tied to their layout and their support. For a bar this simple, that is a lot of overhead.

The free section above does the same job, loads no third-party script, and keeps every setting inside your own theme. I would only reach for an app if you want extras like a slide-up menu drawer or per-device scheduling.

## How do I make a Shopify menu stick to the bottom on mobile?

You give the element `position: fixed` and pin it with `bottom: 0`. Those two CSS rules are what turn a normal row of links into a sticky footer menu.

The code above already does this. The bar is fixed to the bottom, spans the full width with `left: 0` and `right: 0`, and sits above the page with a high `z-index` so nothing covers it.

You cannot get this from the standard theme menu settings alone. The header menu is built to sit at the top. To stick a menu to the bottom you either add the code here or use an app.

## Can I add a bottom nav bar without an app?

Yes. The section in this guide is a complete Shopify bottom nav bar with no app involved.

It is free, it lives in your theme, and it survives theme updates as long as you keep the section file. Because it is Liquid, it can read live store data like the cart count, which a pure image or link block cannot.

The only "cost" is pasting the code once. After that, everything is point and click.

## How do I add a live cart count to the bottom bar?

Turn on **Show cart item count** on the Cart button, as in Step 3.

The badge starts from Shopify's own `cart.item_count`. A small script then listens for add-to-cart and cart-update requests and refreshes the number without a page reload. So when a shopper adds an item, the badge ticks up right away.

If the count ever looks stale, a page refresh always corrects it, because the number is re-read from the cart on every load.

## How do I hide the sticky footer menu on desktop?

The code hides itself on wide screens automatically. That is handled by a media query tied to the **Hide on screens wider than** setting.

The default is 750px. Screens wider than that (tablets in landscape and desktops) do not see the bar. Phones do. You can raise or lower that number in the section settings if your breakpoint is different.

This matters because a fixed bottom bar on desktop looks out of place and wastes screen space. Keeping it mobile only is the correct default.

## If it did not work

A few things trip people up. Check these in order.

**The bar does not appear at all.** Make sure you added the section under the Footer group in the theme editor and saved. Pasting the code in Edit code alone is not enough. The section has to be added to a page.

**It shows on desktop too.** Your **Hide on screens wider than** value may be set very high. Lower it back toward 750px. Also confirm you are testing at a real phone width, not just a narrow browser window.

**The bar covers the footer or last row of content.** The code already adds bottom padding to the page to leave room. If your theme fights it, raise the **Bar height** setting slightly, which increases that padding.

**The cart badge stays hidden.** The badge only shows when the cart has items, and only on the button where you turned on Show cart item count. An empty cart shows no badge by design.

**Nothing saved in Edit code.** Confirm the file is named as a section and that you deleted the starter code before pasting. A leftover `{% schema %}` from the starter will clash with the one in this code.

## Terms people confuse

**Sticky vs fixed.** People say "sticky" for both, but they are different CSS values. `position: sticky` scrolls with the page until it hits an edge, then holds. `position: fixed` is pinned the whole time. A bottom navigation bar uses `fixed`, so it never moves.

**Header menu vs bottom bar.** Your theme's navigation menu is the list of links you build under Navigation in the admin. This bottom bar is separate. It has its own buttons, set inside the section. Editing your header menu does not change the bottom bar, and vice versa.

**Section vs snippet.** This code is a **section**, which can be added and configured in the theme editor. A snippet is a reusable code fragment with no editor settings. Using a section is why you get click-to-edit labels, links and colours instead of hard-coded values.

**Bottom bar vs footer.** The footer is the block of links and info at the very end of the page. It scrolls away. The Shopify fixed bottom menu for mobile floats on top and is always visible. They can coexist, and this bar sits above the footer.

That covers it. A free, editable, mobile-only sticky bottom navigation bar, tested on a Dawn store, with a live cart count and no app or monthly fee.


---

---
title: "Shopify Storage Limit: Why Your Product Photos Fill It Up"
description: "Every Shopify plan has a file storage limit, and your product photos count toward it. Here is what the limit is on each plan, how to see what is really using the space, and the one upload habit that stops you hitting it again. Measured on a real store."
---

## The problem

A merchant asked about this on the Shopify Community. They sell one-of-a-kind clothing. Every item is photographed, listed, sold once, and never restocked.

They are on the Advanced plan. They hit the storage limit. Support told them the only way to get more room was to move up to Plus, which takes the bill from \$399 a month to \$2,300 a month.

They had been deleting old product photos to buy time. That works for a while. It does not work forever when every product you have ever sold is unique and the photo is the only record of it.

They wanted to know if there was anything else to try.

There is. But the first thing to fix is a wrong assumption that keeps coming up in threads like this one.

## Your product photos do count

The common belief is that images added to a product are unlimited, and only the files you upload under Content then Files count against your plan.

That is not right, and believing it sends you down a dead end.

Shopify's own help page says every file you upload through the file picker lands on the Files page, and the file picker is what you use when you add media to a product. So a product photo is a file like any other file.

You can see it yourself. Search your Files page for one of your product image names. It is there, with a size, and a References column telling you which product uses it.

![A product photo listed in Content then Files, with its size and the product it belongs to](/images/blog/shopify-storage-limit/01-product-photos-in-files.png)

I checked this a second way, through Shopify's admin API. Asking for the store's file list returns product media alongside everything else, with the same file size field. There is one pool, and product photos are in it.

So if your product galleries are what is filling the store, moving your Files page uploads to an outside host will not help you at all.

## What the limit actually is on each plan

These are Shopify's published numbers, not estimates.

| Plan | File storage |
| --- | --- |
| Starter, Pause and Build, Retail, Basic | 100 GB |
| Grow | 300 GB |
| Advanced | 500 GB |
| Plus | 1 TB |
| Enterprise | 10 TB |

The paid storage add-on is real, and the merchant above was told correctly about it. It is \$100 a month per extra 1 TB on Plus and \$1,000 a month per extra 10 TB on Enterprise. It is in early access and it is available only on those two plans. There is no way to buy extra space on Advanced.

![Shopify's storage limit table, with Advanced at 500 GB and the paid add-on limited to Plus and Enterprise](/images/blog/shopify-storage-limit/02-plan-storage-limits.png)

One more thing worth knowing before you panic about a downgrade. If you move to a smaller plan and you are already over its limit, your existing files are left alone. You just cannot upload anything new until you delete enough to get back under.

## Video has its own separate pool

Check it before you start deleting photos.

Videos do not come out of your file storage. They have their own allowance:

| Plan | Video storage |
| --- | --- |
| Starter, Pause and Build, Retail, Basic | 50 GB |
| Grow | 500 GB |
| Advanced | 500 GB |
| Plus | 2 TB |
| Enterprise | 10 TB |

There is also a cap on how many videos and 3D models you can have at all: 250 on Basic, 1,000 on Grow, 5,000 on Advanced, 50,000 on Plus.

So if you have a handful of big product videos, they are not the reason your image space ran out.

## Find what is actually using the space first

Before you change anything, go and look. Shopify does not show you a storage meter, but the Files page gives you enough.

Go to Content, then Files. Click the **Size** column heading to sort largest first.

Two columns matter here.

**Size** tells you which files are worth removing. Deleting a hundred 20 KB icons frees nothing. Deleting ten 8 MB photos frees more than all of them.

**References** tells you what uses each file. A blank References cell means nothing on your store points at that file. Old theme assets, abandoned banners, a PDF you uploaded once. Those are the safe deletions and most stores have plenty.

![The Files page sorted by size, showing the References column](/images/blog/shopify-storage-limit/03-sort-files-by-size.png)

Sort by size, scroll the first page or two, and you will usually find the answer without touching a single product photo.

## The real cause is file size, not photo count

500 GB is an enormous amount of room. You do not fill it by having a lot of products. You fill it by uploading files that are far bigger than they need to be.

Here is the part that rarely gets said.

Shopify keeps whatever you upload as the master copy. It then builds every smaller version from that master itself, and it converts those versions to WebP automatically for browsers that support it. Your storefront never sends the master to a shopper.

So a huge master costs you storage and delivers nothing.

I measured this on a real Shopify CDN image, 832 by 1248 pixels:

- Uploaded as a PNG: **1.70 MB**. This is what counts against your plan.
- The same photo saved as a JPEG: **198 KB**.
- What a shopper's browser actually downloads at 800 pixels wide: **163 KB** of WebP, built by Shopify from the master.

![The same photo as a PNG, as a JPEG, and as the file a shopper actually receives](/images/blog/shopify-storage-limit/04-png-vs-jpeg-vs-served.png)

Same pixels. Same look on the page. Roughly nine times the storage.

## Two upload habits that stop the problem growing

**Save product photos as JPEG, not PNG.** PNG is built for graphics with flat colour and sharp edges, like a logo. For a photograph it is typically eight to ten times larger than a JPEG at the same visible quality. If your camera or phone is producing PNGs, or your editor is exporting them, that alone can be most of your storage.

Keep PNG only where you genuinely need a transparent background.

**Resize the long edge to about 2048 pixels before uploading.** Nothing on a Shopify storefront displays an image bigger than that, even on a large monitor. A 6000 pixel original from a modern camera is carrying four times the pixels for no visible gain.

Do those two things for new uploads and the problem stops growing today, whatever you decide about the old files.

This is about the file you upload, not how large the photo looks on the page. If your images are displaying too big in the theme, that is a separate setting: see [Shopify Product Image Size: Make It Smaller on the Page](/blog/shopify-product-image-size-smaller).

## What to do about products you have already sold

This was the merchant's real worry. Every item is unique, so every photo is a record.

You do not have to choose between the record and the space.

1. Go to Products and use **Export** to download a CSV. The export includes an image URL column with a link to every photo on every product.
2. Open the CSV and download those images to your own drive, or a folder in Google Drive or Dropbox. They are ordinary links.
3. Now delete the media from the sold products.

The product still exists. The orders still exist. The customer history still exists. Only the picture files go, and you have them.

If you have thousands of products, Matrixify handles the export and the bulk media removal in one pass and has a free tier.

## Hosting images outside Shopify: what actually works

This gets suggested in every thread on the subject, and it is half true.

It works for images you place yourself. A banner in a theme section, an image referenced from a metafield, a picture inside a product description. Those can point at any URL you like, including your own S3 or Cloudflare R2 bucket, and Shopify never stores them.

It does not work for the product media gallery.

I tested this. I added an image to a product from an external link using Shopify's own API. Shopify fetched it, copied it onto its CDN, and recorded a file size against it. The finished product media was a `cdn.shopify.com` file, not a link to the original host.

So external hosting will not shrink your product galleries. It only helps with the decorative images around them.

## Does Shopify compress images automatically?

Yes, on delivery. Not in storage.

Shopify's CDN resizes an image to the dimensions the theme asks for and converts it to WebP for browsers that accept it. That is why the numbers above show a shopper receiving 163 KB from a 1.70 MB master.

This is also why "convert your images to WebP" is not, on its own, a storage fix. Your visitors were already getting WebP. Converting only frees space if you re-upload the smaller file so it replaces the stored master.

Compression apps do exactly that, and it is worth checking which behaviour an app has before you install it. **Crush: Speed & Image Optimizer** (from \$4.99 a month) and **Tiny SEO Speed Image Optimizer** (free to install) both replace the stored file, which is the part that frees space.

## What is the maximum file size for one image?

Separate from your plan's total, each individual file has its own ceiling:

- Images: 20 MB, up to 25 megapixels, JPEG, PNG, WEBP, HEIC or GIF
- Videos: 1 GB, up to 10 minutes, MOV, MP4 or WEBM
- Other files: 20 MB, any type except HTML

Hitting the per-file limit gives you an upload error. Hitting your plan limit stops all uploads until you free space. They are different problems with the same symptom, so check which one you have.

## Files page versus product media: the distinction that confuses people

Three terms get used as if they mean the same thing.

**Product media** is what you add in the Media box while editing a product. It shows in the gallery on the product page.

**The Files page** is Content then Files. It holds everything, including product media, though the default view is sorted by date so recent uploads dominate and older product photos are easy to miss.

**Your storage limit** counts all of it together.

The reason the "product images do not count" myth persists is that product media does not always look like it is on the Files page. It is. Search for it by name and it appears, with its size and its References.

## What to check if you are still stuck

- **Sort by Size and look at the top twenty files.** If they are all several megabytes, you have a file size problem, not a quantity problem.
- **Look for blank References.** Unused files are free to delete and cost nothing to lose.
- **Check whether your originals are PNGs.** This is the single most common cause of a store using far more space than its catalogue size suggests.
- **Ask support for the breakdown.** Shopify can tell you what is counted. Ask specifically whether product media, theme assets, and app-uploaded files are included in the figure they quote you, so you know where to aim.

The merchant in the thread was told the truth about Plus and the add-on. What they were not told was that a 500 GB limit filled by product photos almost always means the photos are ten times bigger than they need to be, and that the storefront was never showing those big versions anyway.


---

---
title: "Shopify Structured Data: Schema That Survives Saving"
description: The Shopify rich text editor strips script tags, so JSON-LD pasted into a page or collection description disappears on save. Here is the Custom Liquid route that works, plus a metafield pattern for per-collection schema.
---

## The problem

A merchant on the Shopify Community was adding structured data to an industrial products catalog. Each product category needed its own JSON-LD: CollectionPage on some, FAQ on others, BreadcrumbList throughout. Because every category was different, a single block of schema in the theme's `<head>` would not do.

So they pasted the JSON-LD into the collection description, using Shopify's rich text editor:

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage"
}
</script>
```

The editor accepted it. They clicked **Save**. The entire `<script>` block vanished.

They tried it on several pages. Same result every time.

## Why the editor strips it, and why that is correct

This is expected behaviour, not a bug, and it is worth understanding before you go looking for a way around it.

Shopify sanitises HTML that comes out of the rich text editor. Any `<script>` tag is removed, along with inline event handlers like `onclick` and a handful of other vectors.

The reason is that the rich text editor is a field that staff, apps, and imported CSV files all write into. If script tags survived, an imported product description would be able to run JavaScript on your storefront. That is a stored cross-site scripting hole, and it would be a serious one on a platform hosting millions of stores.

So the sanitiser is doing its job. What you need is a field that is *not* the rich text editor.

Shopify gives you one, for free, in the theme editor.

## The fix: a Custom Liquid section

Custom Liquid is a built-in section available in every Online Store 2.0 theme. It renders whatever you put in it, essentially unfiltered, and it is edited through the theme editor rather than through a content field. Script tags survive.

Better still, it lets you generate the schema from real store data rather than typing it out, which means it stays correct as the catalog changes.

### Step 1: open the collection template

Go to **Online Store**, then **Themes**, then **Customize**.

In the top-left page selector, choose **Collections**, then **Default collection**.

### Step 2: add the Custom Liquid section

Under **Template** in the left sidebar, click **Add section** and choose **Custom Liquid**.

![Add section, then Custom Liquid, on the default collection template](/images/blog/shopify-structured-data/01-add-section-custom-liquid.jpeg)

### Step 3: paste the schema

Paste this into the Liquid code box and click **Save**.

```liquid
{%- if collection -%}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": {{ collection.title | json }},
  "description": {{ collection.description | strip_html | truncate: 300 | json }},
  "url": {{ request.origin | append: collection.url | json }},
  "hasPart": {
    "@type": "ItemList",
    "numberOfItems": {{ collection.products_count }},
    "itemListElement": [
      {%- for product in collection.products limit: 25 -%}
      {
        "@type": "ListItem",
        "position": {{ forloop.index }},
        "name": {{ product.title | json }},
        "url": {{ request.origin | append: product.url | json }}
      }{%- unless forloop.last -%},{%- endunless -%}
      {%- endfor -%}
    ]
  }
}
</script>
{%- endif -%}
```

![The JSON-LD rendering from a Custom Liquid section](/images/blog/shopify-structured-data/02-json-ld-in-custom-liquid.jpeg)

Because this sits on the **default collection template**, it applies to every collection at once. Each one renders its own title, description, URL and product list. Add a collection next year and it gets valid schema with no further work.

### The `| json` filter is the important part

Notice that every value goes through `| json` rather than being wrapped in quotes by hand.

That filter does two jobs. It adds the surrounding quotes, and it escapes anything inside the string that would break the JSON: double quotes, backslashes, newlines, and unicode.

Skip it and a single product called `12" Steel Pipe` produces invalid JSON, which Google discards. You get no error and no rich result, just nothing. This is the single most common reason hand-written Shopify schema does not work.

The same applies to `strip_html`. Collection descriptions contain markup, and raw markup inside a JSON string value is invalid.

## Per-collection schema, without editing the theme again

The default template gets you one schema shape across every collection. The merchant in that thread needed different shapes for different categories.

Rather than building a Custom Liquid section per collection, store the schema as data and render it once.

### Step 1: define the metafield

Go to **Settings**, **Custom data**, **Collections**, then **Add definition**.

Name it `JSON-LD`. Set the type to **Multi-line text**. Save.

That gives you `collection.metafields.custom.json_ld`.

### Step 2: fill it in per collection

On each collection page, scroll to the metafields section and paste that category's raw JSON-LD. Just the `{ ... }` object, with no `<script>` wrapper.

The metafield field is not the rich text editor, so nothing is stripped.

### Step 3: render it

Add this to the same Custom Liquid section:

```liquid
{%- assign ld = collection.metafields.custom.json_ld -%}
{%- if ld != blank -%}
<script type="application/ld+json">
{{ ld }}
</script>
{%- endif -%}
```

Now adding a new category with its own schema is a copy and paste into a metafield. The theme is never touched again.

### The version that does both

In practice you want the generated CollectionPage everywhere plus an optional override. Combine them:

```liquid
{%- assign ld = collection.metafields.custom.json_ld -%}
{%- if ld != blank -%}
  <script type="application/ld+json">{{ ld }}</script>
{%- elsif collection -%}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    "name": {{ collection.title | json }},
    "url": {{ request.origin | append: collection.url | json }}
  }
  </script>
{%- endif -%}
```

Every collection gets baseline schema. Collections that need something specific get it from the metafield, and the fallback steps aside.

## Check what your theme already outputs first

This is the step that gets skipped, and skipping it causes the most common structured data problem on Shopify: duplicate schema.

Most modern themes, including Dawn, already emit `Product` and `BreadcrumbList` JSON-LD. If you add your own without checking, you end up with two Product blocks describing the same product with slightly different data. Google has to pick one, and which one it picks is not up to you.

Check before you add anything:

```bash
curl -sL -A "Mozilla/5.0" https://yourstore.com/collections/your-collection \
  | grep -o 'application/ld+json' | wc -l
```

Then read what is in them:

```bash
curl -sL -A "Mozilla/5.0" https://yourstore.com/products/some-product \
  | grep -A 30 'application/ld+json'
```

If your theme already outputs Product schema, do not add another one. Extend instead: add the types your theme does not cover, which on most themes means `Organization`, `WebSite` with `SearchAction`, and `CollectionPage`.

Then validate the result in Google's Rich Results Test and the Schema.org validator. Both accept a pasted URL.

## What structured data actually gets you in 2026

Worth being honest about, because expectations here are often out of date.

**Product schema** still drives price, availability and review stars in search results, and it feeds Google Merchant Center. This is the one with real, measurable value for a store.

**BreadcrumbList** changes the URL line in a result into a readable path. Small, cheap, reliable.

**Organization and WebSite** feed the knowledge panel and sitelinks search box. Site-wide, set once.

**CollectionPage and ItemList** do not produce a rich result of their own. Their value is comprehension: they tell a crawler what the page is and what is on it. That matters more now that AI search surfaces are reading structured data to summarise pages.

**FAQPage** no longer produces rich results for commercial sites. Google restricted FAQ rich results to government and health sites in August 2023. You can still emit it for comprehension, but do not expect the accordion in search results.

**HowTo** was removed entirely in September 2023. Do not build it.

That last pair matters here, because the merchant's original plan mentioned FAQ schema per category. Worth knowing the return on that is now comprehension only.

## Common questions

**Can I put JSON-LD in a page's rich text editor at all?**

No. Any route through the rich text editor is sanitised. That includes page content, product descriptions, collection descriptions, and blog post bodies.

**What about the theme's `<head>`, in theme.liquid?**

That works and it is the right place for site-wide schema like Organization and WebSite. It is the wrong place for per-collection schema, because you end up with a growing `if` block keyed on collection handles, which is exactly the maintenance problem the metafield approach avoids.

**Do I need an app for this?**

No. Apps that inject JSON-LD exist and some are good, particularly if you want a UI for non-technical staff. But they add a monthly cost and another script on your storefront to do something Custom Liquid does for free.

**Will this survive a theme update?**

Custom Liquid sections are stored in the template's JSON, not in a theme file, so they persist through theme updates within the same theme. They do not carry across if you switch to a different theme, so keep a copy of the code.

**Does Shopify sanitise metafields?**

Multi-line text metafields store what you put in them. What matters is that you render it yourself in Liquid, which you control. This is also why you should only put schema you wrote into that field, not content pasted from elsewhere.

**Can I use this on products and pages too?**

Yes, same approach. Add a Custom Liquid section to the product template or a specific page template. For products, check what your theme already outputs first, because Product schema is the one themes most often include.

## If it did not work

**Nothing renders on the storefront.** Check the section is on the template you are actually viewing. The default collection template does not apply to collections that have been assigned an alternate template.

**The Rich Results Test reports a parsing error.** Almost always a missing `| json` filter, or an unescaped quote in a product title. View source, copy the rendered JSON, and paste it into a JSON validator to find the exact character.

**Google shows no rich result even though the schema validates.** Structured data makes a page eligible for a rich result, it does not guarantee one. And for CollectionPage there is no rich result to get. Check Search Console's Enhancements reports for what Google actually recognised.

**You now have two Product blocks.** Your theme was already emitting one. Remove yours, or narrow it to types the theme does not cover.

## Tested on

Built and verified on a Shopify dev store: added a Custom Liquid section to the default collection template, confirmed the `<script type="application/ld+json">` block renders in the page source and survives saving, then confirmed the same content pasted into the collection description through the rich text editor is stripped on save. The generated JSON was checked through a JSON validator with a deliberately quote-containing product title to confirm the `| json` filter handles it.


---

---
title: Add Subscribe & Save to Shopify (Horizon)
description: Offer a subscribe-and-save option next to one-time purchase in Shopify Horizon, using a subscription app plus a small theme tweak.
---

## The problem

A merchant asked about this on the Shopify Community. They run the Horizon theme. They wanted a clean toggle on the product page.

Click **Subscribe and Save**, and the page shows the subscription price and a delivery frequency picker. Click **One-time purchase**, and it shows the normal Shopify price. Same button, two states.

They had already looked at several subscription apps. Their words: most of them did not offer the exact design in their screenshot. Some apps force their own look. Some hide the one-time option. The merchant wanted the layout they had drawn, not a widget dropped in by an app.

They also hit a wall after adding a Custom Liquid block to the page. They did not know what to put inside it. Later they got "the code has errors" when trying a snippet. So the real question was two-part: is this layout even possible on Horizon, and what goes in the block.

Short answer: yes, it is possible. You do not need Shopify Plus. You keep your own design. I reproduced it on a test store on the Horizon theme, and I will show the exact code and the two follow-up tweaks the merchant asked for.

## Why it happens

Most people think "one-time" and "subscribe" are two separate products, or two separate buttons that add different things to the cart. That mental model is what makes this feel hard.

Here is the real mechanism, which most forum answers skip.

A subscription in Shopify is not a different product. It is the same product with one extra field attached to the cart line. That field is called a **selling plan**. A selling plan is the rule that says "charge this price, deliver every 4 weeks, repeat." Your subscription app creates these plans and attaches them to the product.

So a one-time purchase is just the product with **no** selling plan. A subscription is the product **with** a selling plan. Nothing else changes.

That is the whole trick. Your toggle does not need to build two carts. It only needs to add one hidden field when Subscribe is picked, and remove it when One-time is picked. Horizon's own Add to cart form carries that field to the cart for you.

In plain terms:

- **Subscribe** selected: add a hidden input named `selling_plan` with the chosen plan.
- **One-time** selected: remove that hidden input.

The theme does the rest. This is why the fix is small. You are not fighting Horizon. You are feeding it one field it already understands.

## Before you start: the prerequisite

This tweak displays and switches plans. It does not create them. You still need a **subscription app** to make the recurring billing work.

The merchant used a subscription app (Supr Bundle & Subscription). Any real subscription app works the same way, because they all create selling plans through Shopify. Popular ones include Shopify's own Subscriptions app, Seal Subscriptions, Appstle, and Recharge.

Do this first, in order:

- Install a Shopify subscription app from the App Store.
- Create a subscription plan (for example, "Subscribe & Save", deliver every 4 weeks, 10 percent off).
- Attach that plan to the product you are testing.

Only then does the product have a selling plan for the code to read. If you skip this, the block has nothing to show. That is exactly why the merchant saw errors at first. The plans were not there yet.

You can check quickly. Open the product page on your storefront. If your subscription app already shows any subscribe option at all, the plan exists and you are ready.

## The fix

Everything lives in one **Custom Liquid block**. A Custom Liquid block is a spot in the Horizon theme editor where you can paste your own HTML, CSS, and Liquid. Liquid is Shopify's templating language that reads store data like price and plans.

**Where the block goes**

- Go to **Online Store > Themes > Customize**, and open a product page.
- Add a **Custom Liquid** block in the product area, above the Add to cart button.
- Paste the code below into that block, then **Save**.

![Where the Custom Liquid block goes in the Horizon theme editor, in the product area above Add to cart](/images/blog/shopify-subscribe-and-save/03-custom-liquid-block-placement.png)

Keep it above Add to cart so the toggle reads naturally, price then buy. The block sits inside the same product form, which is what lets the hidden field reach the cart.

**What you get**

When Subscribe is selected, the widget shows the discounted subscription price and a delivery frequency dropdown. Every frequency you set up in your subscription app (weekly, monthly, and so on) appears there automatically.

![Subscribe and Save selected, showing the subscription price and the delivery frequency dropdown on a Horizon product page](/images/blog/shopify-subscribe-and-save/01-subscribe-selected-price-frequency.png)

When One-time is selected, the widget shows the normal price and hides the frequency picker. The selling plan is removed from the cart, so the customer buys the product once at full price.

![One-time purchase selected, showing the normal price with the frequency dropdown hidden](/images/blog/shopify-subscribe-and-save/02-one-time-selected-normal-price.png)

**The code**

```liquid
{%- assign cw_product = closest.product | default: product -%}
{%- if cw_product.selling_plan_groups.size > 0 -%}
  {%- assign cw_group = cw_product.selling_plan_groups | where: 'name', 'Subscribe & Save' | first -%}
  {%- unless cw_group -%}{%- assign cw_group = cw_product.selling_plan_groups.first -%}{%- endunless -%}
  {%- assign cw_uid = block.id | default: section.id -%}

  <style>
    .cw-po{--cw-accent:#2f5d54;--cw-soft:#f3efe9;margin:0 0 1.1rem;font-family:inherit}
    .cw-po__seg{display:flex;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
    .cw-po__btn{flex:1;padding:.85rem 1rem;border:0;background:var(--cw-soft);cursor:pointer;font:inherit;font-weight:600;color:#2a2a2a;line-height:1.25;text-align:center;transition:background .15s,color .15s}
    .cw-po__btn small{display:block;font-weight:500;font-size:.78em;opacity:.8;margin-top:.1rem}
    .cw-po__btn.is-active{background:var(--cw-accent);color:#fff}
    .cw-po__body{margin-top:.85rem}
    .cw-po__price{font-size:1.6rem;font-weight:700;color:var(--cw-accent);line-height:1.1}
    .cw-po__note{font-size:.9rem;color:#555;margin-top:.2rem}
    .cw-po__freq{margin-top:.7rem}
    .cw-po__freq label{display:block;font-size:.8rem;color:#555;margin-bottom:.3rem}
    .cw-po__freq select{width:100%;padding:.6rem .7rem;border:1px solid rgba(0,0,0,.22);border-radius:8px;font:inherit;background:#fff}
    .cw-po__freq[hidden]{display:none}
  </style>

  <div class="cw-po" data-cw-po data-section="{{ cw_uid }}">
    <div class="cw-po__seg">
      <button type="button" class="cw-po__btn is-active" data-mode="subscription">
        Subscribe and Save<small data-cw-save></small>
      </button>
      <button type="button" class="cw-po__btn" data-mode="onetime">
        One time purchase<small>Standard price</small>
      </button>
    </div>
    <div class="cw-po__body">
      <div class="cw-po__price" data-cw-price></div>
      <div class="cw-po__note" data-cw-note></div>
      <div class="cw-po__freq" data-cw-freq>
        <label for="cw-freq-{{ cw_uid }}">Delivery frequency</label>
        <select id="cw-freq-{{ cw_uid }}" data-cw-plan>
          {%- for plan in cw_group.selling_plans -%}
            <option value="{{ plan.id }}">{{ plan.name }}</option>
          {%- endfor -%}
        </select>
      </div>
    </div>
  </div>

  <script>
    (function(){
      var DATA = {
        {%- for variant in cw_product.variants -%}
        "{{ variant.id }}": {
          oneTime: {{ variant.price | json }},
          oneTimeStr: {{ variant.price | money | json }},
          plans: {
            {%- for alloc in variant.selling_plan_allocations -%}
            "{{ alloc.selling_plan.id }}": { price: {{ alloc.price | json }}, priceStr: {{ alloc.price | money | json }}, name: {{ alloc.selling_plan.name | json }} }{% unless forloop.last %},{% endunless %}
            {%- endfor -%}
          }
        }{% unless forloop.last %},{% endunless %}
        {%- endfor -%}
      };
      var SECTION = {{ cw_uid | json }};

      function init(){
        var root = document.querySelector('[data-cw-po][data-section="'+SECTION+'"]');
        if(!root || root.dataset.cwInit) return;
        var form = (root.closest('form[data-type="add-to-cart-form"]'))
          || (root.closest('.shopify-section, product-information, .product, [class*="product"]') || document).querySelector('form[data-type="add-to-cart-form"]')
          || document.querySelector('form[data-type="add-to-cart-form"]');
        if(!form) return;
        root.dataset.cwInit = "1";

        var variantInput = form.querySelector('input[name="id"]');
        var planSelect = root.querySelector('[data-cw-plan]');
        var priceEl = root.querySelector('[data-cw-price]');
        var noteEl = root.querySelector('[data-cw-note]');
        var freqEl = root.querySelector('[data-cw-freq]');
        var saveEl = root.querySelector('[data-cw-save]');
        var btns = root.querySelectorAll('.cw-po__btn');
        var mode = 'subscription';

        function vData(){
          var keys = Object.keys(DATA);
          var vid = variantInput && DATA[variantInput.value] ? variantInput.value : keys[0];
          return DATA[vid] || {};
        }
        function planInput(create){
          var i = form.querySelector('input[name="selling_plan"][data-cw]');
          if(!i && create){ i=document.createElement('input'); i.type='hidden'; i.name='selling_plan'; i.setAttribute('data-cw',''); form.appendChild(i); }
          return i;
        }
        function saveText(vd, id){
          var p=vd.plans&&vd.plans[id]; if(!p||!vd.oneTime) return '';
          var pct=Math.round((1-(p.price/vd.oneTime))*1000)/10;
          return pct>0?(' · save '+pct+'%'):'';
        }
        function render(){
          var vd=vData();
          var id=planSelect?planSelect.value:(vd.plans?Object.keys(vd.plans)[0]:'');
          btns.forEach(function(b){var on=b.dataset.mode===mode;b.classList.toggle('is-active',on);});
          if(mode==='subscription'){
            freqEl.hidden=false;
            var p=vd.plans&&vd.plans[id];
            priceEl.textContent=p?p.priceStr:(vd.oneTimeStr||'');
            var freqText=planSelect&&planSelect.selectedIndex>-1?planSelect.options[planSelect.selectedIndex].textContent:'';
            if(freqText.indexOf(',')>-1) freqText=freqText.slice(freqText.lastIndexOf(',')+1).trim();
            noteEl.textContent=freqText;
            if(saveEl) saveEl.textContent=saveText(vd,id);
            var inp=planInput(true); if(inp) inp.value=id;
          } else {
            freqEl.hidden=true;
            priceEl.textContent=vd.oneTimeStr||'';
            noteEl.textContent='One-time purchase';
            var ex=planInput(false); if(ex) ex.remove();
          }
        }
        btns.forEach(function(b){b.addEventListener('click',function(){mode=b.dataset.mode;render();});});
        if(planSelect) planSelect.addEventListener('change',render);
        form.addEventListener('change',function(){setTimeout(render,60);});
        render();
      }
      if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',init);
      else init();
      document.addEventListener('shopify:section:load',init);
    })();
  </script>
{%- endif -%}
```

A few things worth knowing:

- It reads your subscription app's plans automatically. Whatever delivery options you set up appear in the dropdown.
- Change the accent colour on the first CSS line, the `--cw-accent` value.
- Horizon still shows its own price block above the widget. Leave it, or hide the theme price on this product if you want only the widget's price.

I tested this on a Horizon store with a live subscription app. Subscribe added the plan and the discounted price to the cart. One-time added the plain product with no plan. Both went to checkout correctly.

## Making the selector smaller and adding installment text

The merchant came back with a good follow-up. It works, but can the selector be cleaner and smaller? And where do you add installment payment HTML that shows only on one-time?

Both fit in the same block. You replace the block's code with an updated version. Two things change. The selector becomes two slim pills instead of tall blocks. And there is a marked spot for your own installment HTML that only appears when One-time is selected.

![Compact two-pill selector with Subscribe and Save selected on Horizon](/images/blog/shopify-subscribe-and-save/04-compact-selector-subscribe.png)

For the installment part, the updated code has two comment lines near the bottom:

```html
<!-- INSTALLMENT HTML START -->

<!-- INSTALLMENT HTML END -->
```

Paste your installment HTML between those two marks. It shows only when One-time is selected, and hides on Subscribe. The delivery frequency hides at the same time, so the one-time view stays uncluttered.

![One-time selected showing the installment box, with the frequency dropdown hidden](/images/blog/shopify-subscribe-and-save/05-one-time-installment-box.png)

To fine-tune the size, three values matter. The button text size is the `font-size` on `.cw-po__btn`. The price size is the `font-size` on `.cw-po__price`. The accent colour is the `--cw-accent` value on the first CSS line.

I tested the compact version too. The slim selector keeps Subscribe and One time in one row, and the installment box renders only in the one-time view.

## An alternative: the no-code app block

Not every merchant wants to paste code. If you would rather avoid the theme editor, use your subscription app's own widget.

Most subscription apps ship an **app block**. An app block is a ready-made section you drop into the theme editor with no code, the same way you add any other block. It renders the subscribe and one-time options for you.

The trade-off is design. The app block looks the way the app designed it, not the way you drew it. You get less control over the exact pills, the price size, and the placement. But it is fast, it updates itself, and it needs zero maintenance.

Pick based on your goal. Want the exact custom layout in your screenshot? Use the Custom Liquid block above. Want the quickest path that just works? Use the app's own block. Both put a real subscription in the cart, because both rely on the same selling plans.

## Do you need Shopify Plus for a Shopify subscription?

No. This is the most common worry, and it is wrong. Native subscriptions are available on every Shopify plan through subscription apps. Shopify built the selling plan system into the core platform, not into Plus.

Shopify Plus adds enterprise features like a custom checkout and higher API limits. It does not gate subscriptions. A Basic plan store can run subscribe and save today with any Shopify subscription app.

## Which Shopify subscribe and save app should you use?

Any app that creates real selling plans will work with the tweak above, because the code reads plans from Shopify, not from a single vendor. That gives you freedom to choose on features and price.

When you compare a Shopify subscribe and save app, look at a few things:

- Does it support a percentage or fixed discount for subscribers.
- Does it let customers manage or skip deliveries from their account.
- Does it handle failed payments and dunning, the automatic retry of a declined charge.
- What is the monthly fee or revenue share.

The merchant here used Supr Bundle & Subscription. Other common picks are Shopify's own Subscriptions app, Seal Subscriptions, Appstle, and Recharge. Install one, create a plan, attach it to the product, and the layout above reads it automatically.

## How do Shopify recurring orders work after checkout?

Once a customer buys with a selling plan, Shopify creates a subscription contract. A contract is the ongoing agreement that holds the product, the price, the frequency, and the customer's saved payment method.

On each cycle, Shopify charges the saved card and creates a new order automatically. These are your recurring orders. The customer does not check out again. You see each new order in Admin like any other order, tagged as a subscription.

Your subscription app manages the contract. It handles changes like pausing, skipping, or cancelling, and it retries a payment that fails. The theme tweak has no job after checkout. Its only role is picking the plan at the moment of purchase.

## If it did not work

A few failure modes come up, and the merchant hit the first one.

**"The code has errors" or the widget does not appear.** This almost always means the product has no selling plan yet. The block only renders when `selling_plan_groups.size > 0`. Install the subscription app, create a plan, and attach it to that exact product. Then reload.

**The frequency dropdown is empty.** Your plan group exists but has no individual plans, or the plans are attached to a different product. Check the app and confirm the delivery options are set on the product you are viewing.

**The wrong price shows.** The code reads the discounted price from each plan's allocation, the price rule that says what a subscriber pays. If your discount is set to zero, subscribe and one-time show the same number. That is correct, just not discounted yet.

**The cart still shows one-time after picking Subscribe.** Confirm the Custom Liquid block sits inside the product form, above Add to cart. The hidden field must live in the same form as the buy button, or the cart never receives it.

## Definitions people confuse

These terms trip up most merchants. Here they are in plain words.

**Selling plan.** The rule for one subscription option. It sets the price, the discount, and the frequency, such as "every 4 weeks, 10 percent off."

**Selling plan group.** A named bundle of related plans. "Subscribe & Save" might hold weekly, monthly, and quarterly plans. The code looks for a group named Subscribe & Save first, then falls back to the first group it finds.

**Selling plan allocation.** The link between a plan and a specific product variant, including the exact subscriber price for that variant. The code reads price from here.

**One-time purchase.** The product bought with no selling plan attached. Full price, no repeat billing. It is the default, so "removing the plan" is all the toggle does.

**Subscription contract.** Created after checkout. It stores the ongoing agreement and drives every future recurring order.

Once these click, the layout stops feeling like magic. A subscribe and save button is just a switch that adds or removes one field. The subscription app supplies the plans, and Horizon carries the rest.


---

---
title: Shopify Supported Languages: The Full List
description: Which languages Shopify storefronts actually support, how to add one, and what to do when your language is missing.
---

## The problem

A merchant asked about this on the Shopify Community. They sell foreign-language products. They were frustrated that the language list looked tiny.

They wanted Urdu, Marathi, Punjabi, Irish Gaelic, Scottish Gaelic, and Latin.

They also said something important. They had asked Shopify's built-in AI assistant, Sidekick. Sidekick told them that if a language is not already a "base language," it cannot be added at all.

That answer is wrong. And it sent the whole thread in the wrong direction.

Two other repliers agreed with Sidekick. They said you need a translation app or custom code to get these languages. That is also wrong.

So I checked it myself. I reproduced it on a test store in the Shopify admin. I added Urdu live to prove the list is bigger than people think.

Here is the short version. Most of the languages that merchant listed are already there. You can add them today, with no app. Only one of them, Latin, is genuinely missing.

Let me walk through the real Shopify supported languages list, how to add a language, and what to do when yours is not there.

## Why it happens

Shopify has two different "language" ideas, and they get confused all the time.

The first is your **account language**. That is the language of your admin, the back office where you manage the store. It affects what you see, not your customers.

The second is a **storefront language**. That is a language your shoppers can switch to on the public store. Product pages, menus, and buttons can appear in it. This is the one that matter here.

Storefront languages come from a fixed list that Shopify maintains. I pulled the live list straight from Shopify's own data. As of August 2026, it holds **137 storefront locales**.

A "locale" is just a language plus an optional region. For example, English is a locale. So is French. So is Urdu.

137 is not a small number. It is far more than the handful people assume. Sidekick and the two forum repliers were all working from an out-of-date idea of how short this list is.

I confirmed each of the merchant's languages against that live list. Here is what I found:

- Urdu (ur): present
- Marathi (mr): present
- Punjabi (pa): present
- Irish, also called Irish Gaelic (ga): present
- Scottish Gaelic (gd): present
- Sanskrit (sa): present
- Latin (la): missing

So five of the six "unusual" languages that merchant wanted are already supported. Only Latin is not.

The reason this matters: a wrong "you can't do it" answer stops people from trying. The languages were one click away the whole time.

## Prerequisite: know what "add a language" does

Before the steps, one thing to be clear on. Adding a storefront language does not replace your store's main language.

Your default language stays your default. The new language is added **alongside** it, as a second, published option. Shoppers pick it from a language switcher.

Adding the language does not translate your content for you either. It creates the slot. You still fill in the translated text yourself, or with a translation app. If you leave it empty, that language shows your default text.

That is fine for many merchants. If you sell language-learning products, the product text itself is often already in the target language. You type it in as free text.

## The fix: add a supported language

Here are the real steps. I did exactly this to add Urdu on my test store.

**Step 1. Open the Languages settings.**

Go to Settings, then Languages, then click **Add language** in the top right.

![Shopify Languages settings page with the Add language button highlighted in the top right](/images/blog/shopify-supported-languages/01-languages-page-add-language.png)

This page also shows every language you already have and its status. Mine had English as the default, plus French. Both were Published.

**Step 2. Pick your language.**

A small window opens with a single dropdown. Open it and choose your language.

This is the moment that proves the point. Urdu, Marathi, Punjabi, Irish, and Scottish Gaelic are all right there in the list. I picked Urdu.

Click **Next**.

![The Add language window with Urdu selected in the dropdown and the Next button highlighted](/images/blog/shopify-supported-languages/02-pick-language-urdu-next.png)

Shopify shows a note here. It says all content needs translation for the new language, and that the language stays hidden from customers until you publish it. That is expected. We fix it in the next step.

**Step 3. Add it, then publish it.**

Shopify confirms the language was added. It now appears as a new row on the Languages page.

But notice the status. It says **Not published**. A new language starts hidden. Customers cannot see it yet.

To turn it on, open the **...** menu on that language's row and choose **Publish**.

![The Languages page after Urdu was added, showing it as Not published, with the row menu highlighted](/images/blog/shopify-supported-languages/03-language-added-publish.png)

Once published, the language appears on your storefront. Your theme's language switcher will list it, so shoppers can choose it.

That is the whole flow. No app. No code. Three clicks past the settings page.

## An alternative: when your language is not on the list

Latin was the one language that merchant wanted that Shopify does not offer. So what do you do when yours is genuinely missing?

You have two paths, depending on what you actually need.

**Path 1: you do not need a "language" at all.**

This is the one people miss. You do not need Latin to be a supported language to sell products written in Latin.

Product titles, descriptions, pages, and blog posts are free text fields. You can type any script or language into them directly, under your normal store language. Shopify does not check the language of the words you type.

So if your catalog is Latin books, just write the listings in Latin. It works today, with zero setup.

The merchant on the thread was close to this already. They said they did not want a translation. They wanted the products themselves in the language. Free text covers that.

**Path 2: you want it as a real storefront language, with its own switcher.**

If you truly want a separate Latin option in the language switcher, with its own URL, there is a workaround. It is a hack, not real support, so know the trade-offs first.

Here is the idea. Publish a supported language you will never actually sell in. Use that empty slot as a container. Then overwrite all of its text with your target language.

For Latin, a good "carrier" is **Interlingua** (locale code ia). It is on the list and is almost never used for selling.

The steps:

- Add and publish Interlingua, using the same three steps above.
- Open Shopify's free **Translate & Adapt** app.
- Go through Interlingua and replace every string with your Latin text.

That gives you a working second storefront language that shows Latin. But there are real catches:

- The URL keeps the carrier's code. You will see /ia in the address bar even though the page is Latin.
- The switcher label stays "Interlingua" unless your theme lets you rename languages.
- Checkout and some Shopify system text stay in the carrier language. You cannot edit those.

It works if you can live with those. For most stores, Path 1 (free text) is cleaner.

**And send Shopify a feature request.**

For any language that is still not on the list, ask Shopify support to add it. Give the exact locale and one line on business impact. Something concrete like "I sell in Latin and cannot publish it" lands better than "add more languages."

## How many languages does Shopify support?

Shopify supports 137 storefront locales as of August 2026. That is the list you see under Settings, Languages, Add language.

It covers all the major world languages. It includes most large regional languages too, like the Indian languages in this thread. It includes right-to-left languages such as Urdu and Arabic.

The number changes over time as Shopify adds locales. So the safest answer to "is my language supported" is to open the Add language dropdown and look. If it is there, you can add it.

Do not trust a blanket "no" from an AI assistant or a forum reply. The one in this thread was wrong on five languages out of six.

## Which Shopify languages are missing?

Very few, but some gaps are real. Latin is the clearest example. There is no Latin locale.

Ancient and constructed languages are the ones most likely to be absent. Everyday spoken languages are almost all present.

If you are unsure, the test is simple. Open the Add language list and search for your language. Present means supported. Absent means you fall back to the free-text approach or the carrier workaround above.

## Does adding a Shopify storefront language translate my store?

No. Adding a language creates the slot only. It does not translate a single word for you.

You have three ways to fill it:

- Type translations yourself in Shopify's free Translate & Adapt app.
- Use a paid translation app that machine-translates in bulk.
- Leave it empty, in which case that language falls back to your default text.

For language-learning stores, typing is often fine, because the content is short and you know the language.

## What is the difference between account language and storefront language?

These are the two ideas that caused the confusion in this thread.

**Account language** is for you, the store owner. It sets the language of the admin dashboard. Changing it does nothing to your customers.

**Storefront language** is for your shoppers. It is what this whole article is about. You add it under Settings, Languages, and publish it so customers can switch to it.

When someone says "Shopify doesn't support my language," they almost always mean the storefront one. And, as shown, that list is far bigger than most people expect.

## If it did not work

A few things can trip you up.

**The language is in the list but not on your storefront.** You probably added it but did not publish it. Go back to Settings, Languages, open the row's ... menu, and click Publish. A Not published language is invisible to customers.

**You published it but shoppers cannot switch to it.** Your theme needs a language switcher. Most modern themes have one you enable in the theme editor. Check your header or footer settings for a language selector block.

**The new language shows English text.** That is expected until you add translations. The slot is live, but the words are still your default until you fill them in with Translate & Adapt.

**Your language really is not in the dropdown.** Then it is a genuine gap, like Latin. Use the free-text approach, or the Interlingua carrier trick, and file a feature request.

**Sidekick told you it is impossible.** Ignore that. I tested the live list and added Urdu myself. The AI assistant was out of date on this.

## Definitions people confuse

**Locale.** A language plus an optional region code, like en for English or ur for Urdu. Shopify's list is 137 of these.

**Base language vs added language.** Your base (default) language is the one your store was set up in. Added languages are extra published options alongside it. Sidekick claimed only "base" languages count, which is not how the Add language flow works.

**Publish.** Turning a language on for customers. New languages start unpublished and hidden. This one step is the most commonly missed.

**Translate & Adapt.** Shopify's own free translation app. It is where you enter or edit the wording for each added language.

**Carrier language.** In the workaround, a supported language you do not really use, whose slot you fill with an unsupported one. Interlingua for Latin is the example here.

To recap the Shopify supported languages list in one line: it holds 137 storefront languages, most of the ones people think are missing are actually there, and the only real work is picking your language, clicking Next, and remembering to Publish.


---

---
title: Shopify Table Not Fitting on Mobile? Make It Responsive
description: A table pasted from Excel looks fine on a laptop and runs off the edge of a phone. Here is the Custom CSS that makes every column fit on mobile, with no hidden data and no changes to your page template.
---

## The problem

You build a chart in Excel or Google Sheets, copy it, and paste it into a Shopify page. On your laptop it looks right. On a phone the last two columns are missing, and the visitor has to drag the table sideways to read them.

A merchant on the Shopify Community hit exactly this with a shift stick thread sizing chart. It had five columns: Make, Model, Year, Trans and Shifter Compatible Adapter Size. On her phone only the first four showed.

She had three rules for the fix. Keep every column visible. Make the text a little smaller if needed. Do not touch the page template in the theme editor, because other pages use it.

## What "responsive" means for a table

A responsive page is one that rearranges itself to fit the screen it is on. Shopify themes do this for their own sections: a row of three products becomes one column on a phone.

A table you paste in is different. It is your content, not a theme section, so the theme cannot rearrange it. The table keeps the column widths it arrived with, and a phone screen is about 390 pixels wide, which is less than most five column charts want.

Themes handle this by putting a scroll box around the table. The page stays the right width and the table scrolls sideways inside it. That is why the merchant could see some columns and had to drag to reach the rest. It is also why wrapping the table in your own scrolling container does nothing: the theme already added one.

## Why a pasted Excel table is wider than it needs to be

Excel does not paste only your words. It also pastes a fixed width for each column, written into the table's code. Those widths were chosen for a spreadsheet on a desktop screen.

I reproduced this on a test store running the Ritual theme. I built a five column chart with Excel style widths, opened it at a phone width of 390 pixels, and measured it:

- The table was 399 pixels wide.
- The scroll box around it was 348 pixels wide.
- The extra 51 pixels were enough to push the last column out of view.

So the table is only a little too big. It does not need a new layout. It needs to stop holding on to the widths it was pasted with, and to use a smaller type size and tighter cell padding, which is the space inside each cell.

The theme makes it slightly worse in two ways. It adds padding around every cell. On newer Shopify themes it also sets header rows in capital letters, and capitals are wider than lower case. A long header like "Shifter Compatible Adapter Size" takes a lot of room.

## Before and after

On the test store, the last column ("Shifter Compatible Adapter Size") was cut off at the right edge of the phone screen:

![A five column table on a phone with the last column cut off at the right edge](/images/blog/shopify-table-not-fitting-mobile/01-table-cut-off-on-mobile-before.png)

After adding the CSS below, all five columns fit on the same phone screen and no sideways scrolling is needed:

![The same table on a phone with all five columns visible](/images/blog/shopify-table-not-fitting-mobile/02-table-fits-on-mobile-after.png)

I measured it again to be sure. The table and its scroll box were both 348 pixels wide, so nothing was left over to scroll. The five columns came out at 46, 49, 65, 48 and 140 pixels.

## The fix

You paste a small block of Custom CSS. Custom CSS is a box in your theme settings where you add your own styling rules. It applies to the whole store, so the rules below are written to act only on phones, and only on tables inside page content.

### Step 1: Open your theme editor

Go to **Online Store**, then click **Edit theme** next to your current theme.

![The Shopify admin Themes page with Online Store and the Edit theme button highlighted](/images/blog/shopify-table-not-fitting-mobile/03-online-store-edit-theme.png)

### Step 2: Open Theme settings

Click the gear icon on the left of the editor. It is labelled **Theme settings**.

![The theme editor with the Theme settings gear icon highlighted](/images/blog/shopify-table-not-fitting-mobile/04-theme-settings-gear-icon.png)

### Step 3: Open Custom CSS

Scroll to the bottom of the list and click **Custom CSS**.

![The Theme settings list scrolled down to the Custom CSS section](/images/blog/shopify-table-not-fitting-mobile/05-custom-css-section.png)

### Step 4: Paste the code

Click inside the box and paste this:

```css
@media screen and (max-width: 749px) {
  .rte table {
    table-layout: auto !important;
    width: 100% !important;
  }
  .rte table col {
    width: auto !important;
  }
  .rte table th,
  .rte table td {
    width: auto !important;
    font-size: 12px !important;
    padding: 6px 4px !important;
  }
}
```

![The Custom CSS box with the table code pasted in](/images/blog/shopify-table-not-fitting-mobile/06-custom-css-code-pasted.png)

If the box already has rules in it, click at the end, press Enter and paste below them. Do not select everything and paste over it, or you will delete your existing styling.

### Step 5: Save

Click **Save** at the top right, then open your page on a phone.

![The Save button in the theme editor highlighted](/images/blog/shopify-table-not-fitting-mobile/07-save-button.png)

## What each part of the code does

You do not need to understand the code to use it, but it helps to know what you are changing if you want to adjust it later.

- **`@media screen and (max-width: 749px)`** means "only apply the rules inside when the screen is 749 pixels wide or less". Desktop and most tablets are wider, so they are not affected.
- **`.rte table`** points at tables inside page content. `rte` stands for rich text, which is the editor you type page content into.
- **`table-layout: auto`** lets each column be as wide as its content needs, instead of the width it was pasted with.
- **`width: auto` on the columns and cells** removes the fixed widths that Excel added.
- **`font-size: 12px`** makes the text smaller. Your normal text is probably 16 pixels.
- **`padding: 6px 4px`** cuts the space inside each cell to 6 pixels above and below and 4 pixels left and right.
- **`!important`** tells the browser to use these values even where the pasted table has its own. The pasted widths are written directly into the table, and without this the rules lose.

## If the table still does not fit

Try these in order. Each is a small change.

**Make the text one size smaller.** Change `12px` to `11px`. With five columns on a narrow phone, 12 pixels is about as large as the text can be and still fit. Do not go below 11, or it becomes hard to read.

**Shorten the longest header.** A header like "Shifter Compatible Adapter Size" cannot be narrower than its longest word. Changing it to "Adapter Size" frees up a lot of room.

**Check the table has more than about six columns.** Past that, even small text will not fit on a phone. Two options work better than shrinking further. Leave the table scrolling sideways and tell visitors to swipe, or split it into two tables.

**Cannot see any change at all?** Your theme may not use the `rte` label around page content. Different themes name it differently. Right-click the table on a computer, choose Inspect, and look at the label on the box around the table. Replace `.rte` in the code with that label.

**Clear the cache.** Open the page in a private window, or on a phone, so you are not looking at a stored copy.

## Alternative: fix the table instead of the theme

The CSS above works without opening the page. If you would rather clean the table itself, you can remove the widths Excel added.

In the page editor, click the `<>` button to switch to the code view. Look for `width=` and `style="width:` in the table, in the `<col>` tags and in each `<td>` cell. Delete those. Save the page.

This is slower, and every time you paste a new Excel table the widths come back. The CSS fix covers every table you paste later.

You can also paste the spreadsheet as plain text first, then build the table with the editor's own table button. The table button sits in the editor toolbar next to the video button. A table made that way starts without the Excel widths.

## Will this change my other pages?

The rules apply to every table in page content on a phone, not only the one you were fixing. On those tables the text becomes 12 pixels and the cell padding gets tighter. Desktop is untouched, and so is your page template.

If you have another table that already looks right on phones, check it after saving. The most likely change is slightly smaller text.

## Frequently asked questions

**Why does my Shopify table scroll sideways on mobile?** Shopify themes wrap page tables in a scroll box so the page itself does not become wider than the screen. The table scrolls inside that box when it is wider than the phone.

**Can I make a table scroll instead of shrinking?** Yes, and on most themes it already does. If the table is only a little too wide, shrinking it is a better experience, because visitors see everything at once.

**Do I need an app for this?** No. Custom CSS is built into the theme editor and the fix is one paste.

**Does this work for a size chart?** Yes. A size chart is a table, and the same rules apply. If your size chart is a popup or an image rather than a pasted table, see [how to add a size chart to Shopify](/blog/shopify-size-chart).

## Summary

A table pasted from Excel carries fixed column widths that a phone cannot fit. The theme adds a scroll box around it, which hides the overflow instead of fixing it. A mobile only block of Custom CSS removes the fixed widths, shrinks the text to 12 pixels and tightens the padding, and every column fits on the screen. On my test store the table went from 399 pixels wide to 348, the same width as its box.


---

---
title: Auto-Fill a Shopify Tax Override Collection
description: Shopify tax overrides only accept a manual collection. Here is how to keep that collection filled automatically with Shopify Flow.
---

## The problem

A merchant asked about this on the Shopify Community. They sell lodging products. Every lodging product carries a **Room** tag. All of them need the same Minnesota tax rule.

They wanted an automatic collection to hold those products, then point a tax override at it. Shopify would not let them.

A **tax override** is a rule that changes the tax rate for a group of products. You attach it to a collection. But Shopify only lets you pick a **manual** collection. An **automatic** collection never shows up in the picker.

That is a real risk for tax. Every new lodging product has to be added to a special tax collection by hand. Miss that step once, and Shopify charges the wrong tax on that product.

The merchant already had a Shopify Flow workaround. But it felt fragile, and they did not trust it. That instinct was correct. I reproduced the whole thing on a test store, and I will show you why the gap exists and how to close it.

## Why it happens

First, the two collection types.

A **manual collection** is a fixed list. You put products in it by hand, one by one. It does not change on its own.

An **automatic collection** (Shopify also calls it a smart collection) fills itself from rules. You set a rule like "tag is Room" and Shopify keeps the list current for you.

For most jobs, the automatic collection is the smart choice. It never forgets a product. That is exactly why the merchant wanted it for tax.

But the tax override picker only lists manual collections. I tested this directly. I opened the override screen and searched. My smart collections were simply not there. Only manual ones appeared.

Shopify has never explained the reason in public. My read is that tax is high-risk, and a manual list is predictable. A smart collection can change when someone edits a rule, and that could shift tax on many products at once without anyone noticing. Whatever the reason, the limit is firm today. You cannot point a **shopify tax override** at a smart collection.

So the only path is a manual collection that stays filled. The question becomes: how do you keep a manual list current without human effort? That is where Shopify Flow comes in, and also where the fragile part lives.

## Why a tag-based Flow misses products

Shopify Flow is a free automation tool from Shopify. You build a rule as **trigger, condition, action**. Something happens, Flow checks a condition, then Flow does something.

The obvious build is: when a product is created, if it has the Room tag, add it to the tax collection. That works for brand-new products. But it has a real hole.

Flow only fires on **Product created**. There is no "tag added" trigger. There is no "product updated" trigger either. So Flow can only react at the exact moment a product is born.

Think about what that misses:

- A product created first, then tagged Room later in a separate edit. The create already fired. Adding the tag fires nothing.
- A CSV import or an app that creates the product first and applies tags in a second pass. Same problem.
- Every product that already existed before you built the Flow. The trigger only looks forward, never back.

Any of those slips past the automation. The product stays out of the tax collection. Shopify then charges the wrong tax on it, and nothing flags it. That miss is exactly why the workaround feels risky, and the merchant was right to distrust it.

## Check this first

Before you build anything, make sure your manual tax collection exists.

Go to **Products > Collections > Create collection**. Set the collection type to **Manual**. Name it something clear, like "MN Lodging Tax". Save it.

Do not use an automatic collection here. If you do, the override screen will not see it, and the rest of this will not work.

## The fix

Here is the reliable setup. It has three parts: attach the override, automate new products, and sweep the ones the automation cannot catch.

**Step 1: Attach the override to your manual collection.**

Go to **Settings > Taxes and duties > United States > Product overrides > Add override**. Pick your manual collection. Set the tax rate you need.

![Shopify tax override picker showing only manual collections](/images/blog/shopify-tax-override-automatic-collection/01-tax-override-manual-collection-picker.png)

Notice the picker. Only manual collections appear. Your smart collections are not offered. This is the limit in action.

**Step 2: Build the create-time Flow.**

Open Flow (install it free from the Shopify App Store if you do not have it). Create a workflow.

- Trigger: **Product created**.
- Condition: **Tags** is equal to **Room** (use your own tag).
- Action: **Add product to collections**, and pick your manual tax collection.

Turn it on. Now every new product born with the Room tag lands in the tax collection on its own.

![Shopify Flow workflow adding a tagged product to a collection](/images/blog/shopify-tax-override-automatic-collection/02-shopify-flow-add-to-collection.png)

This is the core of the **shopify flow add to collection** pattern. It is clean, but on its own it still has the hole from the section above. The next two steps close it.

**Step 3: Sweep in everything the trigger missed.**

Do this once now, then repeat it on a schedule.

Go to **Products**. Filter by tag **Room**. Select all. Then choose **Add to collection** and pick your tax collection.

This catches every older product and every product that was tagged after it was created. Re-adding a product that is already in the collection does nothing, so this sweep is safe to run any time. It cannot create duplicates or damage the list.

![The tax collection filled automatically with a new tagged product](/images/blog/shopify-tax-override-automatic-collection/03-collection-auto-filled-proof.png)

I tested the whole loop on a store. A new product tagged Room dropped into the manual tax collection with no manual click. The sweep then pulled in the products that had been tagged earlier. The override applied to all of them.

**Step 4: Tag at creation so the trigger always catches new products.**

The create trigger only works if the tag is present the moment the product is saved. The easiest way to guarantee that is to duplicate a template product that already has the Room tag, then edit the copy. The tag is there from birth, so Flow fires every time.

## An alternative for a larger catalog

The manual sweep is fine for a small store. For a busier catalog, automate the sweep itself so it does not depend on someone remembering.

Build a second Flow on the **Scheduled time** trigger. Have it run weekly or monthly. Give it the same logic: find products tagged Room, add them to the tax collection. This becomes your safety net. Even if the create-time Flow misses something, the scheduled sweep catches it within a week.

Run the sweep right after any bulk import too. Imports are the most common source of missed products, because they often create first and tag second.

If you prefer no automation at all, you can skip Flow entirely and just run the manual filter-and-add sweep on a calendar reminder. It is slower and needs a human, but it uses zero apps and cannot break. For a store that adds a product or two a month, that is a fair trade.

## Can a Shopify tax override use an automatic collection?

No. Not today. A **shopify tax override automatic collection** setup is not possible in the admin. The override picker lists manual collections only. Smart collections never appear there.

The workaround is a manual collection that a rule keeps filled. That is what this whole guide builds. You get the reliability of a tag rule, applied to a list the tax override can actually read.

If you want Shopify to change this, add your vote to the feature request. But do not wait on it. Build the manual collection now.

## How do I add a product to a collection automatically in Shopify Flow?

Use the **Add product to collections** action. It only works on manual collections, which is perfect here, because a manual collection is exactly what the tax override needs.

The pattern is: a trigger fires, a condition checks the tag, and the action drops the product into the collection. For tax, the trigger is Product created and the condition is your tag. That is the full **shopify automatic tax override** loop, built out of parts Shopify gives you for free.

## Why does my Shopify tax override miss new products?

Almost always because the product never reached the manual collection. Two common causes.

One, the product was tagged after it was created, so the Product created trigger already fired and moved on. Two, the product existed before you built the Flow, so the trigger never saw it at all.

The fix for both is the sweep in Step 3. Filter by tag, select all, add to collection. Run it on a schedule and the misses stop.

## Does Shopify Flow have a tag-added trigger?

No. Flow has no "tag added" trigger and no "product updated" trigger. It cannot react to a tag change on an existing product. This is the single biggest reason a tag-based tax Flow feels fragile.

Because you cannot trigger on the tag change, you cover the gap two other ways: tag products at creation so the create trigger always fires, and run a scheduled sweep to catch anything that still slips through.

## If it did not work

A few things to check when the collection is not filling.

- **The collection is automatic, not manual.** The Flow action and the tax override both need a manual collection. If you built a smart collection by habit, rebuild it as manual.
- **The Flow is off.** A new workflow is paused until you turn it on. Check the toggle.
- **The tag does not match exactly.** Tags are case-sensitive in the condition. "Room" and "room" are different. Match what is actually on the product.
- **The product was tagged after creation.** The create trigger missed it. Run the sweep, or re-save through your tagged template.
- **The override points at the wrong collection.** Confirm the override in Settings > Taxes and duties is attached to the same manual collection the Flow fills.

## Definitions people confuse

**Manual collection vs automatic collection.** A manual collection is a hand-picked list that only changes when you edit it. An automatic (smart) collection fills itself from rules like tags or product type. Tax overrides accept manual only.

**Tax override vs tax region.** A tax region sets the default rate for a place. A tax override changes the rate for a specific group of products inside that region. The override is what needs the collection.

**Trigger vs condition vs action in Flow.** The trigger is the event that starts the workflow, like Product created. The condition is the test, like tag equals Room. The action is the result, like Add product to collections. All three must line up for the automation to fire.

Build the manual **shopify tax override collection**, keep it filled with a create-time Flow plus a scheduled sweep, and tag your products at creation. That combination gives you the reliability a smart collection would have offered, using only tools Shopify already provides.


---

---
title: "Shopify Product Page Customization: Add a Terms Checkbox"
description: "Add a required terms and conditions checkbox to specific Shopify products without an options app, using a tag and one Custom liquid block. Tested on Athens."
date: "2026-07-20"
---

## The problem: you need a checkbox on some products, not all of them

A merchant on the Shopify Community had about 50 products that needed a "I agree to the terms" checkbox before anyone could add them to the cart.

The rest of their catalog needed nothing.

They already had a product options app. It could produce a checkbox, but it forced them into one option set per product, which broke their product images. Fifty products meant fifty option sets.

That is a lot of work for a tick box, and it is the wrong tool.

This is one of the more common Shopify product page customization requests. The fix is smaller than most people expect: one tag and one block. No app, no monthly fee, and your native variants stay exactly as they are.

## Why the options app fights you

A product option is a thing the customer *chooses*, and the choice changes what they are buying. Size. Color. Length of chain.

A terms checkbox is none of that. Every customer must tick it, there is only one valid answer, and it does not change the product, the price, or the SKU.

Options apps are built around variants. Model a non-choice as an option and you inherit everything that comes with variants. Per-product option sets. Image mapping. In some apps, a rewritten add-to-cart button that no longer matches your theme.

So do not model it as an option. Model it as what it is: a small piece of UI on the product page, plus a line item property that records the agreement on the order.

## Step 1: tag the products that need it

The checkbox needs to appear on 50 products out of a few hundred. A tag is the cheapest way to mark that set, and it is one bulk action rather than fifty edits.

In your Shopify admin, go to **Products**, tick the products you want, then open the **More actions** menu and choose **Add tags**.

![Select the products in the Shopify admin and choose Add tags from the More actions menu](/images/blog/shopify-terms-and-conditions-checkbox/04-bulk-add-tags-shopify-admin.png)

Type `terms-required`, click the **Add "terms-required"** line to create the tag, then **Save**.

![Create the terms-required tag in the Add tags dialog](/images/blog/shopify-terms-and-conditions-checkbox/05-create-terms-required-tag.png)

That is the only per-product work in this whole job. Adding product 51 later is one tag, not a new option set.

You can also select every product on the page with the header checkbox, then use **Select all X products** if your filtered view already matches the set you want.

## Step 2: add one Custom liquid block

Every Online Store 2.0 theme has a block for injecting Liquid into the product page. The name varies. Dawn calls it **Custom Liquid**. Athens, the theme in this case, also calls it **Custom liquid**. That is worth knowing. The vendor documentation calls it "Liquid", so you will search the block list for the wrong word.

Go to **Online Store > Themes > Customize**, switch to your **Product** template, select the **Product information** section, and click **Add block**. Search for "liquid".

![The Athens block picker showing the Custom liquid block](/images/blog/shopify-terms-and-conditions-checkbox/06-athens-add-custom-liquid-block.png)

In Athens the block has a **Position** setting. Set it to **Right** so the checkbox renders in the same column as the buy buttons rather than in the left accordion column.

Leave **Heading** and **Icon** empty. Athens turns the block into an expandable accordion only when Position is Left *and* a heading or icon is set. On Right with both empty it stays inline, which is what you want for a checkbox.

![The Custom liquid block settings with Position set to Right](/images/blog/shopify-terms-and-conditions-checkbox/07-athens-custom-liquid-position-right.png)

Then drag the block in the block list so it sits just above **Buy buttons**. Blocks render in list order, and by default a new block lands at the top of the column, above the title.

Paste this in:

```liquid
{% if product.tags contains 'terms-required' %}
<div class="terms-gate" data-terms-gate>
  <label class="terms-gate__label">
    <input type="checkbox" name="properties[Terms accepted]" value="Yes" data-terms-checkbox>
    <span>I have read and agree to the <a href="/policies/terms-of-service" target="_blank" rel="noopener">Terms and Conditions</a>.</span>
  </label>
  <span class="terms-gate__error" data-terms-error hidden>Please accept the Terms and Conditions to continue.</span>
</div>

<style>
  .terms-gate { margin: 1.2rem 0; }
  .terms-gate__label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; line-height: 1.4; }
  .terms-gate__label input { margin-top: .25rem; flex: 0 0 auto; }
  .terms-gate__error { display: block; margin-top: .5rem; color: #d72c0d; font-size: .9em; }
  .terms-gate__error[hidden] { display: none; }
  /* the class lives on <body>, so it keeps applying to buy buttons the theme re-renders */
  body.terms-locked .shopify-payment-button { opacity: .4; pointer-events: none; }
</style>

<script>
(function () {
  function init() {
    var FORM = 'form[action*="/cart/add"]:not(.installment)';

    function box()      { return document.querySelector('[data-terms-checkbox]'); }
    function errorEl()  { return document.querySelector('[data-terms-error]'); }
    function accepted() { var b = box(); return !b || b.checked; }

    function sync() {
      var b = box(), e = errorEl();
      if (!b || !e) return;

      if (b.checked || !b.dataset.touched) e.setAttribute('hidden', '');
      else e.removeAttribute('hidden');

      // re-resolve the form every time: the theme replaces it on each variant change
      var form = document.querySelector(FORM);
      if (form) {
        var id = form.getAttribute('id');
        if (!id) { id = 'terms-gate-form'; form.setAttribute('id', id); }
        if (!form.contains(b)) b.setAttribute('form', id);
      }

      document.body.classList.toggle('terms-locked', !b.checked);
    }

    function deny(e) {
      var b = box();
      e.preventDefault();
      e.stopImmediatePropagation();
      b.dataset.touched = '1';
      sync();
      b.scrollIntoView({ block: 'center', behavior: 'smooth' });
      b.focus();
    }

    document.addEventListener('change', function (e) {
      if (e.target.matches && e.target.matches('[data-terms-checkbox]')) {
        e.target.dataset.touched = '1';
        sync();
      }
    });

    document.addEventListener('click', function (e) {
      var t = e.target.closest && e.target.closest('[name="add"]');
      if (!t || accepted()) return;
      if (t.closest(FORM) || t.getAttribute('form')) deny(e);
    }, true);

    document.addEventListener('submit', function (e) {
      if (e.target.matches && e.target.matches(FORM) && !accepted()) deny(e);
    }, true);

    document.addEventListener('product:variant-change', sync);

    sync();
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>
{% endif %}
```

Save. Untagged products are completely untouched, because the whole block is wrapped in the tag check.

## What it does on the storefront

With the box unticked, clicking **Add to cart** does nothing except show the warning. The item is not added and the cart count does not move. **Buy it now** is dimmed and unclickable.

![Add to cart blocked while the terms checkbox is unticked](/images/blog/shopify-terms-and-conditions-checkbox/01-terms-checkbox-blocks-add-to-cart.png)

Tick the box and the warning clears, and Buy it now returns to normal.

![The warning clears and Buy it now is enabled once the box is ticked](/images/blog/shopify-terms-and-conditions-checkbox/02-terms-checkbox-accepted.png)

The acceptance is then recorded against the line item, so it appears on the cart, on the order in your admin, and in the customer's confirmation email.

![Terms accepted: Yes recorded on the cart line item](/images/blog/shopify-terms-and-conditions-checkbox/03-terms-accepted-cart-line-item.png)

## Make the acceptance read the way you want on the order

The checkbox submits as a **line item property**. That is the same mechanism most product-options apps use, so the acceptance travels with the line: it shows on the cart, on the order in your Shopify admin, on the packing slip, and in the customer's confirmation email.

I placed a real test order to confirm where it lands. Here it is on the order in admin, sitting in the line item's properties block, next to any other properties on that item:

![The terms acceptance shown on the order in the Shopify admin](/images/blog/shopify-terms-and-conditions-checkbox/08-terms-accepted-on-order-admin.png)

One detail decides whether that line reads well, and it is easy to get wrong.

**What prints on the order is the property name, not the label the shopper sees.** In the markup, the visible wording lives in the `<span>` next to the checkbox, while the name Shopify records comes from the `name="properties[...]"` attribute. They are two different strings. If the input says `name="properties[Terms accepted]"`, the order reads **Terms accepted: Yes** no matter what the on-page label reads.

So set the name to exactly what you want printed:

```html
<input type="checkbox" name="properties[I Agree With The Below Terms and Conditions]" value="Yes" data-terms-checkbox>
```

The text inside `properties[...]` is what shows before the colon. The `value` is what shows after it, so make it whatever you want on record: `Yes`, `Accepted`, or a check mark to match your other lines.

Two rules Shopify enforces on line item properties, each of which hides the line if you break it:

- **Do not start the name with an underscore.** A leading `_` marks the property as private, so it is stored but never displayed on the order or the confirmation email.
- **Keep the value non-empty.** A blank value is dropped, and the line disappears with it.

## Four things that break naive versions of this

I reproduced this on a test store and hit every one of these. They are the reason the snippet above looks more defensive than you would expect.

### A plain `required` attribute does nothing

The obvious approach is `<input type="checkbox" required>` and let the browser handle it.

It does not work. Shopify's product form is rendered with `novalidate` on it. Dawn does this, Athens does this, most themes do this. The reason is that the theme submits the form over AJAX and handles its own errors. `novalidate` switches off native HTML validation entirely, so a `required` checkbox is ignored and the item goes straight into the cart.

The submit has to be blocked in JavaScript.

### The checkbox is not part of the form

The Custom liquid block renders in the product information column. The `<form>` element only wraps the quantity selector and the buy buttons - on Athens it is about 4,700 characters and contains nothing else.

So a checkbox in that block sits *outside* the form, and its value would never be submitted.

The `form="..."` attribute fixes that. It associates an input with a form by ID even when the input lives elsewhere in the document, and `new FormData(form)` then includes it.

### `form.id` does not return what you think

This one is genuinely surprising.

The product form contains `<input name="id">` for the selected variant. Named form controls are exposed as properties on the form element, so `form.id` returns *that input element*, not the form's ID string.

Use `form.getAttribute('id')` instead. Code that does `if (!form.id) form.id = 'something'` does nothing, and says nothing, the checkbox never gets wired up, and the property never submits.

### Buy it now bypasses the form completely

The dynamic checkout button is a separate web component that posts straight to checkout. Blocking form submission does not touch it.

That is why the snippet disables it too. It does so with a class on `<body>` rather than an inline style on the button, and that choice matters - see the next section.

## What happens when the variant changes

This is the failure that survives casual testing, because it only appears after the shopper interacts with the page.

Many themes re-render the buy area when the customer picks a different variant, so the price, stock state, and button label stay correct. Athens does it like this:

```js
productFormDestination.outerHTML = productFormSource.outerHTML
```

That replaces the entire product form element - form, Add to cart button, and Buy it now - with fresh HTML from the server.

Any script that grabbed those elements once and stored them in variables is now holding references to nodes that are no longer in the page. The gate stops, with nothing to flag it working, and the inline style that dimmed Buy it now is gone because the replacement HTML never had it.

I measured this. Counting attempted `/cart/add` requests with the box unticked:

| | before a variant change | after a variant change |
| --- | --- | --- |
| version holding references | 0 blocked | 1 got through |
| version re-querying each time | 0 blocked | 0 blocked |

The merchant in this case had 50 products on native variants. Anyone switching variant before adding would have walked straight past the checkbox.

Two fixes, both in the snippet above:

1. **Re-query the form inside every handler**, and delegate all listeners off `document` rather than binding them to elements that get destroyed.
2. **Lock Buy it now with a class on `<body>`.** The body element survives the re-render, so the CSS rule keeps applying to whatever new button appears.

The checkbox itself is safe, because it lives outside the replaced element, and its `form="..."` attribute re-associates automatically with the new form of the same ID.

## How to add a custom text field on a Shopify product page

The same mechanism covers the related request: a text input for engraving, a gift message, or a name.

Swap the checkbox for a text input and keep the `properties[...]` name:

```liquid
<label for="engraving">Engraving (optional)</label>
<input type="text" id="engraving" name="properties[Engraving]" maxlength="30"
       form="product-form-{{ section.id }}">
```

Two notes:

- Line item properties are the general mechanism here. Any input named `properties[Something]` gets attached to the line and shows on the order.
- A property with an empty value is dropped by Shopify, so optional fields simply do not appear when left blank. If you want the field to be mandatory, gate it with the same JavaScript pattern as the checkbox.

Naming the property with a leading underscore, like `properties[_internal]`, hides it from the customer while keeping it on the order. Useful for values you want for fulfillment but not on the invoice.

## Shopify file upload on the product page

File upload works the same way and needs no app:

```liquid
<input type="file" name="properties[Artwork]" form="product-form-{{ section.id }}">
```

The form already carries `enctype="multipart/form-data"`, which is what makes this work. Shopify stores the file and puts a link on the order line.

The limit is 20 MB per file. There is no way to raise it, and there is no built-in way to restrict file types beyond the `accept` attribute, which is a hint rather than a rule.

## If it did not work, check these

**The checkbox does not appear at all.** The product is not tagged, or the tag does not match. Tags are case sensitive in `contains` comparisons, so `Terms-Required` will not match `terms-required`.

**The checkbox appears but Add to cart still works.** Your theme uses a different selector for the button. The snippet looks for `[name="add"]`, which is the Shopify convention, but check your theme's markup and adjust.

**The checkbox appears in the wrong place.** Drag the block in the theme editor block list. On Athens, also confirm Position is set to Right.

**Everything works but nothing shows on the order.** The property name is wrong. It must be exactly `properties[Your Label]`, and the input must be inside the form or carry a matching `form` attribute.

**It works on the product page but not from a collection page.** Quick-add buttons post to the cart without ever loading the product page, so the block never renders. Turn off quick add for those products, or accept that the gate only covers the product page. Athens has no quick add, so this did not apply here.

## Terms checkbox on the product page vs at checkout

Worth being clear about what this does and does not cover.

This puts the checkbox on the **product page**. It is a per-item agreement, and it records which items the customer accepted terms for.

If you want a single agreement at **checkout**, that is a different job. On Shopify Plus you can use checkout UI extensions. On other plans, checkout is not editable. Merchants usually put the agreement text near the checkout button in the cart instead.

For most stores asking this question, the product page version is what they actually want, because the agreement is specific to certain products rather than the whole order.

## Is a checkbox legally binding?

Not advice, just the practical distinction people ask about.

A tick box where the customer actively agrees is a "clickwrap" agreement. It is generally treated as stronger evidence of consent than a passive "by using this site you agree" notice. Recording the acceptance on the order, which the snippet does, is the part that makes it evidence rather than decoration.

If the agreement matters commercially, have a lawyer look at the wording. The technical side is the easy half.

## What this cost

One tag applied in a single bulk action. One block. No app, no monthly fee, no per-product option sets, and the native variants are untouched.

That is usually the right shape for a Shopify product page customization. Reach for a tag and a Custom liquid block before you reach for an app, and only escalate when you genuinely need a customer-facing *choice* rather than a customer-facing *control*.


---

---
title: "Shopify Theme Detector: How to Find Any Store's Theme"
description: Every Shopify storefront publishes its own theme name in the page source. Here is how to read it in ten seconds, why theme detector tools get it wrong, and what to do when the answer is a custom theme you cannot buy.
---

## The problem

Someone on the Shopify Community posted a link to [vegamour.com](https://vegamour.com) and asked one question: which theme is this store using?

It is the most common question on the whole forum. You see a store with a layout you like, you want the same thing, and the obvious first step is to find out what they built it on.

The usual answers are guesses. Somebody recognises a font, somebody else pastes the URL into a free theme detector tool, and the thread ends with a theme name that may or may not be right.

You do not have to guess. Every Shopify storefront publishes its own theme name, in plain text, in the page source. It is there on every single store, it cannot be turned off, and reading it takes about ten seconds.

## Every Shopify store exposes a Shopify.theme object

When Shopify renders a storefront it injects a small JavaScript object into the page called `Shopify`. One of its properties is `Shopify.theme`, and it looks like this:

```js
Shopify.theme = {
  "name": "Pivotmade theme",
  "id": 123456789,
  "schema_name": "Pivotmade theme",
  "schema_version": "1.0.0",
  "theme_store_id": null,
  "role": "main"
}
```

This is not something the merchant opted into. It is part of how the storefront works, so it is present on every Shopify store, including ones that have gone to a lot of trouble to look like they are not on Shopify.

Here is that object read straight off vegamour.com.

![The Shopify.theme object on vegamour.com showing schema_name and a null theme_store_id](/images/blog/shopify-theme-detector/01-shopify-theme-object-schema-name.jpeg)

Two fields do all the work.

**`schema_name`** is the base theme, the one the merchant started from. This is the field you actually want. It survives renaming, so a store that renamed its theme to "Homepage v4 FINAL" still reports the real base theme here.

**`theme_store_id`** tells you whether you can buy it. Every theme sold in the Shopify Theme Store carries a real numeric ID. Dawn is `887`, Impulse is `857`, Prestige is `855`. If this field is `null`, the theme is not in the Theme Store, and there is nothing you can go and purchase.

There is also a plain `name` field. Ignore it. That is whatever the merchant typed in the admin, so it is frequently something like "Copy of copy of live theme" and tells you nothing.

## How to read it in ten seconds

Three ways, in order of how fast they are.

### With the browser console

Open the store, press F12, click Console, and type:

```js
Shopify.theme
```

Press Enter. The object prints out. This is the fastest method and it needs nothing installed.

If you get `Shopify is not defined`, the site is not a Shopify store at all. That is a useful answer in itself and it is how you tell a genuine Shopify store from a WooCommerce or BigCommerce store wearing a similar layout.

### With view-source

If the console feels fiddly, open the page source directly. In your browser, put `view-source:` in front of the URL:

```
view-source:https://example.com
```

Then use Ctrl+F to search for `Shopify.theme`. Same information, no console.

### With curl, from the terminal

This is the one I use, because it works on stores that are password protected and it gives you a clean one-line answer:

```bash
curl -sL -A "Mozilla/5.0" https://example.com/ | grep -oE 'Shopify\.theme[^;]*'
```

The `-A "Mozilla/5.0"` matters. Some stores return a stripped-down page to requests that do not send a browser user agent.

This works even on stores showing an "Opening soon" password page, because the theme object is injected before the password gate.

## Why theme detector tools get it wrong

Free theme detector sites mostly work by pattern matching. They look for filenames, CSS class names, or asset paths that a known theme uses, and they report the closest match.

That approach breaks in three specific ways, and all three are common.

**A renamed theme fools the ones that read `name` instead of `schema_name`.** Merchants rename themes constantly. If a detector reports "Copy of Dawn 2024 live", it read the wrong field.

**A heavily customised theme reports its parent, which is right, but the detector reports what it looks like, which is wrong.** These are different questions and detectors tend to conflate them.

**A custom theme has no match at all**, so a detector that always returns an answer will return a wrong one. This is the failure mode in the vegamour thread. Two people correctly identified the theme as a custom Pivot build. A tool that insists on naming a Theme Store theme would have said Dawn, and sent the merchant off to buy something that is not what they are looking at.

Reading `Shopify.theme` yourself avoids all three, because you are reading what the store reports about itself rather than what a heuristic guesses.

## When the answer is a custom theme

This is the outcome you are trying to avoid and it is very common on large stores.

On vegamour.com, `schema_name` is `"Pivotmade theme"` and `theme_store_id` is `null`. That combination means: an agency built this, it is not for sale, and no amount of searching the Theme Store will turn it up.

At that point most threads stop. But the source tells you more, and this is where the ten second check turns into something actionable.

**Look at which custom elements the page registers.** Modern Shopify themes are built out of web components, and the set of components a theme defines is close to a fingerprint of what it was forked from.

On vegamour, the cart and product JavaScript is still Dawn's, structurally untouched. The page registers `<variant-selects>`, `<variant-radios>`, `<quantity-input>`, `<product-form>`, `<cart-items>` and `<cart-drawer>`, and Dawn's own `trapFocus` and `fetchConfig` helpers are still in the bundle.

![Dawn custom elements still registered on vegamour.com](/images/blog/shopify-theme-detector/02-dawn-custom-elements-registered.jpeg)

What has been replaced is the navigation, search, slider and media layer. Those are gone and rewritten.

So the real answer to "what theme is this" is not "Pivotmade theme". It is: **this is a Dawn fork with a custom navigation and media layer**. And that answer is genuinely useful, because it tells you to start from Dawn, which is free, and spend your budget on the parts they actually rebuilt.

You can check this yourself:

```bash
curl -sL -A "Mozilla/5.0" https://example.com/ \
  | grep -oE 'customElements\.define\("[^"]+"' | sort -u
```

Compare the output against a stock Dawn store. What matches is inherited. What is missing was replaced.

## Reading the rest of the fingerprint

While you have the page source open, a few other things are worth pulling out.

**The asset path reveals the theme's internal ID:**

```bash
curl -sL -A "Mozilla/5.0" https://example.com/ \
  | grep -oE '/cdn/shop/t/[0-9]+/assets/[^"?]+' | sort -u
```

The number after `/t/` is the theme's position in that store's theme list. More usefully, the filenames tell you a lot. A store running stock Dawn serves `base.css`, `global.js`, `product-info.js`. A store running Horizon serves entirely different filenames. Custom builds usually serve one large bundled file with a hash in the name.

**`schema_version` tells you how current they are.** A store on Dawn `2.0.0` is running a build from years ago. If you are copying an approach from them, check that it still applies to the current version.

**The theme_store_id, when it is not null, is directly linkable.** Put it into this URL to land on the theme's Theme Store page:

```
https://themes.shopify.com/themes?id=887
```

## Common questions

**Does this work on password protected stores?**

Yes. The theme object is injected before the password gate renders, so `curl` still returns it. You will not be able to see the live storefront, but you get the theme name.

**Can a merchant hide Shopify.theme?**

Not through any setting. A theme could in principle delete the object with JavaScript after page load, which is why the `curl` method is more reliable than the console method: `curl` reads the raw HTML before any script has run.

**The store says schema_name Dawn but it looks nothing like Dawn.**

That is normal and it is the most useful answer you can get. Dawn is free, and a lot of very polished stores are Dawn underneath with heavy section and CSS work on top. It means the layout you admire is achievable without buying anything.

**What if there is no Shopify object at all?**

The site is not on Shopify. Check for WooCommerce (`/wp-content/` in asset paths), BigCommerce (`/stencil/`), or a headless setup. Headless Shopify is the tricky case: the storefront is a custom frontend hitting Shopify's API, so there is no theme to detect because there is no theme.

**Is `theme_store_id: null` always a custom theme?**

Almost always, but there is one other case. A Theme Store theme that was downloaded and re-uploaded as a ZIP file loses its store ID, so it reports `null` even though it started as a purchasable theme. If `schema_name` matches a theme you can find in the Theme Store, that is what happened.

## If it did not work

**`Shopify is not defined` in the console.** Either the site is not Shopify, or you ran it before the page finished loading. Reload and try again.

**`curl` returns nothing.** Add the user agent flag. Some stores and most CDNs return a challenge page to bare requests. If it still returns nothing, the store may be behind bot protection, in which case use the browser console instead.

**You get a theme name that does not exist in the Theme Store.** Check `theme_store_id`. If it is `null`, that is expected and the theme is custom. Move on to the custom elements check to find the parent.

**Two stores report the same schema_name but look completely different.** That is the correct outcome, not an error. The theme is the starting point, not the finished site. Most of the visual difference between two Dawn stores is sections, settings and CSS.

## The distinction that trips people up

Three things get called "the theme" in these threads and they are not the same:

**The base theme** is what `schema_name` reports. This is what you would buy or download to start from the same place.

**The published theme name** is what `name` reports. This is a label the merchant typed. It has no technical meaning.

**The design** is what you can actually see, and it is base theme plus settings plus sections plus custom CSS plus, often, a rewritten JavaScript layer. Only the first part is purchasable.

When someone asks "which theme is this store using", they usually want the third one and can only be given the first. Being explicit about that gap is more helpful than naming a theme and letting them find out later.

## What I would do next

Read `Shopify.theme` on the store you are interested in. If `theme_store_id` is a number, you are done, go buy that theme.

If it is `null`, run the custom elements check to find the parent theme, then start there. In the vegamour case that means starting from Dawn, free, and treating the navigation and media work as the custom part it actually is.

Either way it is a ten second check that replaces a fifteen post forum thread of guesses.


---

---
title: "Shopify Payments Alternatives: Third-Party Providers"
description: You do not have to use Shopify Payments. Here is how to take payments through a third-party provider or a manual method on Shopify, and still fulfill orders the normal way.
---

## The problem

A merchant asked this on the Shopify Community. They wanted to know if they could build a store on Shopify, skip Shopify Payments, take payment through an outside provider, have that payment go through, and then ship the order.

It is a fair question, and a common one. Shopify Payments is pushed hard during setup, so it is easy to assume it is the only way to get paid. It is not.

The short answer is yes. You can take payment through an outside provider. Once the order shows as paid, you fulfill it the same way you would with any other order.

I checked the current setup on a test store so the steps below match what you will actually see. Here is where it all lives, and the three ways to do it.

## Where payment settings live

Everything starts in one place. Go to **Settings**, then **Payments**.

That page has three parts that matter here:

- A section for Shopify Payments (or a test gateway on development stores).
- **Additional payment providers**, where outside gateways and PayPal plug in.
- **Manual payment methods**, further down the page.

![Settings, then Payments, then Add provider](/images/blog/shopify-third-party-payment-providers/01-add-provider.png)

You are never forced to activate Shopify Payments to use the rest of the page. You can leave it switched off and set up something else instead.

## Route 1: A third-party payment provider

This is the route most merchants want. It keeps a normal checkout, and the whole thing is automatic.

Under **Additional payment providers**, click **Add provider**, then switch to the **Search by provider** tab.

![The third-party provider list in Shopify](/images/blog/shopify-third-party-payment-providers/02-provider-list.jpeg)

Shopify supports more than a hundred outside gateways. The exact list depends on your country, but you will usually see names like Razorpay, PayU, Cashfree, Mollie, 2Checkout, and many more. Pick the one you have an account with, connect it, and you are done.

Here is what happens after that:

- The customer pays inside your normal Shopify checkout. They do not leave your store for most integrated gateways.
- When the payment succeeds, Shopify marks the order as **Paid** on its own.
- You fulfill the order the same way you always would.

No custom code. No app to build. The gateway does the talking to Shopify for you.

### What "third-party provider" actually means

A third-party payment provider is any gateway that is not Shopify Payments. It processes the card or wallet payment, then tells Shopify the money came through.

The important part is that your checkout does not change. Shoppers still see the Shopify checkout they trust. The gateway just runs behind it. That is why this route feels invisible once it is set up, and why it is the one to reach for first.

## Route 2: A manual payment method

Some merchants do not want a gateway at all. They take payment by bank transfer, cash on delivery, a QR code, or some other offline method. Shopify supports that too.

On the Payments page, open **Manual payment methods** and add one.

![Manual payment methods in Shopify](/images/blog/shopify-third-party-payment-providers/03-manual-methods.png)

Read the line Shopify shows on that screen, because it answers the original question exactly: payments made outside your online store, and orders paid manually must be approved before being fulfilled.

Here is the flow:

- The customer places the order and picks your manual method at checkout.
- The order comes in as pending, not paid.
- You confirm the money actually arrived, in your bank app, your wallet, wherever it landed.
- You mark the order as **Paid** in the Shopify admin.
- You fulfill it.

The one difference from Route 1 is that Shopify cannot know the payment succeeded, because it happened outside Shopify. So you tell it, by marking the order paid. That single manual step is the whole trade-off.

Use this when your provider is not in Shopify's list, or when you genuinely take money offline.

## Route 3: A payment app

If your gateway is not in the built-in list, check the Shopify App Store before you give up. Many payment providers ship their own app that adds them to checkout as a proper payment option.

An app-based gateway usually behaves like Route 1 once installed. The customer pays in checkout, and the order marks itself paid. You get the automatic flow without the provider needing to be in Shopify's default list.

So the order of things to try is simple. Look for the provider in Settings, then look for its app, then fall back to a manual method.

## How payment connects to fulfillment

This is the part the original question was really about, so it is worth stating plainly.

Fulfillment is not tied to your payment provider. Shopify does not care how the money arrived. It cares about one thing: is the order marked Paid.

With an integrated gateway or a payment app, that Paid status is set for you. With a manual method, you set it yourself. Either way, once the order reads Paid, fulfillment works exactly as normal. You print the label, mark it fulfilled, and the customer gets their tracking.

Nothing about shipping, tracking, or the customer's order status changes based on which gateway you picked. The gateway choice ends at "the order is paid." Everything after that is the same for every store.

## The fee question: does Shopify charge extra?

Most merchants who ask about outside providers are really asking about cost, so here it is.

When you use a third-party provider instead of Shopify Payments, Shopify adds a small transaction fee on top of what the gateway charges you. It is usually between 0.5% and 2%, depending on your plan. Higher plans pay a smaller percentage.

There is one big exception. If Shopify Payments is not available in your country, Shopify does not charge that extra fee at all. Merchants in regions where Shopify Payments is not offered use third-party gateways with no Shopify surcharge, only the gateway's own fees.

PayPal is also treated gently here. When you add PayPal as an additional provider, Shopify does not take a transaction fee on it. You just pay PayPal's own processing fees.

So the fee is real, but it is small, and for a lot of merchants it does not apply at all.

## Can I use PayPal without Shopify Payments?

Yes. PayPal sits in the same **Additional payment providers** section and does not depend on Shopify Payments being on.

Activate it there, and it appears at checkout as its own option. Customers who pick it are sent to PayPal to pay, then returned to your store, and the order marks itself paid. It is one of the easiest outside options to switch on.

## Can I use Stripe on Shopify?

This one confuses people, so here is the honest version.

Shopify Payments is powered by Stripe under the hood. Because of that, Stripe is not usually offered as a separate gateway you can add on top of Shopify. In most countries you will not find Stripe in the provider list as its own entry.

If you want Stripe's processing, the practical route is Shopify Payments itself, which uses Stripe already. If you specifically need a standalone Stripe integration, that is a case where an app, or a different supported gateway, is the answer.

## How to change or remove a payment provider

You are not locked in. Go back to **Settings**, then **Payments**, at any time.

Each active provider has a manage or deactivate control. You can turn one off, switch to another, or run more than one at once so customers get a choice at checkout. Removing a provider does not touch past orders. It only changes what future shoppers can pick.

If you set something up to test it and want it gone, deactivating it is safe and reversible.

## Does an outside provider affect anything else?

No, and this is the reassuring part.

Your products, your theme, your shipping rates, and your customer accounts all work the same regardless of which gateway takes the money. The payment provider is a single setting. It decides how a customer pays, and nothing else.

The one thing to keep an eye on is the manual route. Because you approve those payments by hand, a busy store can end up with orders sitting in a pending state while you wait to confirm money landed. If that volume grows, an integrated gateway or a payment app saves you the manual check on every single order.

## Can I fully bypass the Shopify checkout?

Worth clearing up, because "use an external payment method" sometimes means "use my own checkout."

On standard Shopify plans, you keep the Shopify checkout and plug a gateway into it. You cannot replace the checkout page itself with a fully custom external one. That level of control is a Shopify Plus or headless setup, and it is a much bigger project.

For most stores, that is fine. You do not need to replace the checkout. A third-party gateway drops straight into the checkout you already have, which is the whole point of the routes above.

## The short version

You do not have to use Shopify Payments to run a Shopify store.

- For a normal, automatic checkout, add a third-party provider in Settings, then Payments. The order marks itself paid, and you fulfill as usual.
- For offline payment like bank transfer or cash on delivery, use a manual payment method, confirm the money yourself, mark the order paid, then fulfill.
- If your gateway is not listed, look for its app.

Every one of these ends the same way: a Paid order that you fulfill the normal way. The gateway you choose changes how the money comes in, and nothing else.


---

---
title: "Shopify Tiered Pricing: How to Set Up Quantity Breaks"
description: "Sell the same product cheaper by the case. Set up tiered pricing on Shopify with free automatic discounts, then show a live 1 / 6 / 24 price table on the product page. Tested, with screenshots."
---

## The problem

A merchant asked this on the Shopify Community. They wanted the same product to get cheaper as people buy more of it:

- 1 item at \$12 each
- 6 or more at \$11 each
- 24 or more at \$9 each

They also asked the right follow-up question. Should they do this with a built-in Shopify feature, or do they need an app or custom code to show the price table on the product page?

This is what "tiered pricing" means. It is also called quantity breaks, volume pricing, or bulk pricing. The price per unit steps down at set quantities. It is one of the most common asks from stores that sell to shops, offices, or anyone who buys in bulk.

The short version: you can do the whole thing on Shopify for free, in two parts. Part one is the price itself, which uses Shopify's own discounts. Part two is the table shoppers see on the page, which is one small piece of code. I set both up on a test store and tested them end to end.

![A plain Shopify product page showing one price for any quantity, before tiered pricing is added](/images/blog/shopify-tiered-pricing/01-before-one-price.png)

## Why Shopify does not show it out of the box

Here is the part the quick forum answers skip.

Shopify has a discount engine built in. It can lower the price when someone buys a certain quantity. But that engine only runs in the cart and at checkout. It never touches the product page.

So if you only set up the discount, your product page still shows one price. The lower price appears after the shopper adds enough to the cart. For volume pricing that is a problem, because the visible price table is usually what makes the sale. People need to see "buy 6, save a dollar each" before they add anything.

That split is why every real answer to this question has two parts. The discount handles the money. A little bit of code handles what shoppers see.

## The short answer

- Create two automatic discounts, one for the 6-plus tier and one for the 24-plus tier.
- Add one Custom Liquid section to your product page and paste in a small table.
- Keep the numbers in both places the same, so the page matches what the cart charges.

Now the detail.

## Part 1: the tiered price, free and built in

In your Shopify admin, go to Discounts, then Create discount, then Amount off products.

Set up the first tier:

- Discount value: choose Fixed amount and enter 1.00 off.
- Leave "Only apply discount once per order" unchecked. This is the important box. Unchecked means the dollar comes off every item, not just one.
- Applies to: pick your product.

![The Shopify Amount off products discount form, set to \$1 off each item and applied to one product](/images/blog/shopify-tiered-pricing/02-amount-off-products.jpeg)

Then scroll down to Minimum purchase requirements and choose Minimum quantity of items. Enter 6. Save.

![The minimum purchase requirement set to a minimum quantity of 6 items](/images/blog/shopify-tiered-pricing/03-minimum-quantity-6.png)

That is your 6-plus tier done. At 6 or more, each item drops by \$1, so \$12 becomes \$11.

Now make the second tier exactly the same way. Amount off products, Fixed amount 3.00 off, applied to the same product, minimum quantity of items 24. Save.

You now have two automatic discounts sitting in your Discounts list.

![The Shopify discounts list showing two active automatic discounts, one per pricing tier](/images/blog/shopify-tiered-pricing/04-two-automatic-discounts.png)

Here is how they behave together, which is the thing people worry about:

- 1 to 5 items: \$12 each
- 6 to 23 items: \$11 each
- 24 or more: \$9 each

The two discounts do not stack. Shopify looks at the quantity in the cart and applies the single best tier on its own. I tested a cart with 24 units, and only the \$3-off tier applied, giving \$9 each. You do not have to build any logic for that. Shopify picks the winner.

![A Shopify cart with 24 units, showing the price dropped to \$9 each by the automatic discount](/images/blog/shopify-tiered-pricing/05-cart-9-tier.png)

One tip that saves a lot of clicking. If you sell many products at the same tiers, do not build a pair of discounts for each one. Under "Applies to", pick a collection instead of a single product. Put all the bulk-priced items in that collection, and the two discounts cover the whole group.

## Part 2: show the price table on the product page

The discounts above are invisible until the cart. To show the 1 / 6 / 24 table right on the product page, you add one Custom Liquid section. A Custom Liquid section is just a box in the theme editor where you can paste your own code. Every free Shopify theme has one, including Dawn and the newer Horizon.

Go to Online Store, then Themes, then Customize. Open your product template. Click Add section and choose Custom Liquid.

![Adding a Custom Liquid section to the Shopify product template in the theme editor](/images/blog/shopify-tiered-pricing/06-add-custom-liquid.png)

Paste this into the box. Then edit only the top two lines to match your own quantities and prices, and Save.

```liquid
{%- comment -%}
  Volume pricing table  -  paste into a Custom Liquid section on the product template.
  Edit the two lines below to match your discounts. Keep the counts equal.
    tier_qty    = the "buy this many or more" break points (lowest first)
    tier_price  = the per-item price at each break point
{%- endcomment -%}
{%- assign tier_qty   = '1,6,24' -%}
{%- assign tier_price = '12,11,9' -%}

{%- assign qtys   = tier_qty   | split: ',' -%}
{%- assign prices = tier_price | split: ',' -%}

<div class="vptable" data-qtys="{{ tier_qty }}" data-prices="{{ tier_price }}">
  <p class="vptable__title">Buy more, save more</p>
  <table class="vptable__grid">
    <thead>
      <tr><th>Quantity</th><th>Price each</th><th>You save</th></tr>
    </thead>
    <tbody>
      {%- for q in qtys -%}
        {%- assign i = forloop.index0 -%}
        {%- assign unit = prices[i] | plus: 0 -%}
        {%- assign base = prices[0] | plus: 0 -%}
        {%- assign saved = base | minus: unit -%}
        {%- assign nextq = qtys[forloop.index] -%}
        <tr class="vptable__row" data-min="{{ q }}">
          <td>
            {%- if forloop.last -%}{{ q }}+
            {%- elsif forloop.first and nextq -%}{{ q }}-{{ nextq | minus: 1 }}
            {%- elsif nextq -%}{{ q }}-{{ nextq | minus: 1 }}
            {%- else -%}{{ q }}+{%- endif -%}
          </td>
          <td>{{ unit | times: 100 | money }}</td>
          <td>{%- if saved > 0 -%}{{ saved | times: 100 | money }} each{%- else -%}-{%- endif -%}</td>
        </tr>
      {%- endfor -%}
    </tbody>
  </table>
  <p class="vptable__note">Discount applies automatically in the cart.</p>
</div>

<style>
  .vptable{margin:1.5rem 0;font-size:1.4rem}
  .vptable__title{font-weight:600;margin:0 0 .6rem}
  .vptable__grid{width:100%;border-collapse:collapse}
  .vptable__grid th,.vptable__grid td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid rgba(0,0,0,.12)}
  .vptable__grid th{font-size:1.2rem;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
  .vptable__row{cursor:pointer;transition:background .15s}
  .vptable__row:hover{background:rgba(0,0,0,.04)}
  .vptable__row.is-active{background:rgba(0,0,0,.07);font-weight:600}
  .vptable__note{margin:.7rem 0 0;font-size:1.2rem;opacity:.7}
</style>

<script>
(function(){
  function init(box){
    if(box.dataset.vpReady) return; box.dataset.vpReady='1';
    var mins=box.dataset.qtys.split(',').map(Number);
    var rows=[].slice.call(box.querySelectorAll('.vptable__row'));
    var qtyInput=document.querySelector('form[action*="/cart/add"] input[name="quantity"]')
                 ||document.querySelector('input[name="quantity"]');

    function tierIndex(q){var idx=0;for(var i=0;i<mins.length;i++){if(q>=mins[i])idx=i;}return idx;}
    function paint(){
      var q=qtyInput?parseInt(qtyInput.value,10)||1:1;
      var idx=tierIndex(q);
      rows.forEach(function(r,i){r.classList.toggle('is-active',i===idx);});
    }
    rows.forEach(function(r){
      r.addEventListener('click',function(){
        if(!qtyInput) return;
        qtyInput.value=r.dataset.min;
        qtyInput.dispatchEvent(new Event('change',{bubbles:true}));
        qtyInput.dispatchEvent(new Event('input',{bubbles:true}));
        paint();
      });
    });
    if(qtyInput){
      qtyInput.addEventListener('change',paint);
      qtyInput.addEventListener('input',paint);
    }
    paint();
  }
  function run(){document.querySelectorAll('.vptable').forEach(init);}
  if(document.readyState!=='loading')run();else document.addEventListener('DOMContentLoaded',run);
  document.addEventListener('shopify:section:load',run);
})();
</script>
```

The two lines at the top are the only thing you touch:

- `tier_qty` is the list of quantities where the price changes, lowest first.
- `tier_price` is the price per item at each of those quantities.

Keep the two lists the same length. The prices show in your store's own currency automatically, so you do not set a currency symbol.

Once it is saved, the table appears on the product page. The row that matches the current quantity is highlighted, and clicking a row sets the quantity for you.

![A live tiered price table on a Shopify product page, with the current quantity row highlighted](/images/blog/shopify-tiered-pricing/07-table-on-product-page.png)

Change the quantity and the highlight follows it, so shoppers always see which tier they are in.

![The price table highlighting a different tier as the product quantity changes](/images/blog/shopify-tiered-pricing/08-tier-highlights.png)

The one rule to remember: keep the numbers in Part 1 and Part 2 the same. The table is just a display. The real discount is the one in Part 1. If the table says \$9 but you forgot to create the 24 discount, the page will promise a price the cart does not give.

## Shopify volume discount, quantity discount, and tiered pricing: same thing

People search for this in a lot of different ways, and they all mean the same setup:

- Tiered pricing: the price per unit steps down at set quantities.
- Volume discount or volume pricing: same idea, framed as "buy more, pay less per unit".
- Quantity discount or quantity breaks: same idea, framed around the quantity thresholds.
- Bulk pricing: the everyday word for it.

None of these is a separate Shopify feature. They are all the two-part setup above: an automatic Amount off products discount for the price, plus a small on-page table for the display.

## Does Shopify have bulk pricing built in?

Partly. The discount side is fully built in and free, and that is what actually charges the lower price. What Shopify does not give you out of the box is the price table on the product page. That is the gap the Custom Liquid section fills.

There is one exception worth knowing. Shopify Plus stores selling wholesale through B2B catalogs do get real volume pricing that shows on the storefront. For a normal store selling to the public, the two-part method here is the way.

## What to check if it did not work

- The discount comes off only one item. You left "Only apply discount once per order" checked. Uncheck it so the amount comes off each item.
- The price does not drop at all. Check that the discount is Active, and that your product is the one selected under "Applies to". If you targeted a collection, make sure the product is in it.
- The table shows on the page but the price never changes in the cart. That means the table is there but the matching discount is missing. The table does not create the discount. You still need both parts.
- The wrong tier wins. Double check the minimum quantity numbers. The 6 discount should be quantity 6, the 24 discount should be quantity 24. Shopify always applies the best tier for the quantity in the cart.

## The no-code alternative

If you would rather not paste any code, a quantity-break app does both parts for you. It shows the table on the page and applies the tiers in the cart, from one place. Well-known options include Wide Bundles, Bundler, and VolumeBoost. They are the simplest route if you want the table and the discount managed together, and most have a free tier to start.

The trade-off is the usual one. An app is faster to set up and easier to manage, but it adds another app to your store. The native method here is free and has nothing extra running, but you manage the discounts and the table yourself.

## The short version

- Tiered pricing on Shopify is two parts: the price and the display.
- The price is free. Two automatic Amount off products discounts, one per tier, with a minimum quantity on each. Shopify applies the best tier on its own.
- The display is one Custom Liquid section with a small table, so shoppers see the deal before they add to cart.
- Keep the numbers in both parts the same, and test a real cart at each tier.

I set this up on a Dawn test store and confirmed all three tiers: 1 at \$12, 6 at \$11 each, and 24 at \$9 each.


---

---
title: "Shopify Too Many Variants? Fix the Tall Product Page"
---

## The problem

A merchant raised this on the Shopify Community. They sell a product with a lot of values on one option, like 20 colours on a water bottle. On the Horizon theme, those 20 colours do not sit in a neat row. They stack into a tall, multi-row block.

That block is the problem. It is so tall that it pushes the product image and the Add to cart button far down the page.

Then it gets worse. When the shopper picks a colour, the product image at the top updates to match. But the page does not scroll for them. They are still parked down next to the colour buttons, looking at nothing, and they have to scroll back up to see the colour they just chose.

In their words, the swatches "consume significant page height" and there is "no scroll compensation," so the customer "must scroll up manually to confirm and view their selection."

It is worst on desktop, where the tall block can push the whole gallery out of view. On mobile it is milder, because the screen is narrower and the rows behave a little differently, but it is still not great.

I reproduced this on a Horizon test store with 20 colours and fixed it. The fix turns that tall block into a short, scrollable box. The image and the Add to cart button stay in view, so picking a colour no longer sends the shopper off-screen.

![Horizon product page - 20 colours stack into a tall block](/images/blog/shopify-too-many-variants-layout/01-horizon-20-colours-tall-block.png)

## Why it happens

Horizon is Shopify's newer free theme. On the product page it draws each option value as its own control, a swatch for a colour or a text button otherwise, and it shows them all at once.

For a Size option with three values that is fine. Three controls sit in one short row.

For a Colour option with 20 values it is not. Twenty controls cannot fit in one row, so they wrap onto the next line, and the next, and the next. You end up with a tall block that is several rows deep. The more values you have, the taller it gets.

Horizon has no built-in setting to cap that height or make the block scroll. It just lets the controls keep wrapping downward and shove everything below them further down the page.

There is also no auto-scroll. Picking a value swaps the main image, but the theme does not move the shopper back up to see it. That is why the experience feels broken with a long list, even though nothing is technically failing.

(This guide is about a long list that renders as a tall block. If your colour swatches are not showing at all and appear as plain text instead, that is a different fix, see [how to add color swatches without an app](/blog/shopify-color-swatches-without-app).)

## The fix: make the colours a compact, scrollable box

The fix is a few lines of CSS. You do not edit any theme file. You paste it into a Custom Liquid block in the theme editor, so it is easy to add and just as easy to remove later.

Here is what it does. It caps the height of the variant block and lets it scroll on its own. The option label, like "Color", stays pinned at the top of the box while you scroll through the values. The image and the Add to cart button stay where they are.

First, open the theme editor:

- From your Shopify admin, go to **Online Store > Themes**.
- On Horizon, click **Customize**.
- Open a **product** template from the page dropdown at the top.

Now add the block. In the left sidebar, open **Product information**, then **Details**. Click **Add block** and choose **Custom Liquid**.

![Theme editor - add a Custom Liquid block under Product information, Details](/images/blog/shopify-too-many-variants-layout/02-add-custom-liquid-block.png)

Paste this into the Liquid code box, then click **Save**:

```css
<style>
  .variant-picker .variant-option--buttons{
    max-height:8.25rem;overflow-y:auto;align-content:flex-start;
    padding-inline-end:6px;scrollbar-width:thin;
  }
  .variant-picker .variant-option--buttons legend{
    position:sticky;top:0;width:100%;z-index:1;
    background:var(--color-background);
  }
</style>
```

![Paste the CSS into the Liquid code box, then Save](/images/blog/shopify-too-many-variants-layout/03-paste-css-and-save.png)

That is the whole fix. Refresh the product page and the colour block will be short and scrollable.

Here is the result on my test store. The 20 colours now sit in a fixed-height box that scrolls on its own. The "Color" label stays pinned at the top of that box. The image and Add to cart stay in view, so picking a colour no longer sends you off-screen.

![After - compact scrollable colour box, image and Add to cart stay in view](/images/blog/shopify-too-many-variants-layout/04-after-compact-scrollable-box.png)

This works whether your colours show as round swatches or square buttons. The same block holds both, so the same rule caps the height.

## The one number you can change

`max-height: 8.25rem` is the knob. It controls how tall the box is before it starts to scroll.

At `8.25rem` you see about two rows of colours at once, then scroll for the rest. That is a good default for a long list, because it keeps the box small.

Want more colours visible before it scrolls? Raise the number. Try `12rem` for roughly three rows, or `16rem` for about four. Want it even tighter? Lower it. Change one value, save, and refresh to see the new height.

## Does this slow down my product page?

No. It is a small amount of CSS. It does not load an app, it does not add scripts, and it does not change your images. It only changes how tall one block is allowed to be. There is no measurable effect on page speed.

## Will it work on mobile too?

Yes. The rule caps the height on every screen size, so the box stays compact on phones as well as on desktop. Mobile was the milder case to begin with, and the fix keeps it tidy there too.

If you want a different height on mobile than on desktop, that is possible with a media query, but most stores do not need it. The single value works well across screen sizes.

## Will a theme update remove it?

Because the fix lives in a Custom Liquid block, not in a theme file, a normal theme update will not touch it. The block stays where you put it.

If you ever want to remove the fix, open the same Custom Liquid block in the theme editor and delete it, or clear the code and save. Nothing else on the page depends on it.

## The no-code alternative: switch to Dropdowns

If you would rather not touch any code, Horizon gives you a second option.

In the theme editor, open the **Variant picker** block and find its **Style** setting. Change it from Buttons or Swatches to **Dropdowns**.

Now your 20 colours collapse into a single dropdown menu. One short line, no tall block, no scrolling issue at all.

The trade-off is that the colours are no longer all visible at once. The shopper has to open the dropdown to see them. For a long list that is often a fair trade, since a wall of 20 buttons was not easy to scan anyway. For a short list of two or three colours, buttons are usually nicer, so only switch the products that actually have a long list.

You can mix the two ideas. Use the scrollable box for products where you want the swatches visible, and dropdowns for the ones with the longest lists.

## Doing this on Dawn or a paid theme

The idea carries to other themes, only the class names change. Horizon uses `variant-option--buttons`. Dawn and its relatives use different names, often something like `variant-input-wrap`, and paid themes like Prestige have their own markup.

The reliable way to find the right selector on any theme is to inspect the element. On the product page, right-click a colour control and choose Inspect. Read the class on the block that holds all the values, then apply the same `max-height` and `overflow-y: auto` rule to it. The method does not change: cap the block that holds the values, then let it scroll.

## Variant, option, value: the words people mix up

These three words get used loosely, and it makes fixes harder to follow. Here is the plain version.

- An **option** is a choosing category, like Color or Size.
- A **value** is one choice inside an option, like Red, or Large.
- A **variant** is a full combination the customer actually buys, like "Red / Large".

The tall block in this problem is a long list of **values** on one **option**. Twenty colour values. It is not about the total variant count, and it is not the 3-option limit. It is purely how one long list of values is drawn on the page.

## Swatch, button, dropdown: which one do you have?

Horizon can show an option in a few styles, and the right fix depends on which you use.

- **Swatches** are small colour circles or image chips, shown all at once.
- **Buttons** are tappable boxes with the value name inside, also shown all at once.
- **Dropdowns** are a single closed menu with a downward arrow that opens the list.

Swatches and buttons are the styles that stack into a tall block, because every value is drawn at the same time. The scrollable-box fix is for those. Dropdowns already collapse the list, so they never have this problem.

To check which you have, open the **Variant picker** block in the theme editor and read its **Style** setting. Or just look at the product page: a closed menu with an arrow is a dropdown, and a grid of boxes or circles is buttons or swatches.

## The short version

On Horizon, a product with many values on one option, like 20 colours, stacks into a tall block that pushes the image and Add to cart down the page, and picking a colour leaves the shopper scrolled away from it.

Add a **Custom Liquid** block under **Product information > Details** and paste the CSS above. It caps the block into a short, scrollable box with the label pinned, so the image and Add to cart stay in view. `max-height` is the knob, and the fix works for swatches too.

If you would rather not use code, set the Variant picker **Style** to **Dropdowns** and the long list collapses into one menu.


---

---
title: "Shopify Translate & Adapt: Adapt Content by Market"
description: Only your languages show in the Localized content dropdown and no markets appear? Here is where per-market content adaptation actually lives in Shopify Translate & Adapt, why a grouped market shares one text, and how to give one country its own copy. Tested, with screenshots.
---

## The problem

A merchant asked about this on the Shopify Community, and it is one of the most confusing parts of selling in more than one country.

They wanted different text for different markets. In their case, one message for Switzerland and a different one for the rest of Europe. Shopify's own documentation says the Translate & Adapt app supports market-specific content, not just language translation. So they opened the app and went looking for it.

But the "Localized content" dropdown only listed their five languages. No markets appeared at all.

![The Shopify Translate and Adapt Localized content dropdown listing only languages, not markets](/images/blog/shopify-translate-adapt-content-by-market/01-localized-content-languages-only.png)

They ran the Horizon theme on the Basic plan, with three active markets. They had three questions. How do you reach per-market adaptation? Does a country need its own market? Is this even on the Basic plan?

I reproduced the whole thing on a test store. The markets are not missing. They are one level deeper, and once you see where, it takes a minute.

## Why the markets are not in that dropdown

Let me explain the mechanism, because it is the part every quick answer skips.

Translate & Adapt does two different jobs, and they live in two different places.

The first job is **translation**. You take your content and render it in another language. French, German, Estonian, whatever you have added. That is what the "Localized content" dropdown at the top of the app is for. It lists languages because translation is a per-language job.

The second job is **adaptation**. You keep the same language but change the wording for buyers in a specific market. Same French, but a Swiss shopper reads a different line than a French shopper. That is not a language switch, so it does not belong in a language dropdown.

So the dropdown showing only languages is correct. It is doing exactly what it is meant to do. Market adaptation simply has its own control, and it does not appear until you open a piece of content to edit.

That is the whole source of the confusion. People look for markets in the language menu, do not find them, and conclude the feature is missing or blocked by their plan. It is neither.

## Where per-market adaptation actually lives

Here is the path that works. I tested it on a Horizon store with three markets set up.

- Open Translate & Adapt.
- Click any content type to open the side-by-side editor. Products is the easy one to start with.
- Click the menu at the top of the editor. This is the important step.
- The menu splits into two sections. "Translate across markets" lists your languages. Below it, "Adapt a market" lists your markets.
- Pick your market, then pick the language you want to adapt.

![The editor menu in Shopify Translate and Adapt showing an Adapt a market section with each market listed](/images/blog/shopify-translate-adapt-content-by-market/02-adapt-a-market-menu.png)

Now the editor changes. The heading reads "Adapting" your language "for" that market. You get two columns. The left column is your default text, shown for reference. The right column is where you type the market-specific version.

Fill the right column, then Save. The left column is never touched, so your default content stays exactly as it was for every other market.

![The Shopify Translate and Adapt editor with a market column on the right for typing market-specific text, and Save at the top](/images/blog/shopify-translate-adapt-content-by-market/03-edit-market-column.png)

That is per-market adaptation. It was there the whole time. It just does not show its face until you open a resource to edit.

There is a second way into the same screen if you prefer it. Go to Settings, then Languages. On your default language row there is an "Adapt" button. Click it, choose Translate & Adapt, and it drops you into the same market editor.

## Switzerland versus the rest of Europe

This is where the merchant's real goal ran into a wall, and it is worth understanding before you start.

In Shopify, you adapt a whole market. You do not adapt a single country inside a market.

Their Switzerland was grouped inside a market called "Europe hors UE" alongside the UK and Norway. A market is the smallest unit you can adapt for. So adapting that market changes the text for all three countries at once. There is no way to give Switzerland alone a different line while it lives inside that group.

![The Shopify Markets page showing a grouped market and the Create market button](/images/blog/shopify-translate-adapt-content-by-market/04-create-switzerland-market.png)

To give one country its own copy, that country needs its own market.

The merchant had actually created a separate Switzerland market earlier, then deleted it. Deleting it is exactly what removed the option. With Switzerland folded back into the group, there was nothing left to adapt on its own.

The fix is to recreate it. Go to Settings, then Markets, then Create market, and add a Switzerland market. Once it exists, it shows up under "Adapt a market" with its own editable column, and you can write Swiss-only wording without affecting the UK or Norway.

Creating a country or region market like this is free, and there is no cap on how many you can make.

## One market can hold several languages

The merchant raised a smart worry, and it is a common one, so it deserves its own section.

Switzerland has more than one official language. German, French, and Italian. Their fear was that giving Switzerland its own market would lock it to a single language.

It does not. One market can carry several active languages at the same time.

Think of how Canada works on Shopify. A single Canada market can serve both English and French, often through paths like /en-ca and /fr-ca. A Switzerland market can do the same with German, French, and Italian.

The setup order is simple. First add and publish the languages you want under Settings, then Languages. Then open your Switzerland market and add those languages to it. Translate & Adapt then holds a translation for each language, and market adaptation lets you fine-tune the wording on top of that, per market.

So you do not need one market per language. You need one Switzerland market that carries all three languages.

## Is per-market adaptation on the Basic plan

Yes. This works on the Basic plan.

Country and region markets are available on every Shopify plan, and there is no limit on how many you can create. Translate & Adapt is a free first-party app, and content adaptation is part of it on all plans.

There is a separate, more advanced set of market features, such as changing theme sections or catalog pricing per market, where some capabilities are tied to higher plans. But plain text adaptation, the thing this merchant wanted, is not one of them. Basic is fine.

One condition applies to any plan. A market only lets you adapt the languages that have been added to that market. If a language is not on the market, there is nothing to adapt for it there. So make sure your Switzerland market has German, French, and Italian added before you expect to adapt those.

## Translate, adapt, market, language: the words people mix up

Half the confusion here comes from four words that sound similar and are not. Here is the plain version.

**A language** is the tongue your content is written in. French, German, Estonian. You translate content into a language.

**A market** is a group of buyers you target with one shopping experience, usually by country or region. France is a market. "Europe hors UE" is a market. You adapt content for a market.

**Translate** means render the content in another language. This is the "Localized content" language dropdown.

**Adapt** means keep the language but change the wording for one market. This is the "Adapt a market" menu inside the editor.

A market can contain many countries, and it can carry many languages. But adaptation always happens at the market level, never at the country level inside a group. That single rule explains everything above. If you need a country to read differently from its neighbours, it has to be its own market.

## What to check if a market still does not appear

If you open the editor menu and still do not see the market you expect under "Adapt a market", run through these.

- Confirm the market exists and is active under Settings, then Markets. A deleted or draft market will not appear.
- Confirm you opened a content type first. On the app home screen you only see languages. The "Adapt a market" section shows up inside the editor, once you have clicked into Products or another resource.
- Confirm the language you want is added to that market. Adaptation only offers the languages the market actually serves.
- If you just created the market, give the admin a moment and reload the app.

Once the market is active and carries the language, it appears, and the two-column editor lets you write copy that only that market's buyers will see.


---

---
title: "Shopify Translate: Fix Mixed Languages on Product Pages"
description: A Swedish Shopify store showed English words on its translated product pages. The titles were translated, so the English came from option names and theme text. Here is how to find each leftover and fix it in Translate & Adapt, with screenshots.
---

## The problem

A merchant asked about this on the Shopify Community. They sell horse gear from Sweden on the Symmetry theme, and they run the store in two languages: Swedish and English. They translated the whole catalogue with Translate & Adapt, Shopify's free translation app.

The Swedish product pages still came out mixed. Some words were Swedish and some were English. The theme preview looked fine, so they suspected caching, the theme, or their Markets setup.

Two other replies in the thread said the same thing: some products were not translated, so translate them. That is a reasonable first guess. On this store it was wrong.

I checked all eight products on the live store in both languages. Every product title and every description had a Swedish version. The English words were coming from two other places:

- **Option names.** The labels above the size and colour buttons.
- **Theme text.** The small words the theme prints itself, like "Home", "By" and "Quantity".

![The Swedish product page with English words: Home, By, Size, Color and Quantity](/images/blog/shopify-translate-product-options/01-before.png)

## How a Shopify product page gets its words

A product page is put together from three kinds of text, and each one is translated in a different place.

**Your product content.** The title, the description, the option values (Black, White, M, L). You write these on the product, and Translate & Adapt holds a second version for each extra language.

**Your option names.** "Size" and "Color" are also written on the product, in the Variants card. They have their own row in Translate & Adapt, separate from the title and description. A product can have a Swedish title and an English option name at the same time.

**The theme's own words.** "Home" in the breadcrumb (the trail of links above the title), "By" before the brand name, "Quantity" above the number box, "Sold out", and the backorder message. These are not stored on any product. They belong to the theme, and each theme ships its own list of them. Translate & Adapt lists them under **Default theme content**.

When Shopify shows a page in Swedish, it looks each piece up in Swedish. If a piece has no Swedish version, it falls back to the store's default language. On this store that was English. That fallback is what makes a page look mixed.

## What was actually mixed on this store

Here is what the Swedish product pages showed, product by product.

| Product | Title | Option names shown in Swedish |
| --- | --- | --- |
| Heat Regulating Boot | Swedish | Storlek, Färg (correct) |
| Heat Regulating Pad | Swedish | Storlek, Färg (correct) |
| Light Jacket | Swedish | Storlek (correct) |
| Start Up Kit | Swedish | **Size, Color** |
| Airy Mesh Bandage | Swedish | **Color** |
| Limited edition Cap | Swedish | Storlek, **Color** |
| Cover Pants | Swedish | **XS** |

On three products the option names were typed in Swedish on the product itself, in the field that should hold English. Then the Swedish translation was filled in with the English words. The two were swapped, so the English page said "Färg" and the Swedish page said "Color".

The Cover Pants option was named "XS", which is a size value, not an option name. That looks like a typo from when the product was set up.

On top of that, every Swedish product page showed the same English theme words: Home, By, Quantity and, on the cap, Sold out.

## Fix 1: put the option names in the right fields

The rule is simple. The product itself holds your **default language**. Translate & Adapt holds every **other** language. On a store whose default is English, the product's option names must be English.

I set up a product with the same swapped names on a test store running Symmetry with Swedish added, then fixed it like this.

1. Go to **Products** and open the product.
2. In the **Variants** card, click the option name.

![The Variants card showing the option names Storlek and Färg](/images/blog/shopify-translate-product-options/03-variants-card.png)

3. Change the name to the English word and click **Done**. Do the same for the second option.

![The option names changed to Size and Color](/images/blog/shopify-translate-product-options/05-options-renamed.png)

4. Click **Save**.
5. Go to **Apps** > **Translate & Adapt**. Pick **Swedish** at the top and click **Products**.

![Translate & Adapt with Swedish selected and the Products row](/images/blog/shopify-translate-product-options/07-ta-home.png)

6. Open the same product. Scroll to the option names. Type the Swedish word next to each English one and click **Save**.

![The Swedish option names typed in Translate & Adapt](/images/blog/shopify-translate-product-options/09-ta-options-filled.png)

Renaming the option does not change your variants, prices or stock. It only changes the label.

## Fix 2: translate the theme's own words

Theme words are translated once per theme, not per product. One entry fixes every product page.

1. In Translate & Adapt, click the theme card at the top left and pick your theme. On this store that was Symmetry. Make sure it is the theme that is live, not a copy.
2. Click **Default theme content**.

![Picking the Symmetry theme and opening Default theme content](/images/blog/shopify-translate-product-options/11-ta-theme-picker.png)

3. Open the **General** group. Find the row **Breadcrumbs: Home** and write **Hem** in the Swedish box.

![Breadcrumbs Home translated to Hem](/images/blog/shopify-translate-product-options/12-ta-home-hem.png)

4. Open the **Products** group and fill in the row for each English word you saw on the page.

![Quantity translated to Antal](/images/blog/shopify-translate-product-options/14-ta-quantity.png)

5. Click **Save**.

These are the Swedish words I used for Symmetry:

| English on the page | Where it is in Translate & Adapt | Swedish |
| --- | --- | --- |
| Home | General > Breadcrumbs: Home | Hem |
| By | Products > Product: Vendor | Från |
| Quantity | Products > Product: Quantity | Antal |
| is backordered and will ship as soon as it is back in stock. | Products > Product: Backorder | är restnoterad och skickas så snart den finns i lager igen. |
| Sold out | Products > Product: Sold Out | Slutsåld |

The rows are grouped. If a word does not turn up in Products, look in General. When you switch groups, save first, or Translate & Adapt asks whether to drop your unsaved changes.

![The same Swedish product page after the fix](/images/blog/shopify-translate-product-options/02-after.png)

## Is it caching?

No. The live Swedish product page comes back from Shopify marked no-cache, no-store, so no stale copy is being served.

## Does auto-translate fix this?

Not for the swapped option names. The Swedish field already held a word ("Color"), so there was nothing blank to fill. Those need fixing by hand, in both places.

For the empty theme words, auto-translate is an option. Check the result anyway, because short labels like "By" are easy for a machine to translate in the wrong sense.

## How to find every leftover English word

Checking page by page works on a small store. This one had eight products. On a bigger catalogue, work through it like this.

- **Open one product page in each language side by side.** The labels that stay the same in both are your leftovers.
- **Check a product in each state.** A sold-out product and a backordered one show extra messages that an in-stock product never shows.
- **Check the cart and the search page too.** They use their own theme words, which sit in other groups of Default theme content.
- **Look at the option names in Translate & Adapt.** The left column should be in your default language. If it is not, the product needs fixing, not the translation.

## If it did not work

- **Translated the wrong theme.** Translate & Adapt opens on your live theme, but if you picked a copy earlier it stays on that copy. Check the theme card at the top left.
- **The Swedish box was saved but the page still shows English.** Hard refresh the page. Then check that you opened the Swedish version of the page (the web address has /sv in it on this store).
- **An option name still shows the old word.** Open the product in Translate & Adapt again. After renaming an option, the old translation can be marked as outdated. Retype it and save.
- **The word is not in Default theme content at all.** Some text comes from a block setting in the theme editor, like a button label you typed yourself. That lives under **Templates** or **Section groups** in Translate & Adapt, not Default theme content.

## Content translation vs theme translation

These two get mixed up, and the thread showed why.

**Content** is anything you typed in the admin: products, collections, pages, blog posts, menus. Each item gets its own translation.

**Theme text** is anything the theme prints on its own. It is translated once per theme, and switching to a new theme means translating it again, because each theme ships its own list.

When a page is partly translated, ask which of the two each English word belongs to. That tells you which part of Translate & Adapt to open.

The original question is on the [Shopify Community](https://community.shopify.com/t/help-needed-shopify-markets-swedish-and-english-languages-are-mixing-on-my-live-store/688882).


---

---
title: Fix "Translation missing" Text on a Shopify Store
description: A store showed "Translation missing: et.fields.separator" inside its price filter. Here is what that error means, why it happens, and how to clear it in Translate & Adapt, with screenshots.
---

## The problem

A merchant asked about this on the Shopify Community, and the error looks scarier than it is.

They run an Estonian store on the Horizon theme. In their collection filters, the price range box showed something odd. Instead of a clean "0 to 40" between the two price inputs, it printed raw text: **Translation missing: et.fields.separator**.

They had already translated most of the store. They could not find a way to fix this last bit. There was no auto-translate button for them, and they could not locate the field by hand.

![A Shopify price filter showing Translation missing: et.fields.separator between the two price inputs](/images/blog/shopify-translation-missing/01-translation-missing-error.png)

I reproduced it on a test store running Horizon with Estonian added. The fix is a single field. Once you know where it lives, it takes about thirty seconds.

## What "Translation missing" actually means

Let me explain the mechanism, because it tells you exactly where to look.

Every piece of fixed text in a Shopify theme, the words the theme itself supplies, comes from a translation key. "Add to cart", "Sold out", the "to" between two price values, all of it. Your product names and descriptions are your content. These small connector words are the theme's content.

When your store shows a language, Shopify looks up each of those keys in that language. If it finds a translation, it prints it. If it does not, and the key has no value in that language, it prints the key name preceded by "Translation missing" so you can see what is unset.

So "Translation missing: et.fields.separator" reads like this. The language code is **et**, which is Estonian. The key is **fields.separator**. That key is the small separator shown between the minimum and maximum values in the price range filter. In English it is the word "to". In Estonian it had no value, so the theme printed the key name instead.

Nothing is broken. One theme string simply has no Estonian translation yet.

## Why this one slipped through

This is worth understanding so you can catch the others.

Themes ship with a set of built-in languages. Horizon, like most themes, ships English and a handful of major languages, but not every language on earth. Estonian is not one of the built-in sets. So when this merchant added Estonian, the theme had no ready-made Estonian text for its own strings. Those had to be translated, either automatically or by hand.

Most of them were. But `fields.separator` is a relatively new key, and a new key added in a theme update does not appear in a translation set that was created earlier. It sits there empty. Auto-translate would fill it, but the merchant could not run auto-translate, so it stayed empty and showed the raw key.

This is the normal life of theme translations. It is not a bug in your store. It just needs the one value typed in.

## It is theme text, not the app

One quick but important distinction, because it sends people to the wrong screen.

In the same filter box, the filter names themselves, "Availability" and "Price", are set in the **Search & Discovery** app, not in the theme. If those are in the wrong language, you fix them there.

The separator is different. It is theme text. So Search & Discovery cannot touch it, and neither can editing your products. It lives in the theme's translations, and that is the screen we are going to.

## The fix, step by step

You will use Shopify Translate & Adapt, the free translation app that ships with Shopify. You do not need the auto-translate button, and this does not count against any translation limit, because you are filling a single field by hand.

### Step 1. Open Translate & Adapt for your language

Go to **Settings**, then **Languages**. Next to the language with the problem, click **Translate**. That opens Shopify Translate & Adapt with that language selected. You can also open it from **Apps**, then **Translate & Adapt**, and pick the language at the top.

![The Shopify Translate & Adapt home screen with Estonian selected](/images/blog/shopify-translation-missing/02-open-translate-and-adapt.png)

Make sure the language shown at the top is the one you are fixing.

### Step 2. Open Default theme content

Scroll down the list of content types to the **Theme** group.

Open **Default theme content**. This is where all of the theme's own fixed text lives, grouped into categories like Accessibility, Products, and Fields.

### Step 3. Find the Separator field and fill it

In the left list of categories, open **Fields**.

You will see one entry, **Separator**. Its English reference value is "to", and the box for your language is empty. That empty box is the whole problem.

Type your language's word into it. For Estonian, "kuni" works, or a simple dash. Then click **Save**.

![The Fields category in Translate & Adapt with the Separator field being given an Estonian value](/images/blog/shopify-translation-missing/03-fields-separator-estonian.png)

That is it. Refresh a collection page on your storefront. The "Translation missing" text is gone, and the filter now reads something like "0 kuni 40".

## Clear the rest while you are there

If one key was missing, others may be too. The same screen fixes all of them.

Under **Default theme content**, any category can have empty boxes for your language. Those are the strings that will show "Translation missing" or fall back to English on your storefront. Go through the categories that matter to your shoppers, Products, Accessibility, and so on, and fill the blanks.

If your plan offers the **Auto-translate** button on that screen, it fills every empty box in the category in one click, then you tidy up anything that reads awkwardly. If you do not have that button, you fill them by hand, which is slower but perfectly reliable, and it never hits a limit.

A fast way to find what is still missing is to open your storefront in the affected language and look for any "Translation missing" text or any word still in English. Each one is a key in Default theme content waiting for a value.

## The categories most people need

To save you hunting, here are the theme content areas that most often need attention after adding a language.

**Fields** holds the price separator you just fixed, and little connector words like it.

**Accessibility** holds screen-reader labels and small controls. These rarely show on screen but they matter for shoppers using assistive tech, and search engines read them.

**Products** holds buttons and labels around the product and cart, "Add to cart", "Sold out", quantity labels.

**Actions** and **Content** hold general interface text used across sections.

You do not have to do all of them at once. Start with what a shopper actually sees, which is usually Products and Fields, then work outward.

## What to check if it still shows the error

If you saved a value and the storefront still shows "Translation missing", run through these.

You saved it for the wrong language. Check the language shown at the top of Translate & Adapt. It must match the language code in the error, the "et" part.

You are looking at the wrong theme. Translate & Adapt has a theme selector. If you have more than one theme, make sure you translated the theme that is actually live, or the one you are previewing.

The language is not published, or you are on a cached page. Confirm the language is published under Settings, Languages, then hard refresh the storefront, since browsers cache these pages.

The value did save but reads oddly. Some connector words differ by context. If "kuni" looks wrong to you as a native reader, a plain dash is a safe, neutral choice for a numeric range.

## Theme text, product content, app text: the three buckets

Most translation confusion comes from not knowing which of three places a piece of text lives in. Sorting them out saves a lot of clicking.

**Theme text** is the words the theme supplies. Buttons, labels, the price separator. You fix these in Translate & Adapt under Default theme content. This is where the separator lived.

**Your content** is your product names, descriptions, collection text, pages, and menus. You translate these in Translate & Adapt too, but under their own sections, Products, Collections, Pages, and so on, not under theme content.

**App text** is anything an app renders, like the filter names from Search & Discovery, or a reviews widget's labels. These are managed inside that app, or in its own translation area, not in the theme.

When something is in the wrong language, ask which bucket it belongs to first. It points you straight at the right screen and saves you translating the same word in three places hoping one sticks.

## The short version

"Translation missing: something" means a theme string has no value in the language it is asking for. It is not a bug. It just needs the value typed in.

Open Translate & Adapt for that language, go to Theme, Default theme content, find the field, type the word, and save. For the price filter separator specifically, it is under the Fields category, and the English value is "to".

I reproduced this on a Horizon store with Estonian, and adding the Separator value removed the "Translation missing: et.fields.separator" text from the price filter.


---

---
title: Shopify Transparent Header Overlapping the Slideshow
description: Your Shopify header menu prints on top of the first slide. That is the transparent header setting. How to turn it off on Prestige, and why the menu text stays white until you change the header color scheme, not CSS.
---

## The problem: your header menu sits on top of the slideshow

You open your Shopify homepage and the menu is printed straight over the first slide.

The links, the logo and the cart icon float on top of the image. On a busy photo they are almost impossible to read. White text vanishes into a light background. Dark text disappears into a dark one.

You want the menu to sit in its own bar, above the slideshow, not on it.

A merchant asked exactly this on the Shopify Community. They were on the Prestige theme. I reproduced it on a Prestige store and worked through the fix, plus the follow-up problem that trips most people up.

## Why it happens: the transparent header

This is a setting, not a bug.

Most premium themes ship a feature called a **transparent header**. When the first section on a page is a full-width image, slideshow or video, the header drops its background and floats over that image. The menu becomes see-through so the hero photo runs edge to edge behind it.

It looks great on the demo store, where the hero is a dark, evenly lit photo picked to make white menu text pop.

It looks bad the moment you swap in your own image. Your photo has light areas where the menu was meant to be white. Now the menu is unreadable.

So the header is not broken. It is doing exactly what the transparent-header setting tells it to. You just want that setting off.

## The fix on Prestige: turn off Allow transparent header

The setting lives on the **first section of the page**, not on the header.

That surprises people. They open the Header section looking for it, do not find it, and give up. It is attached to whatever section sits first, because that is the section the header floats over.

![The menu and logo print straight onto the first slide, so they are hard to read](/images/blog/shopify-transparent-header/01-header-overlapping-slideshow.jpeg)

Here are the steps.

**Step 1.** Go to **Online Store > Themes** and click **Customize**.

**Step 2.** In the left panel, click the **first section under Template**. On most stores that is the **Slideshow** or **Image banner**. Do not click the Header section.

![Click the first section under Template, which is the Slideshow](/images/blog/shopify-transparent-header/02-select-first-section.jpeg)

**Step 3.** In the section settings, turn off **Allow transparent header**. Then click **Save** at the top right.

![Turn off Allow transparent header, then Save](/images/blog/shopify-transparent-header/03-turn-off-allow-transparent-header.jpeg)

That is it. The menu now sits in its own solid bar above the slide.

![The menu now has its own bar above the slideshow](/images/blog/shopify-transparent-header/04-header-above-slideshow.jpeg)

## Two things that fix themselves, so do not touch them

People often start changing other settings after this. You do not need to.

**Your logo swaps back on its own.** Premium themes let you upload two logos: a normal one and a transparent-header version, usually a white one. The theme only uses the white logo while the header is see-through. Turn transparency off and it switches back to your normal logo automatically. There is no separate setting to flip.

**The slideshow does not get shorter.** A common worry is that adding a solid header bar will push the hero down or shrink it. It will not. These themes size the first section as full height minus the header height. Turn transparency off and the maths still works out. Your hero still fills exactly one screen.

## The follow-up catch: the menu text stays white

This is the part that sends people back to the forum.

You turn transparency off, the bar appears, and the menu text is still white on a white bar. You cannot read it. So you reach for CSS, or you dig through the general theme colour settings, and nothing moves.

Here is why. On Prestige, and on most premium themes, the menu colour does not come from CSS or from a single colour picker. It comes from the **colour scheme assigned to the header section**.

A colour scheme is a set: background, text, buttons and icons, all bundled together. The theme ships several. The header is pointing at one of them, and that scheme's text colour is white because it was built to sit on a dark hero.

CSS loses this fight because the theme sets the colour with high specificity from the scheme. Your rule gets overridden, or it changes the text but not the icons, and you end up with a half-fixed header.

### The fix: change the header's colour scheme

**Step 1.** In the theme editor, click the **Header** section.

**Step 2.** At the top of the panel is **Color scheme**, shown as a row of small swatches. Each swatch is a full scheme. The one with the outline is the one currently in use.

![The Header section Color scheme is what paints the menu, not CSS](/images/blog/shopify-transparent-header/05-header-color-scheme.jpeg)

**Step 3.** Click a **different swatch**, the one whose background matches your header (white) and whose text is the colour you want (dark). On a default Prestige that is normally the first, light, scheme. The menu, the icons and the logo all follow it.

**Step 4.** If none of the swatches fits, click **Edit scheme** and change **Body text** to your colour. Be careful here. A scheme is shared across the store, so every other section using it changes too. Picking a different swatch is the safer move than editing one.

![Edit scheme lets you set the exact Body text colour, but it is shared across sections](/images/blog/shopify-transparent-header/06-edit-scheme-body-text.jpeg)

One more place to check: the **announcement bar** above the header has its own colour scheme. If yours has a bar, set that separately or its text can go white too.

## Doing the same thing on other themes

The wording changes by theme, but the idea is identical: a per-section transparency toggle, and a colour scheme on the header.

- **Prestige, Impulse, Warehouse, Athens and most premium themes** call it **Allow transparent header** or **Transparent header**, on the first section.
- **Dawn and the free themes** mostly do not float the header at all, so if your menu overlaps an image on a free theme, look at the section itself rather than a transparency setting.
- **Debut** and other legacy themes put a **Transparent header** checkbox in the header settings instead of the section.

If you cannot find the toggle, the reliable tell is this: it lives wherever the theme decided the header should float. That is either the first section or the header. Check both.

## What to check if the menu is still hard to read

- **You changed the wrong section.** The transparency toggle is on the very first section on the page. If you have an announcement bar, a countdown timer or anything above the slideshow, the "first section" is still the first content section, but confirm you clicked the slideshow and not the header.
- **The preview looks unchanged.** The theme editor caches the preview. Save, then reload the editor, or open the storefront in a new tab. The change is usually already applied and just not repainted.
- **Only the text changed, not the icons.** You edited CSS instead of the scheme. Undo the CSS and change the header's colour scheme instead.
- **It is fine on the homepage but broken on another page.** Transparency is set per page, on that page's first section. Fix each page that shows the overlap. Collection, product and blog pages usually do not use a transparent header, so this is normally a one-page change.

## What if you actually want to keep the transparent header?

Some stores want the see-through look. It suits a dark, full-bleed hero.

If that is you, do not turn the setting off. Fix the readability instead.

- Leave **Allow transparent header** on.
- Change the **header colour scheme** so its text reads against your hero. On a dark photo, pick the scheme with white text. On a light photo, pick the dark one.
- Upload a **transparent-header logo** in a colour that shows on your image. The theme has a separate slot for it, right next to the normal logo.
- If the text sits over a busy part of the photo, add a subtle dark overlay to the slide. Most slideshow sections have an **overlay opacity** setting for exactly this.

That keeps the floating header and makes it legible, which is the look the feature was built for.

## How to turn the transparent header on, if you want it

The reverse question comes up just as often: the header is solid and someone wants it to float over the hero.

It is the same toggle. Open the **first section** on the page, find **Allow transparent header**, and turn it on. The header drops its background over that section. Then set the header colour scheme so the menu reads against the image, exactly as above.

If the toggle is missing, your first section is not a full-width media section. Transparency only applies over an image banner, slideshow or video. A rich-text or collection section first on the page will not offer it.

## Transparent header vs sticky header: not the same thing

These two settings get confused constantly, because both live near the top of the theme.

- A **transparent header** is about **colour**. It makes the header background see-through so a hero image shows behind it. This is the setting causing the overlap.
- A **sticky header** is about **position**. It keeps the header pinned to the top as you scroll. It has nothing to do with the overlap.

Turning off sticky will not fix an overlapping menu. Turning off transparency will. If you turned off the wrong one and saw no change, that is why.

## The short version

- The overlap is the **transparent header** feature. Turn off **Allow transparent header** on the first section, then Save.
- Your white logo and your slide height both correct themselves. Leave them alone.
- If the menu text stays white, change the **colour scheme on the Header section**, not CSS.
- The announcement bar has its own scheme. Set it separately.

I tested every step of this on a Prestige store before writing it.


---

---
title: Add Trust Badges Below a Shopify Product Description
description: A merchant wanted a "Guaranteed Safe Checkout" badge under the description on every product. Here is the one theme edit that does it for the whole store, no app, with the full code and screenshots.
---

## The problem

A merchant asked about this on the Shopify Community, and it is one of the most common storefront tweaks there is.

They had a payment and trust badge image, the familiar "Guaranteed SAFE Checkout" strip with Visa, Mastercard, American Express, Stripe and a secure-checkout row. They wanted it to appear right below the description text on their product pages. Not on one product. On every product in the store.

Their instinct was to bulk edit the descriptions. In their words, they asked how to "bulk edit listing descriptions adding this image" so it shows below the description text for all listings.

That instinct is understandable, but it is the hard way. You do not have to touch a single product.

I reproduced the whole thing on a test store running Supply, the same theme the merchant uses. One small edit put the badge below the description on every product at once.

![The Guaranteed Safe Checkout trust badge showing below the product description on a Shopify product page](/images/blog/shopify-trust-badges-below-description/04-badge-below-description.png)

## Why one edit beats editing every product

This is the part worth understanding, because it changes how you approach the job.

Your product pages are not built from each product's description alone. They are built from a theme file, a template that every product runs through. The description is one line in that template. Shopify drops each product's own text into that line when the page loads.

So there are two places you could add an image.

You could paste the image into each product's description. That is what "bulk edit descriptions" means. The image gets baked into every product's saved text. Change your mind later and you are editing hundreds of products again. Delete a product and you lose that copy of the image reference.

Or you could add the image once, in the template, right after the description line. Every product then shows it, because every product runs through the same template. Change it later in one place. Remove it in one place.

The second way is cleaner, faster, and free. That is the method below.

## The theme edit, step by step

I will use Supply as the example because that is what the merchant runs. The idea is identical on Debut and other older Shopify themes, and very close on newer ones. The only thing that changes between themes is the exact file name, and I will show you how to find it if yours differs.

### Step 1. Upload your badge image and copy its link

First your image needs a web address that Shopify can load.

Go to your Shopify admin. Open **Content**, then **Files**, then **Upload files**, and add your badge image.

Once it is uploaded, click the image to open it, and use **Copy link**. Keep that link somewhere handy. You will paste it into the code in a moment.

![The Shopify Files page with the trust badge image uploaded, ready to copy its link](/images/blog/shopify-trust-badges-below-description/01-upload-badge-to-files.png)

A tip on the image itself. Use a PNG or WebP with a transparent or white background so it sits cleanly on the page. Keep it a sensible width. The code below scales it to fit, but a huge file still slows the page down, so export it at roughly the width it will display.

### Step 2. Open the product template in the code editor

Now open the file that builds every product page.

Go to **Online Store**, then **Themes**. Next to your live theme, click the **...** menu, then **Edit code**.

In the left sidebar, open the **sections** folder, and click **product-template.liquid**.

![The Shopify code editor with the sections folder open and product-template.liquid selected](/images/blog/shopify-trust-badges-below-description/02-edit-product-template.png)

If your theme does not have a file with that exact name, do not worry. Use the search box in the code editor and search for `product.description`. The file that contains it is the one you want. That is the line that prints your description on the page.

### Step 3. Paste the image tag right after the description

Find this line in the file:

```liquid
{{ product.description }}
```

It sits inside a small block, something like this:

```liquid
<div class="product-description rte">
  {{ product.description }}
</div>
```

Right after that block's closing `</div>`, paste this:

```liquid
<img
  src="PASTE-YOUR-IMAGE-LINK-HERE"
  alt="Guaranteed safe checkout"
  style="display:block; max-width:100%; height:auto; margin:20px auto 0;">
```

Replace `PASTE-YOUR-IMAGE-LINK-HERE` with the link you copied in Step 1. Then click **Save**.

![The image tag pasted right after the product description line in the theme code](/images/blog/shopify-trust-badges-below-description/03-paste-image-tag.png)

That is the whole edit. The `max-width:100%` keeps the badge from overflowing on phones. The `margin:20px auto 0` gives it a little breathing room above and centres it.

### Step 4. Check a product page

Open any product on your storefront. The badge now sits directly below the description, above your share buttons, exactly where the merchant wanted it. And it is on every product, because they all share this template.

If you ever want to move it, change it, or remove it, you come back to this one line. You never touch the products themselves.

## Prefer not to edit code? Use a trust badge app

Editing a theme file is safe if you follow the steps, but plenty of merchants would rather not. That is fair.

A trust badge app does the same job with no code. You install it, upload or pick your badges, and choose where they appear, usually below the add-to-cart button or below the description. Popular free options include **Trust Badges Bear**, **Avada Trust Badges**, and **Iconic**. Each has a free tier that covers this exact use case.

The trade-off is the usual one. An app is easier to set up and gives you a settings screen. A theme edit is free forever, adds nothing to your page weight, and never expires with a subscription. For a single static image, the theme edit is hard to beat. For a merchant who wants drag-and-drop placement and a library of badge designs, the app earns its place.

## What about actually bulk editing the descriptions?

If you genuinely want the image inside each description, for example so it travels with the product if you export it, you can do that too. It is just more work to maintain.

You have two routes. A bulk product editor app such as **Hextom Bulk Product Edit** or **Ablestar** can append an `<img>` tag to the Body (HTML) of every product at once. Or you can export your products to CSV, add the image tag to the Body (HTML) column in a spreadsheet, and re-import.

Both work. Both bake the image into every product's saved text, which is exactly the maintenance cost the theme edit avoids. I would only go this route if you specifically need the image to live inside the description itself.

## Where should a trust badge actually go?

A quick note on placement, since it affects how well the badge works.

Trust badges do their job at the moment of hesitation, which is right around the buy button. Below the description is a solid spot, because a shopper who has read the details is close to deciding. Directly under the add-to-cart button is the other strong position.

Avoid burying it in the footer. A trust badge in the footer is barely seen by a shopper who is mid-purchase. The point is to reassure the shopper while their eyes are on the price and the button, not after they have scrolled past everything.

You can place the same image in more than one spot. Some stores show a compact secure-payment line under the button and the fuller badge strip below the description. Just do not overdo it. Two well-placed badges reassure. Six make a page look desperate.

## Do trust badges actually help conversions?

Honest answer: they help when they are believable, and they can hurt when they are not.

A clean payment-method row and a genuine secure-checkout note reassure shoppers who are new to your store. That is real. Shoppers who do not recognise your brand look for signals that their card details are safe, and seeing the card logos plus a lock icon is one of those signals.

Where they backfire is when they overpromise. A giant flashing "100% GUARANTEED" starburst next to five different badges reads as a red flag, not a green one. Keep it calm and factual. Your badge is there to remove a small doubt, not to shout.

The image the merchant used is a good example of the right tone. Card logos, a Stripe mark, a Shopify secure mark, and a plain row of delivery and privacy icons. Factual, not loud.

## What to check if the badge does not show

If you saved the edit and the badge is not there, run through these.

The image link is wrong or private. Open the link you pasted in a new browser tab. If it does not load the image on its own, the `src` is wrong. Re-copy it from Content, Files.

You edited the wrong file. If your theme prints the description from a different file, editing product-template.liquid does nothing. Search the code editor for `product.description` and edit whichever file actually contains it.

You are looking at a different theme. If you have more than one theme, make sure you edited the one that is published, or preview the theme you edited.

Nothing shows and the layout looks broken. You may have pasted inside the wrong tag or removed a bracket. Undo with the code editor's version history, which keeps older saves, and paste again, carefully this time, after the description block's closing `</div>`.

## The short version

You do not bulk edit descriptions to put one image on every product page. You add the image once to the product template, right after the `{{ product.description }}` line, and every product shows it.

Upload the image to Content, Files, copy its link, open sections, product-template.liquid, paste an `<img>` tag after the description block, and save. One edit, every product, and it is free.

I tested every step of this on a Supply store before writing it, and the badge rendered below the description on each product page.


---

---
title: How to Build a 3-Column Product Page in Dawn
description: Dawn gives you media on one side and everything else on the other. Here is how to split the info column in two so the buy box sits on the right, tested on a Dawn store.
---

## The problem: Dawn only gives you two columns

Dawn's product page is media on one side, everything else on the other. Title, price, description, variant picker, quantity, buy buttons and accordions all stack in a single column.

On a long product page that column gets tall. The description pushes the Add to cart button down, and on a wide monitor you end up with a lot of empty space beside a narrow strip of text.

What plenty of stores want instead is **three columns**: product information on the left, media in the middle, and the buy box on the right. Title and description on one side, the thing the customer came to click on the other, images between them.

There is no setting for this. Dawn's media position options are left and right, and that is the extent of it.

![The finished three-column product page: information, media, then the buy box](/images/blog/shopify-two-column-product-page/01-before-after.jpeg)

I built it on a Dawn test store. It needs a Liquid change and a CSS change, and the Liquid change is more interesting than it first looks.

## Why you cannot do this with CSS alone

The tempting approach is to leave the markup alone and rearrange with flexbox `order`. It does not work, and the reason is structural.

Dawn renders **one** `<section class="product__info-container">` and loops every block into it:

```liquid
{%- for block in section.blocks -%}
  {%- case block.type -%}
    {# ... every block type rendered here ... #}
  {%- endcase -%}
{%- endfor -%}
```

All the blocks are siblings inside one container. CSS `order` can rearrange siblings within a flex container, but it cannot take half of them and move them into a **different column** on the other side of the media. They are in the same box, and the media is not in that box at all.

So the markup has to change. You need two info containers, with the blocks split between them.

That means duplicating the entire `case` statement, once per column, unless you factor it out first. Factoring it out is the better move and it is where this starts.

## Step 1: extract the block renderer into a snippet

**Duplicate your theme before touching anything.** `Online Store > Themes > ... > Duplicate`.

Create a new file, `snippets/product-info-block.liquid`.

Cut the entire `{%- case block.type -%} ... {%- endcase -%}` body out of `sections/main-product.liquid`, the part starting right after `{%- for block in section.blocks -%}`, and paste it in, wrapped like this:

```liquid
{% comment %}
  Renders a single main-product info block by type.
  Accepts:
  - block: {Object}
  - product: {Object}
  - product_form_id: {String}
{% endcomment %}
{%- case block.type -%}
  {# ...paste the original case/when block here, unchanged... #}
{%- endcase -%}
```

Do not modify the case body. Move it verbatim. It is several hundred lines handling every block type Dawn supports, and the goal here is purely to make it callable from two places.

The `{% comment %}` header documenting what the snippet accepts is Dawn's own convention. Worth keeping, because in six months the three variables this snippet depends on will not be obvious.

One thing to know: `{% render %}` gives the snippet an **isolated scope**. It cannot see variables from the parent template unless you pass them in explicitly. That is why `block`, `product` and `product_form_id` are all passed on every call. Miss one and that block type renders empty rather than erroring rather than erroring, which is a confusing failure to debug.

## Step 2: split the loop into two columns

In `sections/main-product.liquid`, replace the markup between `<div class="product product--...">` and its closing `</div>` with this:

```liquid
<div class="product product--{{ section.settings.media_size }} product--{{ section.settings.media_position }} product--{{ section.settings.gallery_layout }} product--mobile-{{ section.settings.mobile_thumbnails }} product--3col-desktop grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
  {%- assign product_form_id = 'product-form-' | append: section.id -%}
  {%- assign right_col_block_types = 'variant_picker,quantity_selector,buy_buttons' | split: ',' -%}

  <div class="product__info-wrapper product__info-wrapper--left grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    <section class="product__info-container">
      {%- for block in section.blocks -%}
        {%- unless right_col_block_types contains block.type -%}
          {%- render 'product-info-block', block: block, product: product, product_form_id: product_form_id -%}
        {%- endunless -%}
      {%- endfor -%}
    </section>
  </div>

  <div class="grid__item product__media-wrapper">
    {% render 'product-media-gallery', variant_images: variant_images %}
  </div>

  <div class="product__info-wrapper product__info-wrapper--right grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    <section
      id="ProductInfo-{{ section.id }}"
      class="product__info-container{% if section.settings.enable_sticky_info %} product__column-sticky{% endif %}"
    >
      {%- for block in section.blocks -%}
        {%- if right_col_block_types contains block.type -%}
          {%- render 'product-info-block', block: block, product: product, product_form_id: product_form_id -%}
        {%- endif -%}
      {%- endfor -%}
      <a href="{{ product.url }}" class="link product__view-details animate-arrow">
        {{ 'products.product.view_full_details' | t }}
        {{- 'icon-arrow.svg' | inline_asset_content -}}
      </a>
    </section>
  </div>
</div>
```

Everything else in the file, the media modal, popups and structured data, stays as it is.

### What is going on here

**`right_col_block_types`** is the whole configuration. One line decides which blocks form the buy box:

```liquid
{%- assign right_col_block_types = 'variant_picker,quantity_selector,buy_buttons' | split: ',' -%}
```

Want the price on the right too? Add `price`. Want the description on the right? Add `description`. The two loops read from this list, so changing it is the only edit needed to move a block between columns.

**Two loops over the same blocks**, one with `unless ... contains`, one with `if ... contains`. Every block lands in exactly one column, and any block type you have not thought about defaults to the left, which is the safe direction.

**`ProductInfo-{{ section.id }}`** stays on the right column. Dawn's JavaScript uses that id to find the variant picker and update the form. Put it on the wrong column and variant switching stops working with no error.

**`product--3col-desktop`** is a new class added purely as a CSS hook, so the stylesheet can target this layout without affecting anything else.

## Step 3: the CSS

Append to `assets/section-main-product.css`:

```css
/* 3-column desktop product layout: info | media | buy box */
/* Selectors go 4 class-selectors deep so they reliably beat Dawn's own
   .product--large:not(.product--no-media) rules (3 class-selectors, since
   :not() counts its argument toward specificity). */
@media screen and (max-width: 989px) {
  .product--3col-desktop.product .product__media-wrapper,
  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--left,
  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--right {
    max-width: 100%;
    width: 100%;
  }
}

@media screen and (min-width: 990px) {
  .product--3col-desktop.product .product__media-wrapper,
  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--left,
  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--right {
    max-width: none;
  }

  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--left {
    width: calc(28% - var(--grid-desktop-horizontal-spacing) / 2);
    order: 1;
    padding: 0 4rem 0 0;
  }

  .product--3col-desktop.product .product__media-wrapper {
    width: calc(38% - var(--grid-desktop-horizontal-spacing));
    order: 2;
  }

  .product--3col-desktop.product .product__info-wrapper.product__info-wrapper--right {
    width: calc(34% - var(--grid-desktop-horizontal-spacing) / 2);
    order: 3;
    padding: 0 0 0 4rem;
  }
}
```

Change `28% / 38% / 34%` to adjust the column widths. They should total 100%.

### The specificity note is the important part

Those selectors are deliberately four class-selectors deep, and the comment in the code explains why.

Dawn styles its product columns with rules like `.product--large:not(.product--no-media) .product__media-wrapper`. That is three class-selectors, because **`:not()` contributes its argument's specificity**. A rule written with two or three of your own classes ties or loses, and CSS breaks ties by source order, which depends on stylesheet load order rather than anything you control.

Writing the override one level deeper than the rule you are beating removes the ambiguity. It is more robust than `!important`, which wins now and makes every future change harder.

The `--grid-desktop-horizontal-spacing` variable is Dawn's own gutter. Subtracting it from each width keeps the columns aligned with the rest of the grid instead of overflowing by the gap amount.

## Making the buy box sticky

A three-column layout creates an obvious opportunity. The buy box is now a narrow column of its own, so it can follow the customer down a long page instead of scrolling away.

Dawn already has the machinery. The right column picks up `product__column-sticky` when **Enable sticky info** is ticked in the section settings, and that class does the work.

Tick it in the theme editor, on the Product information section. No code needed, because the markup above already carries the class through.

Two things to watch. A sticky column that is taller than the viewport will not stick usefully, since there is nothing left to scroll past, so keep the buy box to the essentials. And a sticky element that overlaps a sticky header is a common annoyance; if that happens, Dawn's sticky offset is driven by the header height, so check your header is not set to a mode the calculation does not account for.

## Using it on only some products

The layout above applies to every product using that template, because it is baked into `main-product.liquid`.

If you want it on a subset, duplicate the template instead of editing the shared one. In the theme editor, use **Create template** from the product template dropdown, name it something like `product.three-column`, then assign it per product from the product page in the admin under Theme template.

That gives you two templates using the same snippet, which is another reason extracting `product-info-block.liquid` in step 1 pays off. Both templates render blocks through the same file, so a fix to a block type applies to both.

The alternative, wrapping the whole layout in a Liquid condition on a product tag, works but leaves you maintaining two layouts in one file. Templates are the cleaner separation.

## Testing it before you publish

Work through this on the preview URL rather than the live theme.

**Switch variants.** The single most likely thing to break, because the JavaScript depends on `ProductInfo-{{ section.id }}` being present. Change size or colour and confirm the price, availability and image all update.

**Add to cart.** Confirm the item lands in the cart with the right variant, not just the default.

**A product with no media.** The `product--no-media` class path still needs to render sensibly. An empty middle column is a real possibility here.

**A product with one image versus twenty.** Gallery layout changes with count on Dawn.

**A sold-out variant.** The buy button state is rendered by a block that now lives in a different column.

**Reorder blocks in the theme editor.** Blocks are still draggable, and dragging one between the categories in `right_col_block_types` should move it between columns. If it does not, the list and the block types have drifted apart.

**A long description and a one-line description.** The column heights differ wildly, and that is where an unbalanced layout shows up.

## What happens on mobile

Below 990px all three wrappers go full width and stack, so you get a single column again, which is what you want on a phone.

There is one consequence worth stating plainly: on mobile and tablet the **buy box blocks render after the description and accordions**, because they are later in the source order.

For a short description that is fine. For a long one, the Add to cart button ends up a long scroll down, which is worse than stock Dawn on the device where most of your traffic probably is.

If that matters, add an `order` to the mobile block as well to lift the right column above the left, or keep descriptions in a collapsible accordion so they do not push the buy box down. Test on an actual phone before shipping, not just a narrow browser window.

## What I confirmed on the test store

- Dawn renders **one info container**, which is why CSS `order` alone cannot produce this layout.
- Extracting the case body into `snippets/product-info-block.liquid` let **both loops render the same block types** without duplicating several hundred lines.
- Keeping `ProductInfo-{{ section.id }}` on the buy box column kept **variant switching working**.
- Four-class-deep selectors beat Dawn's `:not()` rules **without `!important`**.
- Below 990px the layout **stacks to one column**, with the buy box after the description.

The takeaway: the hard part is not the CSS, it is that Dawn's blocks live in one loop. Once you extract the renderer into a snippet, you can call it from as many columns as you like, and the layout becomes a one-line list of which blocks go where.


---

---
title: "Shopify URL Structure: Why /pages/ and /collections/ Appear"
description: Shopify puts /pages/, /collections/ and /products/ in every link, and you cannot turn that off. Here is what you can change - a short /support link, a tidy /collections page and shorter handles - tested on a Dawn store.
---

## The problem

You build a Support page, open it on your live store, and the address bar reads `yourstore.com/pages/support`. You expected `yourstore.com/support`.

The same thing happens across the site. Collections sit under `/collections/`, products under `/products/`, blog posts under `/blogs/`. A merchant asked about exactly this on the Shopify Community. They added one more worry: if a shopper typed `yourstore.com/collections` by hand, they would land on a page full of collection images the merchant never meant to show.

Both parts have a fix. The word in the middle of the link stays, but you can make the short link work, and you can decide what the `/collections` page shows.

![Before: the /collections page on a Dawn store listing every collection, including Documents and Home page](/images/blog/shopify-url-structure/01-before-collections-page.png)

![After: the same /collections page showing only Football, Legends and Franchise A Kit](/images/blog/shopify-url-structure/02-after-collections-page.png)

## How the Shopify URL structure works

Every Shopify store uses the same fixed layout for its web addresses. The first part after your domain says what kind of content it is. The second part is the **handle**, which is the short name Shopify uses in the web address for that one item.

| What you created | Where it lives |
| --- | --- |
| A page (Online Store > Pages) | `/pages/<handle>` |
| A collection | `/collections/<handle>` |
| A product | `/products/<handle>` |
| A blog and its posts | `/blogs/<blog>/<post>` |
| The list of every collection | `/collections` |
| Every product in one list | `/collections/all` |

On my test store the Support page answered at `/pages/support`, the default blog at `/blogs/news`, and both `/collections` and `/collections/all` loaded without me creating anything. Those last two are built in. Every Shopify store has them.

The first part of each address is fixed. There is no setting in the admin, the theme editor or the theme code that removes `/pages/` or `/collections/`. The part you control is the handle, and whether a short address forwards to the long one.

## Can you remove /pages/ from a Shopify URL?

No. Shopify reads that first part to know what to load, so it has to be there. Themes cannot change it either, because the theme is only asked to draw the page after Shopify has already decided which page it is.

What you can do instead:

- **Make a short address forward to the real one.** `yourstore.com/support` opens `yourstore.com/pages/support`. This is a URL redirect, covered in the next section.
- **Shorten the handle.** A page called "Customer Support and Returns" gets a long handle by default. You can cut it to `support` or `help`.
- **Control the built-in pages.** The `/collections` list page can show only what you choose.

For most stores the redirect is what they were after. A shopper can type the short address, and your printed flyers, emails and social bios can use it too.

## Make yourstore.com/support work with a URL redirect

A URL redirect tells Shopify: when someone asks for this address, send them to that one instead. It takes about a minute.

1. In your Shopify admin, go to **Content** > **Menus**.
2. Click **URL redirects** in the top-right corner.

![Shopify admin Menus page with Content and Menus highlighted in the left sidebar and the URL redirects button highlighted top right](/images/blog/shopify-url-structure/03-menus-url-redirects.png)

3. Click **Create URL redirect**.

![The URL redirects page with the Create URL redirect button highlighted](/images/blog/shopify-url-structure/04-create-url-redirect.png)

4. Type `/support` in **Redirect from** and `/pages/support` in **Redirect to**.
5. Click **Save redirect**.

![The URL redirect form with /support in Redirect from, /pages/support in Redirect to and the Save redirect button highlighted](/images/blog/shopify-url-structure/05-redirect-form.png)

On my test store, `/support` returned a 301 status straight to `/pages/support` as soon as the redirect was saved. A 301 is a permanent redirect. It tells browsers and Google that the page has one real address, so the short link does not create a duplicate page.

Type only the part after your domain, starting with a `/`. The form's own example, `/shop/shoes`, shows the format.

## Why you cannot redirect /collections to your home page

The obvious next move is a second redirect: send `/collections` to your home page, so shoppers never see that list.

I tried it. The admin accepted a redirect from `/collections` to `/` with no error. But `/collections` kept loading the collections page with a normal 200 status, and the redirect never ran.

Shopify only uses a redirect when the address it starts from does not exist. `/support` did not exist before, so the redirect ran. `/collections` is a built-in page that always exists, so Shopify shows the page and skips the redirect. The same applies to any page, product or collection you have created: a redirect from its address is saved but has no effect while the item is still there.

So for `/collections`, the answer is to change what the page shows rather than to hide it.

## Clean up the /collections page in the theme editor

The `/collections` page uses a template called **Collections list**. A template is the layout Shopify uses for one type of page. By default it shows every collection your store has published, including ones you made only to feed a home page slider or an automated rule.

You can switch off that automatic list and pick the collections yourself. These steps are for Dawn, the free theme Shopify installs by default. Most free Shopify themes have the same template and sections.

1. Go to **Online Store**.
2. Click **Edit theme** on your current theme.

![Shopify admin Online Store themes page with Online Store highlighted in the sidebar and the Edit theme button highlighted](/images/blog/shopify-url-structure/06-online-store-edit-theme.png)

3. At the top of the theme editor, click **Home page** and choose **Collections list**.

![The theme editor template menu opened from Home page, with Collections list highlighted](/images/blog/shopify-url-structure/07-pick-collections-list.png)

4. In the left sidebar, hover over **Collections list page** and click the eye icon. This hides the automatic list. The page is still there, it is just empty until you add something.

![The Collections list template in the theme editor, with the eye icon next to Collections list page highlighted](/images/blog/shopify-url-structure/08-hide-collections-list-page.png)

5. Click **Add section** under it, search for "Collection", and choose **Collection list**.

![The Add section search showing Collection list and Featured collection, with Collection list highlighted](/images/blog/shopify-url-structure/09-add-collection-list.png)

6. The new section arrives with three empty **Collection** blocks. Click the first one, then click **Select**.

![A Collection block's settings in the sidebar with the Select button highlighted](/images/blog/shopify-url-structure/10-collection-block-select.png)

7. Pick the collection you want to show. Repeat for the other blocks. Use **Add Collection** if you want more than three.

![The collection picker listing the store's collections, with Football highlighted](/images/blog/shopify-url-structure/11-pick-a-collection.png)

8. Click **Save**.

![The theme editor with three picked collections in the preview and the Save button highlighted](/images/blog/shopify-url-structure/12-save.png)

On my test store the `/collections` page went from seven collections, including placeholder ones called "Home page" and "Documents", down to the three I picked, in the order I picked them.

You can also give the section a heading, change the number of columns, or add other sections above it, such as a short intro. Anyone who types `/collections` then lands on a page you designed.

## Shorten a page's handle

The handle is the last part of the address. Shopify builds it from the page title when you first save the page, so "Customer Support and Returns" becomes `customer-support-and-returns`. You can change it.

1. Go to **Online Store** > **Pages** and open the page.
2. Scroll to **Search engine listing** and click the pencil icon.

![A Shopify page editor with the Search engine listing card and its pencil icon highlighted](/images/blog/shopify-url-structure/13-search-engine-listing.png)

3. Change the **URL handle**. The `pages/` part is greyed out, because it cannot be changed.
4. Leave **Create a URL redirect** ticked. Shopify ticks it for you, so the old address keeps working.
5. Click **Save**.

![The URL handle field changed from support to help, with the Create a URL redirect for support to help checkbox ticked](/images/blog/shopify-url-structure/14-url-handle-redirect.png)


## Does the /pages/ part hurt SEO?

Every Shopify store has the same `/pages/`, `/collections/` and `/products/` structure, so it does not set your store apart from any other Shopify store in search results.

What matters more for search is the part you control:

- **Clear handles.** `/pages/shipping-policy` tells a reader and a search engine more than `/pages/page-2`.
- **One address per page.** Use a 301 redirect for any short link, as above, rather than making a copy of the page.
- **No broken links.** If you change a handle, make sure the old address redirects to the new one.

## If the redirect does not work

- **The short address already exists.** A redirect only runs when its starting address has nothing on it. If you once made a page with the handle `support`, the redirect from `/support` is fine, but a redirect from `/pages/support` would be ignored while that page exists.
- **You typed the full web address in Redirect from.** Use only the part after your domain, starting with `/`.
- **You are testing in a preview.** A theme preview link carries extra text in the address. The redirect still runs, but it drops that extra text, so you land on your live theme. Test on your normal storefront address.

## Related questions

**Can I change /collections/ to /shop/?** No. The first part of the address is fixed. If you want a short link for your catalogue, see [how to make an Instagram bio link land on your products](/blog/shopify-instagram-bio-link), which covers the addresses Shopify keeps for itself.

**What is /collections/all?** A built-in collection that lists every product in your store. It exists even if you never created it.

**Will changing a handle break old links?** Not if you leave **Create a URL redirect** ticked when you change it. Shopify then points the old address at the new one.


---

---
title: How to Put Your Shopify Store in Vacation Mode
description: Pause sales while you are away without losing your store. The ways to put a Shopify store into vacation mode and what each one does.
---

## The problem

A merchant asked about this on the Shopify Community. She runs a one-person store and sells shungite jewelry, apothecary products, and supplements. She wanted a Shopify vacation mode.

Her ask was simple. She needs to step away for a week. She does not want to close the store. She wants people to keep browsing products and reading the blog. She just does not want new orders landing while she is gone.

Etsy has a built-in vacation mode. Shopify does not. There is no single switch in the admin that says "I am away, pause my sales." So merchants go looking for a workaround, and most of the advice online is either wrong or too heavy.

I reproduced her exact setup on a test store on the Dawn theme. Then I built a free vacation mode that turns on and off in seconds. This post walks through it, plus the other options and what each one really does.

The main search terms people use for this are "shopify vacation mode," "how to put shopify on vacation mode," and "shopify store vacation mode." They all mean the same thing: pause selling for a short break without deleting or closing anything.

## Why it happens

Shopify was built as an always-on selling platform. The whole system assumes your store is open for business. So there is no native "holiday mode" toggle the way a marketplace like Etsy has one.

The closest official feature is the **Pause and Build** plan. It is a cheaper plan that keeps your store online but switches off checkout. The catch is that it is a full plan change. It follows your billing cycle, not your calendar. The merchant who asked about this had tried it two years ago and called it a disaster for a short break.

So there is a real gap. Shopify gives you two extremes:

- Keep the store fully open and take orders.
- Change your whole plan to shut checkout down.

There is nothing in between for a quick one-week pause. That is why people search for a Shopify pause store trick instead of a setting. The good news is you can build the in-between yourself, and it is not hard.

## What "vacation mode" should actually do

Before the fix, it helps to define the goal. A useful vacation mode does three things:

- The store stays online and browsable. Products, collections, and blog posts all still load.
- No new orders can be placed. Add to cart, Buy it now, and the cart are all removed.
- A friendly banner tells visitors you are away and when you will be back.

You want to flip this on when you leave and off when you return. No plan change. No billing surprise. No app fee. That is the target.

## The fix: a free vacation mode you control

This is the method I tested. It works on Dawn and on most themes built like Dawn. It hides every buy button and the cart, and it shows a "back soon" banner across the top. You turn it on and off yourself by changing one word.

Here is a normal Dawn product page first, so you can see what changes. The cart icon, Add to cart, and Buy it now all work as usual.

![Normal Shopify Dawn product page with a working cart icon, Add to cart button, and Buy it now button](/images/blog/shopify-vacation-mode/01-normal-store-buy-buttons.png)

**Step 1. Open your theme code.**

Go to **Online Store > Themes** in your admin. On your live theme, click the **... (three dots)** button, then **Edit code**. This opens the theme's files. It does not touch anything customers see yet.

**Step 2. Find the layout file.**

In the file list, open **layout/theme.liquid**. This is the wrapper that loads on every page of your store. Scroll to the very bottom and find the `</body>` tag. That tag marks the end of the page body.

**Step 3. Paste the vacation block.**

Paste this block just above `</body>`, then Save.

```liquid
{%- comment -%} ===== VACATION MODE ===== turn on/off by changing false to true below {%- endcomment -%}
{%- assign vacation_mode = false -%}
{%- assign vacation_banner = "We're away and back on Monday, August 18. Browse freely - ordering is paused until we return." -%}
{%- if vacation_mode -%}
  <div class="vacation-banner" role="status">{{ vacation_banner }}</div>
  <style>
    .product-form__buttons,
    .product-form__submit,
    .shopify-payment-button,
    .quick-add,
    .quick-add-modal,
    #cart-icon-bubble,
    .cart-count-bubble,
    cart-drawer,
    #cart-notification,
    .cart-notification-wrapper,
    .cart__ctas,
    .cart__dynamic-checkout-buttons,
    [name="checkout"] { display: none !important; }
    .vacation-banner {
      background: #1f2d3d; color: #fff; text-align: center;
      padding: 12px 16px; font-size: 15px; line-height: 1.45;
    }
  </style>
  <script>document.body.insertAdjacentElement('afterbegin', document.querySelector('.vacation-banner'));</script>
{%- endif -%}
```

Here is what that looks like in the code editor. The word `false` on the `vacation_mode` line is the switch. The line below it holds your banner message and return date.

![The vacation mode block pasted into theme.liquid in the Shopify code editor, with the true and false switch highlighted](/images/blog/shopify-vacation-mode/02-paste-vacation-block-theme-liquid.png)

A quick plain-English read of the block. The `assign` line sets the switch to `false`, which means "off." The `if` line says: only show the banner and hide the buttons when the switch is on. The `style` block hides the buy buttons and the cart. The banner is a single strip of text at the top of the page.

**Step 4. When you leave, turn it on.**

Open that block again. Change `false` to `true`. Put your real return date in the message line. Save. That is it. The store is now browse-only.

Here is the same product page with vacation mode on. The banner shows your message. Add to cart, Buy it now, and the cart icon are all gone.

![Shopify store in vacation mode with a back soon banner at the top and the buy buttons hidden](/images/blog/shopify-vacation-mode/03-vacation-mode-on-banner.png)

**Step 5. When you return, turn it off.**

Change `true` back to `false`. Save. Everything comes back to normal at once.

I tested this on a Dawn store. The buy buttons and the cart disappeared the moment I set the switch to `true`. They all came back when I set it to `false`. Customers could still browse every product and read the blog the whole time. Nothing was deleted and no plan changed.

One honest caveat. This hides the buy controls with styling. A very determined visitor could still reach a checkout URL by hand. For a normal one-week break that is fine. If you need a hard stop where no order can ever go through, use the Pause and Build plan instead, which is covered below.

## An alternative: a one-click checkbox in the customizer

Editing code every trip is fine, but some people would rather flick a switch in the visual editor. You can turn the same fix into a checkbox under **Theme settings**. Then you never touch code again.

Two small edits do it.

First, in **Edit code**, open **config/settings_schema.json**. Scroll to the very bottom, and just before the final `]`, paste this. Keep the leading comma.

```json
,
{
  "name": "Vacation mode",
  "settings": [
    { "type": "checkbox", "id": "vacation_mode", "label": "Vacation mode (browse-only)", "default": false },
    { "type": "text", "id": "vacation_banner", "label": "Banner message", "default": "We're away and back soon - ordering is paused until we return." }
  ]
}
```

Second, go back to the block you pasted in theme.liquid. Delete the two `assign` lines. Change `{%- if vacation_mode -%}` to `{%- if settings.vacation_mode -%}`. Change `{{ vacation_banner }}` to `{{ settings.vacation_banner }}`. Save.

Now open **Customize > Theme settings > Vacation mode**. Tick the box to pause the store. Untick it to reopen. You can edit the banner text right there too. No code editing after that.

![Shopify theme customizer showing the Vacation mode checkbox and banner message field](/images/blog/shopify-vacation-mode/04-vacation-mode-checkbox-customizer.png)

This is the version I would set up for anyone who takes breaks often. It puts a real vacation mode switch in the admin, which is the thing Shopify does not give you out of the box.

## Should I use the Shopify Pause and Build plan instead?

Pause and Build is Shopify's official low-cost plan. It costs about \$9 a month. Your store stays online, but checkout is switched off, and you cannot use most admin features.

It works, but it is heavy for a short break. Here is why the merchant on the thread said it did not fit:

- It is a full plan change, not a toggle. You switch plans to go on and switch back to come off.
- It is tied to your billing cycle, not your vacation week. Turning it on for a week does not line up with how billing works.
- She had tried it before and called it a disaster for a one-week pause.

So Pause and Build is the right tool for a long, indefinite break, like pausing a seasonal business for several months. It is the wrong tool for a week off. For that, the free code method above is faster and reversible in seconds.

## How do I put my Shopify store on vacation without changing my plan?

Use the theme method in this post. It never touches your plan or your bill.

The short version:

- Add the vacation block to theme.liquid once.
- Flip the switch on when you leave.
- Flip it off when you return.

Your plan stays the same. Your billing stays the same. Your store stays online and searchable the entire time. This is the cleanest way to get a Shopify holiday mode without paying for anything.

## Can customers still browse my store in vacation mode?

Yes, and that is the point. This method only hides the buying controls. It does not take the store offline.

While vacation mode is on:

- Every product page still loads.
- Collections and search still work.
- Blog posts still open and read normally.
- The banner tells visitors you are away and when you will be back.

Only Add to cart, Buy it now, and the cart are hidden. So you keep your traffic, your SEO, and your storefront. You just stop taking orders for a while.

## Is this different from putting my store password page up?

Yes, and this trips a lot of people up. They are two different things.

A **password page** hides the whole storefront behind a login screen. Visitors see a single locked page and nothing else. No products, no blog, no browsing. That is a full lockout, not a vacation mode.

**Vacation mode**, the way this post builds it, keeps the store open and browsable and only removes the buy buttons. People can still look around, read, and remember you when you get back.

Use the password page when you want the store fully hidden, like before launch. Use vacation mode when you want the store visible but paused for orders. Most people asking about a Shopify pause store want the second one.

## If it did not work

A few things to check if the buttons did not hide.

- **Nothing changed at all.** Make sure the switch is set to `true` and that you clicked Save. On the customizer version, make sure the box is ticked.
- **The block landed in the wrong spot.** It has to be inside layout/theme.liquid, just above `</body>`. If you pasted it into a different file it will not run.
- **Your theme is not Dawn.** The button class names come from Dawn and Dawn-style themes. On a very different theme, one or two buy buttons might not use the same class, so they could stay visible. If that happens, right-click the leftover button, choose Inspect, read its class name, and add that class to the list inside the style block.
- **A checkout link is still reachable.** Remember this is a soft pause. It removes the buttons, not the checkout route itself. For a hard block on all orders, use Pause and Build.

## Definitions people confuse

**Vacation mode.** Not a native Shopify feature. It is a pattern you build: store stays open, buy buttons hidden, banner up. Reversible in seconds.

**Shopify holiday mode.** Same idea as vacation mode. People use the words interchangeably. There is no separate holiday setting in Shopify.

**Pause and Build plan.** An official Shopify plan around \$9 a month. Store stays online, checkout is off, most admin is locked. Good for long pauses, clumsy for short ones.

**Pause your store fully.** A stronger version of Pause and Build where the store goes offline entirely. This is a real plan action, not a toggle, and it is meant for stepping away for a long time.

**Password page.** A full lockout screen over the whole storefront. Hides everything, not just the cart. Not the same as a vacation mode.

**theme.liquid.** The layout file that wraps every page of your store. Editing it once is how the free vacation mode reaches every page at the same time.

The takeaway: Shopify has no one-click vacation mode, but you do not need one. A small block in your theme gives you a real Shopify vacation mode you control, for free, without a plan change or a billing surprise.


---

---
title: Fix Shopify Variant Colors in Random Order
description: Shopify Horizon can shuffle variant color options after a selection. Here is a small script that keeps them in a stable order.
---

## The problem

A merchant asked about this on the Shopify Community. He sells hosiery and imports his products from eBay using an import app.

After every import, the color buttons on his product pages showed up in a random order. One product started with Fruits Rouges, the next started with Carmin. There was no pattern.

He had too many products to fix by hand. He wanted the colors to sort alphabetically on their own.

This is a common Horizon theme complaint. Horizon is Shopify's newer free theme, built on blocks and web components. It looks modern, but it has no button to sort variant options.

A "variant option" is a choice on a product page, like Color or Size. A "variant option value" is one choice inside it, like Red or Blue. When those values load in a messy order, the store looks unfinished.

I reproduced it on a test store on the Horizon theme. The color buttons landed in import order, not alphabetical order. Here is what that looks like.

![Couleur dominante color buttons in random import order on a Shopify Horizon product page](/images/blog/shopify-variant-color-order/01-colors-random-order-before.png)

The red box is the color option. The values are scattered. The shopper has to hunt for the color they want.

If you are searching for how shopify variant options order works, or why your shopify variant colors show in random order, this is the exact case. It shows up most on Horizon, but the cause is the same on every theme.

## Why it happens

Here is the part most forum answers skip.

Horizon is not the thing that shuffled your colors. Shopify is.

Shopify saves each product's option values in the order they were first created or imported. It keeps that saved order forever. It does not sort them.

Your import app sends the colors in whatever order the source gave it. eBay returns them in no set order. So each product gets its own random order baked in at import time.

Then Horizon just renders that saved order on the page. The theme is only showing what Shopify stored. There is no "sort alphabetically" setting anywhere in Horizon's theme editor. There is no such setting in Shopify admin either.

So there are only two honest ways to fix it.

One, change the stored order in Shopify. That means editing every product, or bulk editing them. It works, but you have to redo it after every import.

Two, sort the buttons on the storefront with a small script. The stored data stays the same. Only the display changes. This survives future imports because it runs on page load, every time.

For a large catalog that imports often, option two wins. You set it once and forget it.

### One catch with Horizon you must respect

Horizon re-renders the variant picker when a shopper switches an option.

That is important. If a shopper clicks a size, Horizon rebuilds the color buttons from scratch. Any sort you did a moment ago gets wiped. The random order comes back.

So a script that sorts once on page load is not enough on Horizon. It has to watch the picker and re-sort every time Horizon rebuilds it. I will cover how below.

There is a second catch. Horizon ties each button to real variant data. If you naively swap the visible text and leave the wiring behind, the label can point at the wrong variant. A shopper clicks Blue and gets Red in the cart.

The safe method moves the whole button element, wiring and all. The label and its variant data travel together. Nothing gets mismatched.

## The fix

This is a display-only fix. It sorts the color buttons A to Z on the storefront. It does not touch your admin. It does not change your variant data. The variant that gets added to cart stays correct. Your sizes are left alone.

You do this once and it covers every product on that product template. A "product template" is the shared layout Shopify uses to build all your product pages.

**Step 1. Open the theme editor on a product page.**

Go to Online Store, then Themes, then Customize. Open any product page inside the editor.

**Step 2. Add a Custom Liquid block.**

In the left sidebar, find the Product information section. Click Add block, then choose Custom Liquid. A "Custom Liquid block" is a spot where you can paste your own code into a theme without touching theme files.

![Add block then Custom Liquid under Product information in the Shopify Horizon theme editor](/images/blog/shopify-variant-color-order/02-add-custom-liquid-block.png)

**Step 3. Paste the code and Save.**

Paste the script below into the Custom Liquid box. Then click Save.

```
<script>
document.addEventListener('DOMContentLoaded', function () {
  // Option names to sort A->Z. Add your exact option name / language here.
  var SORT_OPTIONS = ['color', 'colour', 'couleur'];

  function valueText(label) {
    var t = label.querySelector('.variant-option__button-label__text') || label;
    return (t.textContent || '').trim();
  }

  function sortOptions() {
    document.querySelectorAll('variant-picker fieldset.variant-option--buttons').forEach(function (fs) {
      var legend = fs.querySelector('legend');
      if (!legend) return;
      var name = legend.textContent.trim().toLowerCase();
      if (!SORT_OPTIONS.some(function (k) { return name.indexOf(k) !== -1; })) return;

      var items = Array.prototype.slice.call(fs.querySelectorAll('.variant-option__button-label'));
      if (items.length < 2) return;

      var sorted = items.slice().sort(function (a, b) {
        return valueText(a).localeCompare(valueText(b), undefined, { numeric: true, sensitivity: 'base' });
      });
      if (sorted.some(function (el, i) { return el !== items[i]; })) {
        sorted.forEach(function (el) { fs.appendChild(el); });
      }
    });
  }

  sortOptions();

  // Horizon re-renders the picker when a shopper switches an option, so re-apply.
  document.querySelectorAll('variant-picker').forEach(function (picker) {
    new MutationObserver(sortOptions).observe(picker, { childList: true, subtree: true });
  });
});
</script>
```

That is the whole fix. Here is the result on the same product.

![Color buttons now sorted A to Z with sizes untouched on Shopify Horizon](/images/blog/shopify-variant-color-order/03-colors-sorted-after.png)

I tested this on a Horizon store. Colors that imported as Fruits Rouges, Carmin, Anthracite now show Anthracite, Bleu Nuit, Carmin, Citrine, Fruits Rouges, Paprika. The sizes stayed exactly as they were.

### How the script works, in plain words

The script only touches options whose name matches your list. That list is the line `var SORT_OPTIONS`.

It reads the legend, which is the small label above each button group. If the legend says Color, Colour, or Couleur, it sorts that group. If the legend says Size or Taille, it leaves it alone.

The merchant's option was named "Couleur dominante." The word "couleur" is in the list, so it was already covered.

It sorts using `localeCompare`. That is a smart text sort that handles accents and numbers well. Citrine lands before Fruits Rouges, the way a shopper expects.

It only reorders when the order is actually wrong. This stops the script from looping on its own change.

The last part is the important one for Horizon. `MutationObserver` watches the picker. When Horizon rebuilds the buttons after a shopper picks a size, the observer fires and re-sorts. So the order never jumps back.

This is the whole point of a shopify horizon variant order fix that lasts. It is not a one-time sort. It re-applies forever.

## An alternative: fix it at the source, no code

The script is great when you import often and want the display fixed for good. But it is not the only route.

If you would rather fix the real stored order, and you do not import very often, you can bulk edit instead.

A bulk editor tool lets you export all your products to a spreadsheet. You sort the color values alphabetically in the sheet. Then you re-import the sheet. Shopify saves the new order.

This changes the actual data, not just the display. It is the cleanest fix for a catalog you rarely touch.

The downside is real. Every future import can bring back messy order. So you have to run the bulk edit again after each import. For a store that imports weekly, that gets old fast. The script wins there.

There is a third option worth a look. Check your import app's own settings. Some import apps have a variant or option mapping setting that can hold a fixed order. If yours does, you fix it once at the source and never think about it again. Most eBay import apps do not offer this, but it is worth a two-minute check before you add code.

## Can you sort Shopify variant options alphabetically by default?

No. There is no native setting for this. Not in the theme editor, not in Shopify admin.

Shopify shows variant option values in the saved order. On a new product you set that order by dragging the values when you create the variants. On an imported product you get whatever order the import sent.

So to shopify reorder variant options you either drag them by hand per product, bulk edit the data, or sort them on the storefront with the script above. Those are your only real choices today.

## How do I reorder variant options in Shopify manually?

You can do it by hand for a few products.

Open the product in Shopify admin. Scroll to the Variants area. Find the option, like Color. Drag each value into the order you want using the handle on the left.

Save the product. The new order is now stored and every theme will show it.

This is fine for five products. It is not fine for five hundred. That is why the merchant asked for an automatic fix in the first place. Manual reordering does not scale, and it does not survive the next import.

## Does the script change my variant data or cart?

No. It is display only.

The script never edits your product data. It never talks to your admin. It only moves the buttons around on the page after they load.

Each button keeps its own variant wiring because the script moves the whole button element, not just its text. So when a shopper clicks a sorted color, the correct variant goes into the cart. Price, image, and stock all stay tied to the right choice.

That is why it is safe to leave on for good. It cannot corrupt anything. Turn it off and your pages simply go back to import order.

## Will this work on a shopify variant swatch order too?

It depends on how your colors are shown.

This script targets Horizon's button-style options, the ones inside `fieldset.variant-option--buttons`. Those are the tappable color or size buttons.

If your theme shows color as a swatch, which is a small colored circle instead of a text button, the markup is a bit different. The same idea still works. You match the option name, then move the swatch elements instead of the button labels. You would adjust the selector to match the swatch container.

On stock Horizon, buttons are the default for a color option, so the script above fits most stores as written.

## If it did not work

A few things to check.

**Nothing sorted at all.** Your color option is probably named something not in the list. Open the script and look at `var SORT_OPTIONS`. Add your exact option name in lower case. If your option is "Farbe" or "Colore," add that word. The match is loose, so a partial word works too.

**It sorted once, then jumped back after clicking a size.** That means the observer part is missing or was trimmed. Make sure you pasted the whole script, including the `MutationObserver` block at the bottom. That block is what survives Horizon's re-render.

**Sizes got sorted too.** That should not happen with this script, because it only matches color names. If it did, your size option has a color word in its name. Rename the option, or tighten the match.

**It works on one product but not another.** Check the second product's option name. Imports can name the same idea two different ways, like Color on one and Couleur on another. Add both words to the list.

**The wrong variant lands in the cart.** You are likely running an older snippet that swapped only the text. Replace it with the script above, which moves the whole element and keeps the wiring intact.

## Definitions people confuse

**Variant vs option vs value.** A variant is one buyable combination, like Red / Small. An option is a choice type, like Color. A value is one entry in that choice, like Red. This fix sorts values inside one option.

**Display order vs stored order.** Stored order lives in Shopify's database. Display order is what the shopper sees. The script changes display order only. The bulk edit changes stored order.

**Custom Liquid block vs theme code.** A Custom Liquid block is a safe box in the theme editor for small snippets. Editing theme code means opening the actual theme files. The block is safer and does not risk your layout.

**Horizon vs older themes.** Horizon re-renders its variant picker, which is why the observer matters. Older themes like Dawn often do not re-render the picker on selection, so a one-time sort can be enough there. The script above is safe on both because the observer simply does nothing extra if the picker never changes.

Sort your colors once with the script and the storefront stays tidy after every import, with no per-product work and no data risk.


---

---
title: Show Shopify Variants as a Dropdown, Not Buttons
description: Turn the variant button picker into a compact dropdown in Shopify Horizon, either with the built-in style or a small CSS block.
---

## The problem

On the Horizon theme, product options show as buttons by default. Every size, colour, and finish gets its own tappable box.

That looks fine with two or three options. It gets ugly fast when you have many.

Ten sizes plus eight colours plus a few finishes turns into a wall of buttons. The product page grows very tall. The buy button gets pushed far down the screen.

A lot of merchants would rather show a **shopify variant dropdown**. One compact box per option. Pick from a list. Clean and short.

A merchant asked about this on the Shopify Community. They were on Horizon. They already had a dropdown, but it looked chunky. Rounded corners. Big text. And a grey box that flashed on hover and click.

They wanted three things. Sharp square corners. A smaller font inside the box. And no grey flash.

I reproduced the whole thing on a test store on the Horizon theme. Then I built and tested the fix. This post covers both jobs: how to switch variant buttons to a dropdown, and how to make that dropdown look right.

Here is the starting point on my test store. Rounded corners, large text, three option dropdowns stacked up.

![Horizon variant dropdowns before styling, with rounded corners and large text](/images/blog/shopify-variant-dropdown-instead-of-buttons/01-variant-dropdown-before-rounded.png)

## Why Horizon shows buttons by default

Horizon has a setting that decides how variants render. It is called the variant style.

The block that draws this is the **shopify horizon variant picker**. It ships with two options: Buttons and Dropdowns. The default is Buttons.

So out of the box, every option value becomes a button. That is a design choice, not a bug. Buttons feel modern and are easy to tap on a phone.

The trade off is height. Each value takes a full box. Many values means many boxes. That is the classic **shopify too many variant buttons** problem.

A dropdown solves the height. It collapses a long list into one line. The list only opens when the shopper clicks it.

The good news: you do not need code to switch. Horizon has a built-in toggle for this. Let me show that first, then the styling.

## Switch variant buttons to a dropdown

This is the no-code path. It is the fastest way to make **shopify variants as dropdown** on Horizon.

Do this to **shopify change variant buttons to dropdown**:

1. Go to **Online Store > Themes**.
2. Click **Customize** on your Horizon theme.
3. Open a product page from the template dropdown at the top.
4. In the left sidebar, click the **Variant picker** block. It sits under Product information.
5. Find the **Style** setting.
6. Change it from **Buttons** to **Dropdowns**.
7. Click **Save** at the top right.

That is it. Your options now render as compact dropdown boxes instead of buttons.

One note on swatches. There is a **Show swatches** checkbox in the same block. Swatches are the little colour chips. Turn that off if you want a plain text list with no colour chip inside the box.

This built-in switch is enough for most stores. If a long list of options was your only worry, you can stop here.

But the dropdown Horizon gives you is rounded and roomy. The merchant on the Community wanted it tighter. That needs a few lines of CSS. CSS is the styling language themes use to control looks like size, colour, and corners.

## The fix: sharp corners and a smaller font

Here is the tested styling. It makes the dropdown corners square and shrinks the text inside.

First, a quick theme check. This exact code targets Horizon. Horizon names its dropdown parts with special class names. A class name is just a label in the theme code that CSS can hook onto.

The two names that matter here:

- `.variant-option__select-wrapper` is the outer box. It holds the border and the corners.
- `.variant-option__select` is the actual select element inside. It holds the text.

A **select element** is the real HTML dropdown control. It is what opens the list of options when clicked.

Now the steps. You paste the code into Horizon's Custom CSS box. That box lives on the Product information section.

1. In the theme editor, open a product page.
2. Click the **Product information** section in the left sidebar.
3. Scroll the right panel down to **Custom CSS**.
4. Paste both rules below.
5. Click **Save**.

![Where to paste custom CSS in the Horizon Product information section](/images/blog/shopify-variant-dropdown-instead-of-buttons/02-paste-custom-css-horizon.png)

Here is the CSS:

```css
.variant-option__select-wrapper {
  border-radius: 0;
}

.variant-option__select {
  font-size: 12px;
}
```

The first rule sets the corner radius to zero. That gives you sharp square corners.

The second rule sets the text size to 12 pixels. Change 12px to any size you like. Try 13px or 14px if 12 feels too small.

I tested this on Horizon. The corners went square. The text got smaller. Here is the after.

![Horizon variant dropdowns after styling, with sharp corners and 12px text](/images/blog/shopify-variant-dropdown-instead-of-buttons/03-variant-dropdown-after-sharp.png)

One tip before you touch CSS at all. Horizon has a global corner setting under **Theme settings > Inputs > Corner radius**. Set that to 0 and every input goes square. Search boxes, quantity boxes, the lot.

Use the global setting if you want everything square. Use the CSS rule above if you only want the variant box square and want to leave other inputs alone.

## Remove the grey hover on the dropdown

The merchant hit one more thing. When they hovered or clicked the dropdown, a grey box filled it.

That grey is Horizon's built-in hover state. The theme swaps the box to a light grey on hover and click. It uses a colour token called `--color-variant-hover-background`.

A colour token is a named colour the theme stores in one place. The theme reuses it in many spots.

To stop the grey flash, hold the box at its normal colour on hover. Add this in the same Custom CSS box:

```css
.variant-option__select-wrapper:hover .variant-option__select {
  background-color: var(--color-variant-background);
}
```

This keeps the dropdown on your theme's normal colour on hover and on click. No grey flash. I tested it on Horizon.

![Horizon variant dropdown before and after removing the grey hover fill](/images/blog/shopify-variant-dropdown-instead-of-buttons/04-remove-grey-hover.png)

The border also darkens on hover. If that bothers you, stop it too. Add this as well:

```css
.variant-option__select-wrapper:hover {
  border-color: var(--color-variant-border);
}
```

You could use `transparent` in place of the token. But the token keeps the box matched to your theme if you ever change your colours later. That is why I use the token.

## An alternative: keep buttons but make them compact

Maybe you like buttons but hate the height. You do not have to switch to a dropdown at all.

You can keep the button style and cap its height instead. This suits a picker with many colour swatches where the visual chips still help.

The idea is simple. Give the button group a max height and let it scroll inside. Add a small CSS block on the Product information section:

```css
.variant-option {
  max-height: 180px;
  overflow-y: auto;
}
```

Now the button list never grows past 180 pixels. If there are more buttons, they scroll inside that box. The buy button stays high on the page.

So you have two clean routes. Dropdowns for a plain compact list. Capped scrolling buttons if you want to keep the visual chips. Both fix the tall page.

## How do I change variant buttons to a dropdown in Shopify?

On Horizon, use the built-in setting. Open the theme editor, click the Variant picker block, and set Style to Dropdowns. Save.

You do not need an app or code for the switch itself. The code only comes in if you want to restyle the dropdown after.

On older themes like Dawn, there is no Buttons versus Dropdowns toggle in the same place. Dawn shows a dropdown by default for many products. More on Dawn below.

## Why do I have too many variant buttons in Shopify?

Because your theme is set to the button style, and your product has many option values.

Each value becomes one button. A product with lots of sizes or colours creates a long list of boxes. That is the **shopify too many variant buttons** situation.

Two ways to shorten it. Switch to a dropdown, which collapses the list into one line. Or cap the button area with the scrolling CSS above.

If your options are colours, a swatch grid also helps. Swatches pack more choices into the same width than full text buttons.

## Can I show Shopify variants as a dropdown on Dawn?

Yes, but the class names differ. Dawn does not use Horizon's `.variant-option__select` names.

Dawn uses a select inside `.product-form__input`. So target it like this:

```css
.product-form__input select,
.select__select {
  border-radius: 0;
  font-size: 13px;
}
```

The idea is the same as Horizon. Only the class names change between themes.

This is worth stressing. Copying Horizon CSS onto Dawn will do nothing. Always check your own theme's class names first. Right click the dropdown in your browser and choose Inspect to see them.

## How do I make the variant dropdown font smaller?

Set a font size on the select element. On Horizon that is `.variant-option__select`.

```css
.variant-option__select {
  font-size: 12px;
}
```

Lower the number for smaller text. Raise it for bigger. There is no theme setting for this size, so CSS is the way.

The same rule works whether you switched to a dropdown or Horizon gave you one already.

## If it did not work

A few common reasons the change does not show:

- **Wrong theme.** These class names are Horizon only. If you run Dawn, Prestige, or another theme, the names differ and nothing happens. Inspect your dropdown and use its real class names.
- **Pasted in the wrong box.** The Custom CSS must go on the Product information section, or in theme-wide Custom CSS under Theme settings. Pasting it into the wrong section box means it never loads on the product page.
- **Forgot to save.** The Save button sits at the top right of the theme editor. If it stays greyed after you paste, click into the box, press space, then backspace. That wakes the Save button.
- **A cached page.** Refresh with a hard reload, or open the product in a private window. Old CSS can linger in the browser.
- **An app overrides it.** Some variant or swatch apps draw their own picker. If you use one, the app has its own style settings and this theme CSS will not reach it.

## Definitions and distinctions people confuse

**Buttons versus dropdown versus swatches.** Buttons are tappable boxes, one per value. A dropdown is one box that opens a list. Swatches are small colour or image chips. Horizon can do all three. Buttons and dropdowns are set by the Variant picker Style. Swatches are a separate checkbox.

**Select element.** This is the real HTML dropdown. When you switch to Dropdowns, Horizon renders a select. Its outer box is `.variant-option__select-wrapper`. Its text lives in `.variant-option__select`.

**Custom CSS versus base.css.** Custom CSS is a safe box in the theme editor. It never touches core files and is easy to undo. Editing base.css means opening theme code and changing a shared file. I use the Custom CSS box. It is safer and just as powerful for small styling like this.

**Corner radius setting versus CSS.** Horizon's Inputs corner radius is global. It squares every input at once. The CSS rule targets only the variant box. Pick the global setting for a whole-store look. Pick the CSS for a surgical change.

**Colour token versus a fixed colour.** A token like `--color-variant-background` follows your theme palette. A fixed colour like white stays white forever. Using the token means the dropdown keeps matching if you rebrand later.

That is the full picture. Switch the Style to Dropdowns for a compact list. Add the small CSS block for sharp corners and smaller text. Add one more rule to kill the grey hover. All tested on Horizon, all no-app, all reversible.


---

---
title: Shopify Variant Image Switching: Show One Image Per Color
description: In a Horizon Grid gallery, picking a color still shows extra images. Here is why unassigned images bleed through, and the small theme edit that shows only the selected variant's image.
---

## The problem

A merchant asked about this on the Shopify Community, and it is a common one once you set up variant images.

They run the Horizon theme. Their product page uses a two-column media Grid. Every color variant has its own image mapped to it. Yet when a shopper picks a color, the gallery still shows more than one image side by side.

They had already turned on the theme setting that sounds like the fix, "Hide unselected variant media", and it was not enough.

I reproduced it on a test store. Here is a product where the selected color has its tee image mapped, plus one extra lifestyle image that is not mapped to any color. Pick the color, and the grid still shows both.

![A Horizon Grid gallery showing the selected color's tee next to an unassigned lifestyle image](/images/blog/shopify-variant-image-switching/01-variant-plus-unassigned-image.png)

If that is your setup, you are not missing a setting. The behavior is working as Horizon designed it. You just need one small change to get true one-image-per-color switching in the Grid.

## Why the extra image still shows

This is the part that forum answers skip, and it is the whole reason the fix works.

"Hide unselected variant media" does exactly what it says, and no more. It hides images that are **attached to a different variant**. So if you are viewing Red, it hides the image mapped to Blue.

The catch is any image you never mapped to a color. In Shopify, an unmapped image is treated as **shared**. It belongs to the product, not to one variant. Horizon shows shared images on every variant, all the time.

Lifestyle shots, size charts, packaging photos, anything you uploaded but did not assign to a specific color, all of it counts as shared. So even with the setting on, those images keep appearing next to the variant image.

That is why the merchant saw two. One image was the color's mapped image. The other was an unassigned lifestyle photo that Horizon treats as shared.

Once you see it that way, the goal is clear. You do not need Shopify to hide the other color's image. That already works. You need the Grid to show only the one image mapped to the color you are looking at, and ignore the shared ones.

## Before you start: check three things

This fix targets one specific setup. Confirm all three before you touch code, or you will be changing the wrong thing.

- **Your gallery is set to Grid.** In the theme editor, open the Product media block and check that the layout type is Grid, not Carousel. A Carousel already shows one image at a time, so it does not have this problem.
- **Hide unselected variant media is on.** Same block. The fix reads this setting, so it should be enabled.
- **Each color has an image mapped to it.** Open the product, open a variant, and confirm it has a variant image. This is Shopify's native `variant.featured_media`. If your colors have no mapped image, map them first, because there is nothing for the fix to isolate.

If any of those is not true, sort it out first. The code below assumes all three.

## The fix: show only the selected variant's image

This is a small edit to one theme file. It uses Shopify's native variant image mapping, so there are no hardcoded image URLs, and it does not touch your product data or any app sync.

First, back up the theme. In your admin, go to Online Store, then Themes, open the three-dot menu on your live theme, and choose Duplicate. That gives you a copy to roll back to.

Now open the code editor. Online Store, Themes, three-dot menu, Edit code.

Open `snippets/product-media-gallery-content.liquid`.

Near the top of the file, inside the `{% liquid %}` block, find this piece:

```liquid
  else
    assign sorted_media = selected_product.media
  endif
```

Paste these lines directly after that `endif`:

```liquid
  # Grid: show only the selected variant's featured media
  if block_settings.hide_variants and selected_variant_media and media_presentation == 'grid'
    assign sorted_media = selected_product.media | where: 'id', selected_variant_media.id
  endif
```

Here is exactly where it goes.

![The three lines pasted right after the sorted_media block in product-media-gallery-content.liquid](/images/blog/shopify-variant-image-switching/02-where-the-code-goes.png)

Save. That is the whole change.

## What the change does

In plain terms, it rebuilds the list of images the Grid renders. When a color is selected, it keeps only the one image mapped to that color and drops everything else for that view.

- The Grid renders only the single image mapped to the active color.
- It uses `variant.featured_media`, Shopify's own variant image link, so no image URLs are hardcoded.
- Size changes leave it alone. Each size keeps its color's image, so switching from Small to Medium does not swap anything.
- It only runs in Grid, and only while Hide unselected variant media is on. Turn that setting off and the theme goes back to its normal behavior.

Here is the same product after the edit. The color now shows only its own tee. The lifestyle image is gone from this view.

![After the edit: the Grid shows only the image mapped to the selected color](/images/blog/shopify-variant-image-switching/03-only-the-variant-image.png)

And when the shopper switches color, the Grid swaps straight to that color's single image. On my test store I watched it drop from two images to one, then switch cleanly from the red image to the blue image as I changed the color.

![Switching color swaps the Grid to that color's single image](/images/blog/shopify-variant-image-switching/04-switch-color.png)

## The no-code alternative, and why it falls short

If you do not want to edit theme code, there is one native lever, but it has a real limit worth knowing.

You can map every image to a color. If an image is attached to a variant, "Hide unselected variant media" will hide it on the other colors. So in theory, mapping everything makes the shared images disappear.

The problem is that an image can be mapped to only one color at a time. A lifestyle shot that you want on Red and Blue can only live on one of them. So you cannot keep a shared lifestyle image and hide it per color at the same time. You either give it to one color or you delete it.

The other no-code route is switching the gallery to Carousel, which shows one image at a time. That hides the side-by-side problem, but it changes your whole layout, and the merchant here specifically wanted to keep the Grid.

That is why the code edit is the clean answer. It keeps your Grid, keeps your shared images in the product, and just controls what the Grid shows per color.

## How to show a variant image in Shopify at all

If you landed here because your variant images are not switching at all, start one step back.

Shopify links an image to a variant through the variant's image field. Open the product, open a variant, and set its image. That single image is the variant's `featured_media`. When a shopper selects that variant, the theme leads with that image.

Most modern themes, Horizon included, do this out of the box. If yours does not switch the main image on variant change, the usual cause is that the variants have no image mapped, so there is nothing to switch to.

## How to assign an image to a product variant

Assigning is done per variant, not per image.

Open the product in your admin. Scroll to Variants and open the variant you want, for example Red. There is an image slot on the variant. Pick the image from the ones already uploaded to the product, or upload a new one. Save.

Repeat for each color. Once every color has its own image, variant switching has something to work with, and the fix above can isolate it in the Grid.

## How to remove a variant image in Shopify

If a variant is showing the wrong image, the mapping is the thing to change, not the file.

Open the product, open the variant, and clear or replace the image in its image slot. Removing the mapping does not delete the image from the product. It just unlinks it from that variant, which turns it back into a shared image for the product.

Keep that in mind, because unlinking an image is exactly how an image becomes shared again, which is the behavior that started this whole article.

## What about variant image swatches

Swatches are a separate feature that people often mix up with variant images.

A swatch is the small colored circle or chip a shopper clicks to pick a color. A variant image is the large photo in the gallery. Horizon can show color swatches driven by a color option, and it can switch the gallery image, and those are two different settings.

This fix is only about the gallery image. It does not change your swatches. If your swatches look wrong, that is a different setting in the variant picker block, not the media gallery.

## If it still shows more than one image

A few things to check if the Grid is still showing extra images after the edit.

- **The setting is off.** The fix only runs while Hide unselected variant media is on. Confirm it is enabled in the Product media block.
- **You are on a Carousel, not a Grid.** The condition checks for Grid. If the block is set to Carousel, the fix does not apply, and you likely do not need it.
- **The color has no mapped image.** If the selected color has no `featured_media`, there is nothing to isolate, so the theme falls back to showing the product's images. Map an image to that color.
- **You edited a duplicated theme that is not published.** Make sure you are viewing, and eventually publishing, the theme you actually edited.

## A note on theme updates

This is an edit to a core theme file, so treat it like one.

When Horizon ships an update and you take it, the update can overwrite this file and your three lines will be gone. That is normal for any theme-code edit. Keep the snippet somewhere safe, and re-apply it after an update. Duplicating the theme before you edit, as above, gives you a clean reference to compare against.

## The short version

Horizon's "Hide unselected variant media" only hides images mapped to other colors. Unmapped images are shared, so they show on every color. To get true one-image-per-color switching in a Grid, add a three-line filter to `product-media-gallery-content.liquid` that keeps only the selected color's `featured_media`. It is native, it does not hardcode any URLs, and it leaves your product data and app syncs untouched.


---

---
title: How to Add Variant Images in Shopify So Photos Switch
description: If clicking a colour does not change the product photo, the colour has no variant image attached. Here is how to add variant images in Shopify, tested on Dawn 15.
---

## The problem: you click a colour and the photo does not change

You set up a product with four colours. The colour picker looks right. Then you click the second colour and the photo on screen does not move.

Or worse, it changes to a flat rectangle of colour instead of the product.

A swimwear merchant asked about this on the Shopify Community. She sells bikini tops in four prints, she had built proper print swatches, and she wanted the obvious thing: click a print, see that exact swimsuit.

![The second print is selected but the photo has not changed](/images/blog/shopify-variant-images/01-variant-image-not-changing.png)

Her swatches were already working. Three of her four prints rendered the real fabric pattern in the circle. That was not the problem.

I pulled the product data from her live store and counted. Across the 14 products with a Colour option there were **35 colours, and 31 of them had no photo attached at all**. Only four did.

That is the whole bug. A swatch cannot switch to a photo that does not exist.

## Swatch and variant image are two different things

This is the distinction that trips most people, so it is worth being precise.

A **swatch** is the small circle in the picker. It is a property of the option value, not of the product. It holds either a hex colour or a small image of the fabric.

A **variant image** is the full product photo Shopify jumps to when that variant is selected. It is a property of the variant, and it points at one of the product's media items.

They are stored in different places, they are edited in different screens, and one does not imply the other.

So you can be in exactly the state that merchant was in: perfect swatches, no image switching. The circles look great and clicking them does nothing.

The reverse also happens. You assign variant images, the photos switch correctly, and the circles are still plain colour dots because you never gave the option values a swatch image.

## Why the photo does not switch

When a shopper picks a variant, the theme looks up that variant's image and scrolls the gallery to it.

If the variant has no image, there is nothing to look up. Most themes do the sane thing and leave the gallery where it is. Nothing appears broken. Nothing moves either.

On Dawn I reproduced it on a test store: four colours, only the first with a photo assigned. Selecting colour two, three or four left the first colour's photo on screen every time. The picker updated, the URL updated, the price updated. The photo did not.

## A 60 second check: how many of your colours actually have a photo

Do not guess at this. Shopify will tell you.

Open any product page on your storefront and add `.js` to the URL:

```
https://your-store.myshopify.com/products/your-product-handle.js
```

That returns the product as JSON. Every variant has a `featured_image` field. If it reads `null`, that variant has no image, and clicking it will never change the photo.

Do that on two or three products and you will know within a minute whether you have a settings problem or a data problem. In the case above it was a data problem, 31 times over.

## How to add variant images in Shopify

This is the fix, and it is per product. There is no global setting.

**Step 1. Upload one photo per colour into the product's Media.**

Open the product in your admin and add a photo for every colour you sell. The variant image has to be one of the product's own media items, so if the photo is not in Media you cannot assign it.

![Upload one photo per print into the product's Media section](/images/blog/shopify-variant-images/02-upload-photo-per-print.png)

**Step 2. Group the variant list by Colour.**

Scroll to the Variants card. There is a **Group by** dropdown, and by default it groups by whichever option is first, usually Size. Switch it to Colour.

This matters more than it looks. Grouped by colour, you assign one photo per colour group instead of repeating yourself for every size.

**Step 3. Click the small square next to each colour and pick that colour's photo.**

![Group by Colour, then click each square and pick that colour's photo](/images/blog/shopify-variant-images/03-assign-variant-image.png)

**Step 4. Save, then test on the storefront.**

Do not test in the admin. Open the real product page and click through every colour.

After doing this on the test store, all four colours swapped to their own photo. Verified by reading the rendered image source after each click, not by eye.

![Every colour now shows its own photo](/images/blog/shopify-variant-images/05-variant-image-working.png)

## The giant block of flat colour

This is a specific failure worth calling out because it looks like a theme bug and is not.

The merchant had a plain pink JPEG sitting in her product's photos, assigned as the Pink variant image. So selecting Pink filled the entire gallery with a pink rectangle.

The file itself was fine. It was in the wrong place.

A flat colour file belongs in the **swatch**, where it renders at about 40 pixels across. It does not belong in the product's Media, where it renders at full size.

The fix is two moves:

- In the product's Media, tick the flat colour file and click **Remove**.
- Upload a real photo of the product in that colour and assign it to the variant.

![Tick the plain colour file, then Remove](/images/blog/shopify-variant-images/04-remove-flat-colour-file.png)

## Where the swatch image actually lives

If you want the circle to show a fabric print rather than a solid dot, that image goes somewhere else entirely.

In the Variants card, click the colour chip in the Colour row, then **Edit**. You get the colour entry, with a Label, a Color hex value, and an **Image** field.

The fabric print goes in Image.

![The colour entry, where the fabric print goes in the Image field](/images/blog/shopify-variant-images/06-swatch-image-field.png)

Two things to know before you use it.

First, this only appears when your Colour option is connected to Shopify's Colour category attribute. If your option is a free-text option named "Colour", there is no entry to edit.

Second, **these entries are shared across your entire store**. They are records in your catalog, not per-product settings. Put a floral print on the "Floral" entry and every product using Floral gets that same swatch. That is convenient for a consistent palette and a real problem if two products use the same colour name for different fabrics. If your prints genuinely differ per style, give them distinct names.

## Can a variant have more than one image in Shopify?

No. One variant, one image.

This is the single most common follow-up, so to be direct: Shopify's data model gives each variant a single `featured_image`. There is no native way to attach a set of five photos to the Blue variant and a different five to the Red.

What actually happens is that the product's whole gallery stays visible and the theme jumps to the selected variant's one image. Shoppers can still scroll to every other photo.

If you need true per-colour galleries you have three options, in increasing order of effort:

- **Separate products per colour**, linked with Shopify's Combined Listings, so each product carries its own full gallery.
- **A variant image app**, which is what most merchants end up doing.
- **Theme code**, filtering the gallery by an alt-text convention or a metafield.

## How to show only the selected colour's images

Related question, same root.

Dawn has no setting for this. I checked the theme settings schema on Dawn 15. There is no option to hide other variants' media. Anyone telling you to look for a toggle is describing a different theme.

Some paid themes do ship it, usually worded as "hide other variant images" or "group media by variant". If your theme has it, that is the easy path.

If it does not, the common no-app workaround is an alt-text convention. You name every Blue photo's alt text with a marker like `#blue`, then edit the gallery snippet to skip media whose alt text names a different colour. It works, it is fiddly, and it breaks when someone uploads a photo and forgets the alt text, with nothing to flag it.

## Swatches on collection page cards

Worth separating from everything above, because it is a different feature that happens to fail for the same reason.

**Dawn has no built-in swatches on product cards.** I checked `card-product.liquid` on Dawn 15.5 and there is not a single reference to swatches in it. The native swatch support is in the product page's variant picker only.

If you are seeing circles under your products on a collection page while running Dawn, that is custom code someone added to your theme, or an app.

In the case above it was a custom snippet, and it drew each circle from the **variant image**. So for every colour with no photo assigned it fell back to Shopify's grey "no image" placeholder. Those blank circles were not broken code. They were the same 31 missing photos, showing up in a second place.

They fixed themselves once every colour had a photo.

## If the photo still does not switch

Work through these in order.

**Check the variant actually has an image.** Use the `.js` URL above. `featured_image: null` means the assignment did not save, whatever the admin looked like.

**Check you assigned it to the colour, not the size.** With Group by set to Size, it is easy to assign a photo to "Small" and wonder why colours do nothing.

**Check you are testing the right theme.** If you have a draft theme open in one tab and the live store in another, you can easily fix one and test the other.

**Clear the cache.** Shopify's CDN and your browser both hold onto product pages. Test in a private window.

**Check whether the swatch is even wired to variants.** Some themes and most swatch apps render decorative swatches that are not connected to the variant picker at all. If clicking a circle does not change the URL or the price either, the swatch is not selecting a variant, and no amount of variant images will help.

## The three things, named properly

Since the vocabulary is what causes most of this, here they are side by side.

**Product media** is the pool of photos and videos on the product. Everything else points into it.

**Variant image** is one media item, marked as the photo for one variant. This is what makes the gallery jump when a shopper picks a colour. One per variant.

**Swatch** is the small circle in the picker. It belongs to the option value, is shared across your store, and holds either a hex colour or a small image. It never affects which photo is shown.

Get those three straight and almost every "my variant images are not working" question answers itself. In the swimwear case the swatches were already perfect. The store just needed 31 photographs.


---

---
title: "Shopify Variant Limit: 2,048 Variants and 3 Options"
description: Shopify raised the variant cap to 2,048 in October 2025, but the three-option limit never moved. Here is which one actually blocks you, and how to price by size and quantity without an app.
---

## The problem

A merchant asked about this on the Shopify Community, and it is the clearest example I have seen of people worrying about the wrong limit.

They sell acrylic keychains, pins and standees. Until now they took orders over WhatsApp and Instagram, sending each customer a PDF price list based on size and quantity, plus a choice of attachments and finishes.

Now they wanted it on their Shopify store. Their question was which app they needed to buy for tiered pricing by quantity, and for all those customisation options.

The honest answer is that most of it is already built in and free. But there is a real ceiling, and it is not the one people expect.

## The two limits, exactly

Shopify has two separate caps on a product, and they get confused constantly.

**Options: 3 per product.** Size, Colour, Material. That is the whole allowance. When you have three, the admin stops offering "Add another option". The button disappears.

**Variants: 2,048 per product.** A variant is one combination of your options. Four sizes times six finishes is 24 variants.

That second number changed recently, which is why the search results you find are contradictory. The cap was 100 variants for years. Shopify raised it to 2,000 in a developer preview, then to **2,048 for all merchants in October 2025**. If an article tells you 100, it predates the change.

Here is a product with all three options set, on a test store.

![Product page on Dawn showing Size, Finish and Attachment as native Shopify options](/images/blog/shopify-variant-limit/01-three-options-native-variants.jpeg)

Every combination carries its own price. That is native Shopify, no app.

## Why 3 options is the real ceiling

Few stores ever hit 2,048 variants. You would need something like eight sizes times eight colours times thirty-two materials.

The option limit is what stops people, and it stops them early. Three is a small number once a product has size, colour, material and a finish.

This is what it looks like when you are out of slots. Three options are set, and there is no fourth to add.

![Shopify admin Variants card with three options set and no fourth option offered](/images/blog/shopify-variant-limit/02-no-fourth-option-offered.jpeg)

So when someone says "I hit the Shopify variant limit", they usually mean the option limit. Those are different problems with different fixes.

If you are genuinely near 2,048 variants, your problem is merchandising, not Shopify. No shopper browses 2,000 combinations.

## Fix 1: merge two options into one

If you need a fourth option, merge two existing ones into a single option with combined values.

Say you have Attachment (ball chain, split ring) and Attachment Colour (silver, gold). That is two slots for one idea.

Make it one option called Attachment, with values that read:

- Ball chain - silver
- Ball chain - gold
- Split ring - silver
- Split ring - gold

You have freed a slot. The customer sees one dropdown instead of two, which is arguably better anyway.

One thing to be clear about: **merging frees an option slot, it does not save any variants**. Two options of 2 and 2 produce 4 combinations. One merged option of 4 values also produces 4. The variant count is identical.

So only merge when you are out of option slots. If you have a spare slot, keep them separate, because two short dropdowns are easier to use than one long one.

## Fix 2: anything that does not change the price is not an option

This is the one that saves people, and it is the most commonly missed.

Options exist to drive **price** and **inventory**. If a customer choice does neither, it should not be an option at all. It should be a line item property.

Artwork uploads. Gift notes. Name personalisation. Print type, when every print type costs the same. None of these need a variant.

A line item property is a normal form field inside the product form, named like this:

```liquid
<label for="print-type">Print type</label>
<select id="print-type" name="properties[Print type]">
  <option value="Glossy">Glossy</option>
  <option value="Matte">Matte</option>
</select>
```

The `properties[...]` name is the whole trick. Shopify carries anything named that way through to the cart, the order, and your packing slip.

It costs nothing, it needs no app, and it adds **zero** variants. You can have as many as you like.

The catch: Dawn and most themes give you no admin UI for this, so it means a small theme edit. That is a one-time change to your product template, not a subscription.

Use this rule to decide:

- Does the choice change the price? It needs an option.
- Do you count stock separately for it? It needs an option.
- Neither? Line item property.

That second question catches people. If you stock 40 silver chains and 12 gold chains separately, attachment colour has to be an option even if both cost the same.

## Tiered pricing by quantity, without an app

The other half of the question was quantity breaks. Buy 25, get 10 percent off. Buy 100, get 20 percent.

You do not need an app for this either. Use **automatic discounts**, one per tier, each with a minimum quantity.

![Three automatic discounts in the Shopify admin, one per quantity tier](/images/blog/shopify-variant-limit/03-quantity-tier-automatic-discounts.png)

I set up three on a test store: 25 or more at 10 percent, 50 or more at 15 percent, 100 or more at 20 percent. Then I ran the cart at every boundary to see how they interact.

- 24 items: nothing
- 25 items: 10 percent
- 49 items: 10 percent
- 50 items: 15 percent
- 99 items: 15 percent
- 100 items: 20 percent

Exactly one tier fires at a time, and it is always the best one the cart qualifies for. They do not stack and they do not fight each other. You do not need to write the tiers as ranges or worry about overlap.

A store can have **25 active automatic discounts** in total, which is far more than any tier ladder needs.

### Mixed variants count together

This is the detail that makes the whole approach work for a size-based catalogue, and it is worth testing yourself.

Quantity is counted across variants of the same product, not per variant.

So 30 of one size plus 30 of another is 60 items. Both lines qualify for the 50+ tier, and each line's discount comes off **its own** size price.

![Cart with two sizes, both lines receiving the 50 plus tier off their own price](/images/blog/shopify-variant-limit/04-mixed-sizes-share-a-tier.jpeg)

That is almost always what a merchant means by "tiered pricing by quantity and size". The size sets the unit price. The total quantity sets the discount.

### The one real drawback

An automatic discount shows up **in the cart**, as a discount line. It does not change the price displayed on the product page.

So a customer looking at a product page sees the full unit price with no hint that 50 units would be cheaper.

Publish your price table in the product description. It is not elegant, but it is free, and it is what the discount is actually doing.

## A worked example

The merchant came back with their real spec, which is a good test of all of this.

Quantity, size and hooks affect the price. Print type does not. There are also hook colours.

Here is how that maps:

**Quantity** affects price, so it becomes quantity tiers. Not an option.

**Size and hooks** affect price, so they become two options. Four sizes times six hook types is 24 variants.

![Shopify admin Variants card set up with four sizes and six hook types](/images/blog/shopify-variant-limit/05-four-sizes-six-hooks.jpeg)

**Print type** does not affect price, so it is a line item property. Still 24 variants.

**Hook colour** depends. If it does not change the price, make it a property and stay at 24 variants. If it does, it takes the third option slot, and 4 times 6 times 3 is 72 variants. Still nothing next to 2,048.

Either way they are fine. And either way, three options is the ceiling they need to plan around, not the variant count.

## When you actually do need an app

There is one thing native options genuinely cannot do: **conditional logic**.

Only offer a glitter epoxy finish once the size is 2 inch or larger. Hide the attachment picker entirely on standees, because standees do not take a keychain hook.

Shopify's native options cannot express "show this only when that". Every option is always visible. If you need that, a product options app is the right purchase.

That is the test I would apply. Not "do I have lots of choices", but "do my choices depend on each other". If they do not, start free.

I checked the two reference sites the merchant mentioned. One of them, Vograce, runs on Shopify with the Impulse theme. Their acrylic keychain page uses three native options producing 98 variants, each with its own price. No options app. The quantity pricing on top is a private app they built themselves.

## Common questions

**What is the Shopify variant limit per product?** 2,048 variants, and 3 options. Both are per product, not per store.

**Was the limit 100 variants?** It was, for a long time. It went to 2,000 in a developer preview and then to 2,048 for all stores in October 2025. If you are on a current store you have 2,048.

**Can I have more than 3 options in Shopify?** Not natively. Merge two options into one with combined values, move any unpriced choice to a line item property, or use an options app if you need conditional logic.

**Do line item properties create variants?** No. That is the point of them. They are metadata attached to the cart line, so you can add as many as you like without touching either limit.

**Do quantity discounts stack?** No. One automatic discount applies, and Shopify picks the best one the cart qualifies for. Stacking product discounts on the same item requires Shopify Plus.

**Does the discount show on the product page?** No, only in the cart. Publish your price table in the description.

## If it is not working

**"Add another option" is missing.** You already have three. That is the limit, not a bug.

**Your discount is not firing.** Check the minimum quantity, check the discount is active and inside its date range, and check it targets the right collection or product. Also check you are under 25 active automatic discounts.

**Two sizes are not combining into one tier.** They have to be variants of the **same product**. Two separate products do not pool their quantities toward a product-level discount. If your sizes are separate products, that is the reason, and merging them into one product with a Size option fixes it.

**Your line item property is not showing in the order.** The input must be inside the product form and named `properties[Something]` exactly. A property whose name starts with an underscore is hidden from the customer on purpose.

I tested everything above on a free Dawn theme on a development store, including running the cart at each tier boundary. The measurements in this article are from that store.


---

---
title: "Shopify Variants: The Complete Guide"
description: Variants are one product sold in several forms. This guide covers how they work, the limits, and the fixes for the variant problems merchants actually run into.
---

## What a Shopify variant actually is

A variant is one version of a product. One t-shirt, sold in Small Black and Large White, is one product with several variants.

Each variant carries its own price, SKU, barcode, weight and stock count. That is the whole idea. You do not create a separate product for every size.

You build variants from **options**. Options are the choices, like Size and Color. The values are Small, Medium, Black, White. Shopify multiplies your options together to make the variants.

Three options with five values each gives you 125 variants. That multiplication is where most variant problems begin.

I have answered a lot of variant questions on the Shopify Community. The same ones come back constantly. This page is the map: what variants are, where the limits sit, and where each specific fix lives.

## The limits you need to know

Shopify caps variants at **2,048 per product**, across a maximum of **3 options**.

That 2,048 number is recent. The old cap was 100, and most articles you will find still say 100. If you hit a limit that does not match what you read somewhere, this is usually why.

Three options is the harder cap in practice. If you sell something configurable, three is not many. Size, colour and material uses all three, and then you have nothing left for engraving or length.

I wrote up the full picture, including what to do when three options is not enough: [Shopify Variant Limit: 2,048 Variants and 3 Options](/blog/shopify-variant-limit).

## Showing variants on the product page

This is where most of the work is. The variant data is fine; it is the picker that misbehaves.

### Images that follow the variant

The single most common request. A customer picks Blue, and the gallery should show the blue one.

Start here if you are setting it up from scratch: [How to Add Variant Images in Shopify So Photos Switch](/blog/shopify-variant-images). It covers assigning an image to a variant and what Shopify does when you do not.

If images are assigned but the switching behaves oddly, [Shopify Variant Image Switching: Show One Image Per Variant](/blog/shopify-variant-image-switching) deals with showing exactly one image per selection.

And when the wrong photo loads first, the cause is usually image order rather than the variant setup. That one is unpacked in [Shopify Product Variant Image Switching, Explained](/blog/shopify-product-variant-image-switching).

### Colour swatches

Text buttons that say "Midnight Navy" tell a shopper nothing. Swatches do.

You do not need an app for this. Shopify's own metaobjects handle swatches natively now: [How to Add Color Swatches in Shopify Without an App](/blog/shopify-color-swatches-without-app).

### The picker itself

Small picker problems cost real conversions, and each one has its own fix.

- Too many buttons crowding the page? Switch the control: [Show Shopify Variants as a Dropdown, Not Buttons](/blog/shopify-variant-dropdown-instead-of-buttons).
- Colours appearing in no sensible order? Shopify sorts by creation order, not alphabetically: [Fix Shopify Variant Colors in Random Order](/blog/shopify-variant-color-order).
- Want them alphabetical instead? [Sort Shopify Variant Options Alphabetically](/blog/shopify-sort-variant-options-alphabetically).
- Shopify pre-selects the first variant, which can make a shopper buy a size they never chose. To force a real choice: [Remove the Default Variant Selection in Shopify](/blog/shopify-remove-default-variant-selection).
- If the option label is too faint next to its values: [Bold the Variant Option Name in a Shopify Theme](/blog/shopify-bold-variant-option-name).

## Hiding variants

Three different jobs get called "hiding a variant". They need three different fixes, so it is worth knowing which one you have.

**The variant is sold out.** You want it gone from the picker until stock returns. That is [How to Hide Out of Stock Variants in Shopify](/blog/shopify-hide-out-of-stock-variants).

**The combination never existed.** You sell Small in Black but never in White, so White plus Small should not be selectable at all. Nothing is out of stock here; the combination was simply never created. That is [Hide Unavailable Variants in a Shopify Dropdown](/blog/shopify-hide-unavailable-variants).

There is a catch in that second one. The obvious one-line fix breaks the picker on some themes. The post documents the failure and the version that works.

**You want to suspend it.** The variant is in stock, you just do not want to sell it right now, and deleting it would lose the SKU and its history. That is [How to Hide a Variant in Shopify Without Deleting It](/blog/shopify-hide-variant-without-deleting).

## Variants outside the product page

Variants do not only live on the product page.

By default a collection page shows one card per product. If your colours are the reason people buy, that hides your whole range. [How to Show Shopify Variants as Separate Products](/blog/shopify-show-variants-as-separate-products) covers showing each variant as its own card.

If your options depend on each other, so that choosing Leather changes which colours are valid, Shopify has no native rule for that. The workarounds are in [Shopify Dependent (Conditional) Product Options](/blog/shopify-conditional-product-options).

## Theme-specific problems

Variant rendering is theme code, so the same request needs a different answer on each theme. Horizon in particular rebuilt how the media gallery works, and older fixes copied from blog posts often do nothing on it.

- [Horizon: Show Only the Selected Variant's Images](/blog/shopify-horizon-show-only-variant-images) is the Horizon version of the image-filtering job, written for a gallery that re-renders itself.
- [Shopify Craft Theme: Sync Thumbnails to the Variant Picker](/blog/shopify-craft-theme-variant-sync) fixes Craft, where clicking a thumbnail does not update the selected variant.
- [Shopify Quick Add Button Broken on Out-of-Stock Variants](/blog/shopify-quick-add-out-of-stock-variants) is a verified one-line fix for a real Quick Add bug.

## When there are simply too many

Past a certain count, nothing is broken and the page is still unusable. Forty size buttons stack into a wall, and the Add to Cart button ends up below the fold.

That is a layout problem, not a variant problem, and it is handled in [Shopify Too Many Variants? Fix the Tall Product Page](/blog/shopify-too-many-variants-layout).

## What to check when a variant fix does not work

Most of the time the fix is fine and something upstream is not. Work through these first.

**Check your theme.** Nearly every variant fix is theme code. A snippet written for Dawn will not work on Horizon, because Horizon renders the picker with web components. Find your theme name under Online Store, then use the guide written for it.

**Check whether the variant exists.** Hiding an out-of-stock variant and hiding a combination that was never created are different jobs. Applying the wrong one looks like a broken fix.

**Check the option, not the variant.** Sorting and naming problems usually live on the option (Color), not on the individual variants. Editing variants when the option is the issue changes nothing.

**Check for a second app.** If a variant app is already rewriting the picker, your theme edit and the app will fight. Turn the app off and retest before assuming your code is wrong.

**Check on a duplicate theme.** Always. Duplicate the live theme, make the change on the copy, preview it, and publish only when it works. Every fix linked from this page assumes you are working on a copy.

## Terms people mix up

**Product vs variant.** The product is the t-shirt. The variant is Small Black. Stock, price and SKU live on the variant.

**Option vs variant.** The option is Size. The variant is the actual combination Shopify builds from all your options. You edit options to change the choices, and variants to change price or stock.

**Unavailable vs out of stock.** Out of stock means the variant exists and has zero inventory. Unavailable means the combination was never created. Shopify treats them differently and so should your fix.

**Hidden vs deleted.** Deleting a variant loses its SKU, its inventory history and any orders reporting tied to it. Hiding keeps all of that. If you might sell it again, hide it.

**Variant image vs product image.** Every image belongs to the product. Assigning one to a variant only tells the theme which to show first. That is why unassigned images still appear in the gallery.

## Do you need an app for this?

Often not, and it is worth checking before you install anything.

Shopify has moved a lot of variant work into the platform itself. Colour swatches are native through metaobjects now. Image-per-variant is native. Sorting and hiding are usually a few lines in the theme.

Every fix linked from this page is a theme edit or a setting. None of them needs a paid app.

An app earns its place when you need something Shopify genuinely cannot do. Real examples: more than three options, per-variant rules that change which options are valid, or a picker rebuilt around inventory in real time. That is a different class of problem from "my swatches are in the wrong order".

The order I would work in is simple. Check whether Shopify does it natively. If not, try the theme edit. Only then look at an app, and read its reviews for your specific theme before installing, because variant apps that rewrite the picker are the ones most likely to break on a theme update.

One more thing worth saying plainly. Install one variant app at a time. Two apps both rewriting the same picker is the single most common cause of a variant page that worked yesterday and does not today.

## Where to start

If you are setting variants up for the first time, read the [variant limit](/blog/shopify-variant-limit) page before you build your options. Choosing badly at the start is the expensive mistake, because restructuring options later means recreating variants and losing their history.

If something is already broken, find the job above that matches yours and go straight to it. Each one was answered for a real merchant on the Shopify Community and reproduced on a test store before it was written down.


---

---
title: "Shopify Video Carousel: Add a Scrolling Video Section"
description: Most Shopify themes have no video carousel, so a row of short customer videos means a paid app. Here is a free custom section that gives you a scrolling video row with captions, arrows and tap-to-play. Tested on Kalles.
---

## The problem: you want a row of short videos, and your theme has no section for it

A merchant asked about this on the Shopify Community. They run the Kalles theme, and they wanted the block you see on a lot of modern product pages: a horizontal row of short vertical videos, each with a caption, that a shopper can scroll through and tap to play. Think social-style customer clips under a heading like "See what people think".

Their theme has no section for that. Kalles is not unusual here. Most Shopify themes let you drop in a single video, but not a scrolling carousel of them. So the merchant assumed they needed a paid app.

You do not. You can add a video carousel to Shopify for free with one custom section. No app, no Shopify Plus.

I reproduced the request and built the section, then tested it on a Kalles storefront. Here it is running live, a scrolling row of videos with a caption under each and arrows on the sides.

![The video carousel section running on a Kalles storefront](/images/blog/shopify-video-carousel-section/04-result.png)

The rest of this guide is the exact section, how to add it, and how to fill it with your own clips.

## Why themes do not ship a video carousel

It helps to know what a theme actually gives you, because it explains why this needs a small section rather than a setting.

A native Shopify video lives in one of two places. It can be a product media item, shown in the product gallery next to the photos. Or it can be a single video inside a section like a video banner or a rich-text block. Both are one video at a time.

What no standard theme gives you is a **row of many videos** that scrolls sideways, each with its own caption and its own play control. That is a specific layout, and themes leave it out because it is a design choice, not a core feature.

So the gap is not that video is hard on Shopify. It is that the *carousel of videos* layout is missing. That is exactly the kind of thing a custom section is for. If you have never added one, our guide on [creating a Shopify custom section](/blog/shopify-custom-section) covers the basics of how sections and their editor settings work. This article is a ready-made one for the video-carousel case.

## What you are adding

The section below is self-contained. It carries its own styles and its own script, so it drops into any theme without touching the rest of your code.

Each video is a block you add in the theme editor. Per block you set the video, a cover image, and a caption. The section then lays the blocks out in a scrolling row with left and right arrows on desktop, swipe on mobile, and tap-to-play with sound. Playing one clip pauses the others.

Nothing is hardcoded, so you can add or remove videos later and the row just grows or shrinks.

## Step 1: add the section

First you create the section file. This is the one time you touch code, and it is only paste-and-save.

- Go to Online Store, then Themes.
- Next to your theme click the **...** button, then **Edit code**.
- Under **Sections** click **Add a new section**, name it **video-carousel**, delete the sample content it gives you, paste the code below, and Save.

![Edit code, add a new section named video-carousel, paste the code, and Save](/images/blog/shopify-video-carousel-section/01-add-section-code.png)

```liquid
{%- comment -%}
  Video carousel section (UGC style) - self-contained, works on any theme.
  Add via Online Store > Themes > Edit code > Sections > Add a new section.
{%- endcomment -%}

<style>
  #vcar-{{ section.id }} {
    max-width: {{ section.settings.max_width }}px;
    margin: 0 auto;
    padding: {{ section.settings.padding_top }}px 16px {{ section.settings.padding_bottom }}px;
  }
  #vcar-{{ section.id }} .vcar__title {
    text-align: center;
    font-size: {{ section.settings.heading_size }}px;
    letter-spacing: .04em;
    margin: 0 0 24px;
  }
  #vcar-{{ section.id }} .vcar__wrap { position: relative; }
  #vcar-{{ section.id }} .vcar__track {
    list-style: none; margin: 0; padding: 4px;
    display: flex; gap: {{ section.settings.gap }}px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  }
  #vcar-{{ section.id }} .vcar__track::-webkit-scrollbar { display: none; }
  #vcar-{{ section.id }} .vcar__track { scrollbar-width: none; }
  #vcar-{{ section.id }} .vcar__item {
    flex: 0 0 {{ section.settings.card_width }}px;
    scroll-snap-align: start;
  }
  #vcar-{{ section.id }} .vcar__video {
    position: relative; width: 100%;
    aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
    background: #f2f2f2; cursor: pointer;
  }
  #vcar-{{ section.id }} .vcar__video video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  #vcar-{{ section.id }} .vcar__play {
    position: absolute; inset: 0; margin: auto;
    width: 54px; height: 54px; border: none; border-radius: 50%;
    background: rgba(0,0,0,.55); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .2s;
  }
  #vcar-{{ section.id }} .vcar__play::before {
    content: ""; border-style: solid;
    border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
    margin-left: 3px;
  }
  #vcar-{{ section.id }} .vcar__video.is-playing .vcar__play { opacity: 0; pointer-events: none; }
  #vcar-{{ section.id }} .vcar__caption {
    text-align: center; margin: 12px 4px 0;
    font-size: 15px; font-weight: 600;
  }
  #vcar-{{ section.id }} .vcar__arrow {
    position: absolute; top: calc(50% - 22px); transform: translateY(-50%);
    z-index: 2; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid #e3e3e3; background: #fff; color: #111;
    font-size: 22px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    display: flex; align-items: center; justify-content: center;
  }
  #vcar-{{ section.id }} .vcar__arrow--prev { left: -6px; }
  #vcar-{{ section.id }} .vcar__arrow--next { right: -6px; }
  #vcar-{{ section.id }} .vcar__arrow[disabled] { opacity: 0; pointer-events: none; }
  @media (max-width: 749px) {
    #vcar-{{ section.id }} .vcar__item { flex-basis: {{ section.settings.card_width_mobile }}px; }
    #vcar-{{ section.id }} .vcar__arrow { display: none; }
  }
</style>

<div id="vcar-{{ section.id }}" class="vcar">
  {%- if section.settings.heading != blank -%}
    <h2 class="vcar__title">{{ section.settings.heading }}</h2>
  {%- endif -%}

  <div class="vcar__wrap">
    <button class="vcar__arrow vcar__arrow--prev" type="button" aria-label="Previous">&#8249;</button>

    <ul class="vcar__track">
      {%- for block in section.blocks -%}
        <li class="vcar__item" {{ block.shopify_attributes }}>
          <div class="vcar__video">
            {%- assign v = block.settings.video -%}
            {%- if v != blank -%}
              <video playsinline muted loop preload="none"
                {%- if block.settings.poster != blank %} poster="{{ block.settings.poster | image_url: width: 500 }}"{% endif -%}>
                {%- for src in v.sources -%}
                  {%- if src.format == 'mp4' -%}<source src="{{ src.url }}" type="video/mp4">{%- endif -%}
                {%- endfor -%}
              </video>
              <button class="vcar__play" type="button" aria-label="Play"></button>
            {%- elsif block.settings.mp4_url != blank -%}
              <video playsinline muted loop preload="none"
                {%- if block.settings.poster != blank %} poster="{{ block.settings.poster | image_url: width: 500 }}"{% endif -%}>
                <source src="{{ block.settings.mp4_url }}" type="video/mp4">
              </video>
              <button class="vcar__play" type="button" aria-label="Play"></button>
            {%- else -%}
              {{ 'lifestyle-1' | placeholder_svg_tag: 'vcar__placeholder' }}
            {%- endif -%}
          </div>
          {%- if block.settings.caption != blank -%}
            <p class="vcar__caption">{{ block.settings.caption }}</p>
          {%- endif -%}
        </li>
      {%- endfor -%}
    </ul>

    <button class="vcar__arrow vcar__arrow--next" type="button" aria-label="Next">&#8250;</button>
  </div>
</div>

<script>
(function () {
  var root = document.getElementById('vcar-{{ section.id }}');
  if (!root) return;
  var track = root.querySelector('.vcar__track');
  var prev  = root.querySelector('.vcar__arrow--prev');
  var next  = root.querySelector('.vcar__arrow--next');

  function step() { return Math.max(track.clientWidth * 0.85, 200); }
  function update() {
    var max = track.scrollWidth - track.clientWidth - 2;
    prev.disabled = track.scrollLeft <= 2;
    next.disabled = track.scrollLeft >= max;
  }
  prev.addEventListener('click', function () { track.scrollBy({ left: -step(), behavior: 'smooth' }); });
  next.addEventListener('click', function () { track.scrollBy({ left:  step(), behavior: 'smooth' }); });
  track.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update);
  update();

  // Tap a card to play (with sound); tap again to pause. Only one plays at a time.
  root.querySelectorAll('.vcar__video').forEach(function (card) {
    var vid = card.querySelector('video');
    if (!vid) return;
    card.addEventListener('click', function () {
      if (vid.paused) {
        root.querySelectorAll('.vcar__video video').forEach(function (o) {
          if (o !== vid) { o.pause(); o.closest('.vcar__video').classList.remove('is-playing'); }
        });
        vid.muted = false;
        vid.play();
        card.classList.add('is-playing');
      } else {
        vid.pause();
        card.classList.remove('is-playing');
      }
    });
  });
})();
</script>

{% schema %}
{
  "name": "Video carousel",
  "tag": "section",
  "class": "section-video-carousel",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "SEE WHAT PEOPLE THINK!" },
    { "type": "range", "id": "heading_size", "min": 16, "max": 48, "step": 1, "unit": "px", "label": "Heading size", "default": 26 },
    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "card_width", "min": 140, "max": 320, "step": 10, "unit": "px", "label": "Card width (desktop)", "default": 220 },
    { "type": "range", "id": "card_width_mobile", "min": 120, "max": 260, "step": 10, "unit": "px", "label": "Card width (mobile)", "default": 150 },
    { "type": "range", "id": "gap", "min": 8, "max": 40, "step": 2, "unit": "px", "label": "Gap between cards", "default": 16 },
    { "type": "range", "id": "max_width", "min": 600, "max": 1600, "step": 20, "unit": "px", "label": "Section max width", "default": 1200 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Padding top", "default": 40 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Padding bottom", "default": 40 }
  ],
  "blocks": [
    {
      "type": "video_item",
      "name": "Video",
      "settings": [
        { "type": "video", "id": "video", "label": "Video (upload)" },
        { "type": "text", "id": "mp4_url", "label": "or paste an MP4 URL", "info": "Use this only if you are hosting the video elsewhere." },
        { "type": "image_picker", "id": "poster", "label": "Cover image (poster)" },
        { "type": "text", "id": "caption", "label": "Caption", "default": "Cookware that lasts" }
      ]
    }
  ],
  "max_blocks": 16,
  "presets": [
    {
      "name": "Video carousel",
      "blocks": [
        { "type": "video_item" },
        { "type": "video_item" },
        { "type": "video_item" },
        { "type": "video_item" }
      ]
    }
  ]
}
{% endschema %}
```

## Step 2: add your videos

Now you fill it in from the normal theme editor, no code.

- Go back to **Customize**.
- The **Video carousel** section is now in the section list. Drag it to where you want it on the page.

![The Video carousel section now shows in the theme editor](/images/blog/shopify-video-carousel-section/02-add-section.png)

- Open the section and click **Add block**, choose **Video**, once per clip.
- In each block, upload the video, pick a cover image, and write the caption.

![Add a Video block per clip: upload the video, set a cover image and a caption](/images/blog/shopify-video-carousel-section/03-add-videos.png)

That is the whole setup. Save, and the row is live.

## How to add a single video to Shopify, if that is all you need

Not every store needs a carousel. If you just want one video somewhere, you do not need the section above.

To add a video to a product, open the product in your admin, go to the Media area, and upload the video the same way you upload a photo. It then appears in the product gallery.

To add a video to a page or the homepage, most themes have a video section or a video block you can add from the theme editor. Look for "Video" in the Add section or Add block list.

The carousel section is only for the case the native options miss: several videos in a row that a shopper scrolls through.

## Autoplay, sound and the play button

Two questions always come up with video on Shopify, so here is how this section handles them.

By default each clip is muted and shows a play button. A shopper taps to play, and that is when sound turns on. This is deliberate. Browsers block autoplay with sound, and a wall of clips all playing at once is noise. Tap-to-play keeps it calm and lets the shopper choose.

If instead you want a product video that autoplays and loops muted, with no play button, that is a different behavior and a different setup. We cover it in [Shopify product video autoplay](/blog/shopify-product-video-autoplay). The short version is that autoplay only works when the video is muted.

## Where to host the videos

Upload the clips straight into Shopify. When you add a Video block, the uploader stores the file on Shopify's own video hosting, and the section reads it from there. That is the simplest path and it keeps everything in your admin.

The section also has an "or paste an MP4 URL" field for the rare case where you host a clip somewhere else and want to point at it. Most stores never need that. Uploading in the editor is the normal way.

Keep the clips short and vertical. The row is designed for portrait cards, the same shape as social videos, so a 9:16 clip fits without cropping.

## Does it work on mobile?

Yes. On desktop you get the left and right arrows. On mobile the arrows hide and the row becomes a swipe, which is what shoppers expect on a phone.

The card width is a setting, with a separate value for mobile, so you can show more or fewer cards per screen on each. The default fits neatly on both.

## If the videos do not show

A few things to check if the row looks empty or broken.

- **The block has no video.** Each Video block needs either an uploaded video or an MP4 URL. An empty block shows a placeholder.
- **The video is still processing.** Shopify takes a minute to process a freshly uploaded video. Give it a moment and refresh.
- **You pasted only part of the code.** The section needs the whole block, including the script at the bottom. That script is what makes the arrows scroll and the tap-to-play work.
- **Nothing plays with sound on the first tap.** Some browsers need a second tap after a page load before they allow sound. That is a browser rule, not the section.

## Will a video carousel slow my store down?

This is a fair worry, because video files are heavy and speed affects both shoppers and rankings.

The section is built to avoid that. Each clip is set to load only when needed rather than all at once, so the page does not try to download every video the moment it opens. A shopper who never scrolls to the row never pays for it.

The cover image you set per block matters here too. It is what shows before a clip is tapped, so a light, well-compressed cover keeps the row looking sharp without pulling the full video down first.

Keep the clips short, a few seconds each, and trimmed to the moment that matters. Short vertical clips are small, and small is fast. If you have very long videos, host the full version elsewhere and use short teasers in the row.

## Can I use YouTube, TikTok or Vimeo videos?

The section plays your own uploaded clips, or an MP4 file you host. It does not embed a YouTube or TikTok player, and that is on purpose.

Embedded players load a lot of third-party code, add their own branding and controls, and often show related videos you do not want next to your product. For a clean product-page row, self-hosted clips look far better and stay fully yours.

If your videos currently live on TikTok or Instagram, download your own clip and upload it into the Video block. It plays inline, on brand, with the caption and tap-to-play the section gives it. That is almost always the look merchants are actually after when they point at a reference store.

## Video carousel, product video, and video banner are different things

People mix these up, and the confusion is usually why they cannot find the right setting.

A **product video** is a single clip in the product gallery, sitting next to the photos. One per media slot.

A **video banner** is a single background or feature video in a section, usually one wide clip.

A **video carousel** is the row of many clips this section adds, each its own card with a caption, scrolling sideways. No standard theme ships this, which is why it needs the section above.

Once you see them as three separate things, it is clear which one you want. For the social-style row of customer clips, the free section here is the whole answer, on Kalles or any other theme.


---

# PinFlow — The Ultimate 100% Automated Pin Generator for Shopify

> PinFlow helps Shopify merchants manage their Pinterest presence, design professional pins, and maintain a consistent posting schedule. Approved by Pinterest.

## Features

### AI Bulk Generation & Prompt Control
Instantly create hundreds of unique pins with customizable AI prompts to dictate tone, style, and messaging. Generate, design, and schedule directly from your Shopify products.

### Global Multi-Language Support
Automatically generate pin titles, descriptions, and on-image text in multiple languages to reach international buyers. Use AI to create SEO-friendly titles.

### Complete Brand Customization
Apply your brand's exact look with a massive library of premium templates, curated color palettes, and 50+ fonts. Ensure every pin matches your store's vibe.

### 100% Auto-Posting & Smart Sync
Hands-free scheduling that automatically maps products to relevant boards and posts 24/7.

### Organic "Floating" Schedule
Randomize posting times, days, and frequencies to mimic human curation and stay compliant with anti-spam rules.

## How It Works
1. **Connect Store** — Securely sync your Shopify product catalog with one click.
2. **Bulk Generate Pins** — AI instantly generates thousands of unique pins from your product catalog.
3. **100% Auto-Posting** — Schedule months of content in one click. Auto-poster works 24/7.

## Pricing
PinFlow is **free**. There is one plan, it costs $0, and it includes everything.

| Plan | Pins/day  | Monthly | Yearly |
|------|-----------|---------|--------|
| Free | Unlimited | $0      | $0     |

No trial to expire and no credit card required. The free plan includes: Smart Scheduling Engine, Full Pinterest Automation, AI-Generated SEO Titles & Descriptions, Global Pin Localization, Custom Brand Colors & Templates, automatic board matching, and email support.


---

---
title: "How to Post on Pinterest Without Getting Banned"
description: Pinterest wants a pin every day, but a 50 product store runs dry in weeks. Here is what Pinterest actually flags when you repeat, and how to repeat safely.
---

## Watch the walkthrough

[https://www.youtube.com/watch?v=BW6_rbLuhtg](https://www.youtube.com/watch?v=BW6_rbLuhtg)

Ten minutes on the whole problem: why a small catalogue forces you to repeat,
what Pinterest treats as spam, and the settings in PinFlow that handle each one.

## Why a small catalogue forces you to repeat

Pinterest rewards consistency. It wants something new from you every day, and an
account that posts daily beats one that posts thirty pins on a Sunday and nothing
for a fortnight.

That is easy advice to give and hard to follow with a real Shopify store. If you
have 50 products and you post one pin a day, you are out of products in 50 days.
At five pins a day you are out in ten.

Put a year on it and the arithmetic gets blunt. Five pins a day is 1,825 pins in
twelve months. Spread across 50 products, that is **36 pins pointing at every
single product page**.

So the question was never whether to repeat. You have no choice. The question is
how to repeat without Pinterest minding.

![Fifty products, 1,825 pins a year at five a day, and 36 pins needed per product](/images/help/avoid-pinterest-ban/dia-maths.png)

## Can Pinterest ban you for repeating pins?

Not for repeating the product. Pinterest has a name for a new image on a link you
have used before. It calls it a **fresh pin**, and it wants them.

The same link is fine. What is not fine is the same picture. Post a byte for byte
copy of an image you have already posted and Pinterest quietly stops showing it,
because it de-duplicates on the image itself.

![The same pin posted three times, each copy fainter than the last, because nobody is shown the repeats](/images/help/avoid-pinterest-ban/dia-same-picture.png)

There are three things that actually get an account throttled, and posting a lot
is not one of them:

- **The picture.** The same image again, even weeks later.
- **The rhythm.** A posting pattern no person could keep: same count every day,
  same window, same gaps.
- **The links.** A brand new domain that starts firing out a hundred outbound
  links in week one.

The rest of this article takes them in that order.

## Change the picture, not the product

A repeat only reads as a repeat when it looks the same. Change any one of these
and it counts as a new pin:

- A different layout or crop of the same photo
- A different colour behind the same product
- A different headline, and that means different words, not just a different font
- A different description

The description matters most. It is the part Pinterest actually reads, so rewrite
it rather than pasting the old one.

![Three pins for the same link with different layouts and colours, all counting as new](/images/help/avoid-pinterest-ban/dia-new-picture.png)

If you are doing this by hand, that is the work: build several templates, several
colour treatments, and write fresh copy each time. PinFlow does it for you, which
is the next section.

## Do not post like a clock

This is the one most scheduling tools get wrong, and it is the easiest signal to
spot.

Ten pins a day. Every day. Always nine in the morning to six in the evening.
Always the same gap between pins. No person posts like that. Scripts do, and an
account that looks scripted is the one that picks up a **Pinterest shadow ban**,
where your pins still publish but almost nobody is shown them.

What a real account looks like is messier. Some days six pins, some days three.
Times that drift. Gaps that are never identical. Same volume across the week,
completely different shape.

![Five days from a typical scheduler, five pins at identical times each day, next to five days from a real account with counts of seven, six, five, three and three at varying times](/images/help/avoid-pinterest-ban/dia-clock.png)

## Go slow with links on a new store

Pinterest keeps a trust level for every website, and a domain nobody has ever
clicked starts at zero.

If your store is new, do not point a hundred pins at it in your first fortnight.
That pattern is indistinguishable from affiliate spam, because it is the same
pattern. Build up presence first, then start sending traffic.

![Outbound links against time: a red line jumping to full volume in week one, and a green line building up gradually to week twelve](/images/help/avoid-pinterest-ban/dia-links.png)

## How PinFlow keeps every pin different

Templates, colour palettes and product images are all picked per pin, so two pins
for the same product months apart share nothing but the link.

![The Templates panel in Pin Studio, with Minimalist, Basic, Multi-image and More styles groups and their counts](/images/help/avoid-pinterest-ban/01-templates.png)

The template sets are grouped by style, and PinFlow rotates through whatever you
have selected rather than working down the list in order. Going in order would put
the same product on days that sit next to each other; stepping through the list
instead means every product still gets used, but never twice in a row.

![Colour palette groups in Pin Studio: Green, Purple, Red and Other, each with a toggle and five palettes](/images/help/avoid-pinterest-ban/02-palettes.png)

Colours work the same way, and they step by a different amount from the templates,
so the two sequences never fall into step with each other.

## How PinFlow varies the schedule

Three layers, all on the [Pin Scheduling page](/help/scheduling).

**The daily count moves.** Set five a day with a range of two and you get somewhere
between three and seven, decided per date rather than per run.

![The pins per day slider set to five, with Humanized Randomization enabled at plus or minus two](/images/help/scheduling/02-pins-per-day.png)

**The window drifts.** Start and end flex independently, so a nine to six window
opens a little earlier one day and later the next.

![Start window flex and end window flex fields, with the resulting example window shown underneath](/images/help/scheduling/05-humanized.png)

**Each pin is nudged.** The day is cut into equal slices with a pin in the middle
of each, then floating minutes move it by up to fifteen minutes either way, so the
gaps stop being identical.

Stack all three and no two days come out the same shape.

![One day in the PinFlow calendar showing six pins and their publish times, none on a round number](/images/help/avoid-pinterest-ban/05-calendar.png)

Look at the times along the bottom. 8:08 PM, 6:30 PM, 4:33 PM, 2:53 PM. Not one
round number and not one equal gap.

## Why the randomness is seeded, not truly random

None of that variation is actually random.

Every date is turned into a number, and that number decides all three layers. Same
date in, same schedule out. Regenerate a batch and the days you already reviewed
come back with the same counts and the same times.

![The same date fed through the day number on two separate runs, producing identical times both times](/images/help/avoid-pinterest-ban/dia-seeded.png)

That is deliberate. If it were truly random, every regeneration would reshuffle
your whole calendar and move pins you had already approved.

## URL limits: a hard cap per product

Two caps live on [Settings, on the URL Limits tab](/help/settings#url-limits), and
both are switched off when you install.

![The URL Limits tab, showing the lifetime and monthly pin limit checkboxes and the publish without visit link option](/images/help/settings/05-url-limits.png)

**Lifetime** is absolute. Once a product reaches it, PinFlow never creates another
pin for that product.

**Monthly** resets on the first. Four a month means four in September, then four
more in October. If you only turn on one of these, make it the monthly one.

One catch worth knowing: a lifetime cap is also a countdown on your catalogue.
Fifty products with a cap of twenty each, at five pins a day, is 200 days of
content and then it stops. PinFlow runs that sum while you move the slider and
warns you when it drops under a month.

## Publishing without a visit link

Also on the URL Limits tab: **Publish without Visit link**.

![The Publish without Visit link checkbox, for posting pins with no outbound link while a new account builds trust](/images/help/avoid-pinterest-ban/06-no-link.png)

Turn it on and your pins go out as images only, with no outbound link at all. You
build up saves and impressions on a clean account, then switch the link back on
and start sending traffic. Pins you have already published are not affected.

It is a slow play, but if your domain is only a few weeks old it is worth the
first stretch.

## Numbers worth writing down

- **Three to fifteen pins a day.** Being steady beats being loud. Twenty-five a
  day from a new account is worse than five.
- **Leave a few weeks** between pins pointing at the same product page, and never
  reuse the picture.
- **Build up for the first few weeks** on a new domain before you push links hard.

Pinterest publishes no official thresholds, so these are the working conventions
rather than documented limits. They are the ones the settings above are built
around.

## Related

- [How to Post Fresh Pins Consistently With Only 50 Shopify Products](/help/fresh-pins-small-catalog)
- [How Often to Post on Pinterest: Setting Your Schedule](/help/scheduling)
- [The Settings Page: Pinterest, Boards, Autopilot and Limits](/help/settings)


---

---
title: "How to Schedule Pinterest Pins: Review, Edit and Approve"
description: Read the four tabs, edit a pin before it goes out, move it to a different slot, and fill the gaps in your queue.
---

## Watch the walkthrough

[https://www.youtube.com/watch?v=FPl1zVM9emk](https://www.youtube.com/watch?v=FPl1zVM9emk)

Six minutes on the calendar, including the pin editor and filling empty slots.
The written version below covers the same ground with a bit more explanation.

## Nothing publishes without you

The calendar is where every pin PinFlow generates waits for a decision. Nothing
reaches Pinterest until you approve it, so you always see a pin before anyone
else does.

![The PinFlow calendar with pins grouped by day, awaiting approval](/images/help/calendar/00-overview.png)

## The four tabs

**Needs Approval** is where newly generated pins land. This is your review queue
and the tab you will spend nearly all your time on.

**Scheduled** holds pins you have approved. They are waiting on their slot and
will publish on their own. Pins that have already gone out are marked as
published and are no longer editable, since they now exist on Pinterest.

**All** is everything, across every state.

**Rejected** is what you skipped. Rejecting is not deleting, so if you change
your mind, the pin is still here.

## Approve a day at a time

Pins are grouped by the day they are due to post, with a count next to each date,
for example "September 7, 6 pins".

Each day's header has an approve button and a reject button that act on the whole
day. This is the fast path, and it is how the queue is meant to be worked: if a
day's six pins all look fine, approve the day and move on. Only open the
individual ones that look off.

![A day header showing the date and pin count, with the approve and reject buttons for the whole day](/images/help/calendar/02-day-header.png)

You can also approve or reject pins one at a time from their own row, and there
is a control to approve everything at once if you are feeling brave.

> [!TIP]
>
> Skim by day, not by pin. A month of pins at five a day is 150 decisions if you
> take them one at a time, and about 30 if you take them a day at a time.

## Editing a pin before it goes out

Hover a pin and click the pencil to open the editor. Everything about that pin
can be changed here.

**Image Text** is the headline drawn on the pin image itself. Type a longer line
and the font size adjusts to fit, so you do not have to size text by hand.

**Pinterest Title** and **Description** are what appear under the pin on
Pinterest. Both are written for you from the product, and both are worth a glance
because they are what Pinterest reads when deciding who to show the pin to.

**Alt Text** describes the image for Pinterest and for screen readers.

**Outbound URL** is the page that opens when someone clicks the pin. It points at
the product on your store and rarely needs changing.

![The pin editor showing Image Text, Pinterest Title, Description, Alt Text, Outbound URL and Board to Pin](/images/help/calendar/03-pin-details.png)

## Boards are chosen for you

Each pin shows the board it will post to, picked automatically based on how well
the product matches the boards you have.

That matching only works if there is something to match against. With two or
three boards, most pins end up in the same place regardless of what they are.

> [!TIP]
>
> Create more boards on Pinterest, and make them specific. "Things to Wear" and
> "Gift Ideas" give the matcher something to work with in a way that one general
> board never can. You can add boards from PinFlow's Settings, on the
> [Boards tab](/help/settings).

## Image fit and position

**Image fit** is **Cover** or **Contain**.

Choose **Cover**. It stretches the photo to fill the pin, so there is no empty
space. **Contain** fits the whole photo in and leaves blank bands, which looks
unfinished in a feed.

**Image position** decides which part of the photo survives the crop, from top
left through to bottom right, and the preview updates as you change it. The
default of centre works for most product photography. Change it when the subject
of the photo is not in the middle of the frame.

## Palettes, fonts and templates

The pin opens with the palette, font and template it was generated with, taken
from your Pin Studio defaults, and each can be swapped for this pin alone.

![Selected Palettes and the three font slots in the pin editor](/images/help/calendar/04-design.png)

The template is the one worth checking. Templates lay their design over the
product photo in different places, so on some products a template will sit right
over the thing you are selling. If a pin looks wrong, try two or three other
templates and pick the one that leaves the product visible.

![Greyed-out multi-image templates with a tooltip explaining the product has only one image](/images/help/calendar/05-templates-disabled.png)

> [!NOTE]
>
> Some templates will be greyed out with a tooltip explaining why. Multi-image
> templates need a product with three or four photos, so on a product with a
> single photo only the single-image templates are available. If you want those
> layouts, add more photos to the product in Shopify.

## Moving a pin to another slot

At the bottom of the editor is a date picker. Choose a date, then one of the time
slots on it.

Dates that are already full show as disabled, and so do dates in the past. If
everything looks greyed out, page forward until you reach dates with room.

Saving keeps your edits, approves the pin, and moves it to **Scheduled** at the
slot you chose.

## Filling empty slots

Reject a few pins and you leave holes in the schedule: slots that were going to
be filled and now are not.

When PinFlow spots them, a banner appears telling you how many empty slots you
have and between which dates. **Fill Empty Slots** generates exactly enough new
pins to cover them, and tells you which dates they landed on.

![The empty slots banner with the Fill Empty Slots button](/images/help/calendar/06-fill-empty-slots.png)

This is the tidy way to reject freely. Skip anything you do not like, then fill
the gaps in one click rather than losing posting days.

If the queue is thin further out rather than patchy, that is a job for the bulk
generator instead: see
[Settings, on the Status tab](/help/settings#status), which builds a fresh batch
out to a date you pick.

## Related

- [Pin Studio: Design Your Pinterest Pins](/help/pin-studio) for changing the
  templates and colours that every pin is generated with.
- [Setting Your Pinterest Posting Schedule](/help/scheduling) for how many pins a
  day and at what times.
- [How to Post Fresh Pins Consistently With Only 50 Shopify Products](/help/fresh-pins-small-catalog)
  for keeping the queue full from a small catalog.


---

---
title: How to Post Fresh Pins Consistently With Only 50 Shopify Products
description: Turn a small Shopify catalog into a month of different Pinterest pins, then review and approve them before they publish.
---

## Why a small catalog runs dry on Pinterest

Pinterest rewards fresh pins. A pin you have never posted before gets shown to
more people than the same image pinned again, which is why accounts that post
something new most days keep growing and accounts that repost the same handful
of images stall.

That is awkward if you sell 50 to 100 products. Pin each product once and you
have 50 to 100 pins, which at four or five a day is gone in under three weeks.
Most merchants hit that wall a month or two in, decide Pinterest "stopped
working", and quietly stop posting.

The way out is not more products. It is more **distinct pins per product**. One
product photo, laid out in a different template with a different colour palette
and different text, is a different pin as far as Pinterest is concerned. Fifty
products across a handful of templates and palettes becomes several hundred
pins, which is months of daily posting from a catalog you already have.

PinFlow does that generation for you. This guide covers what happens next: how
to review what it made, adjust anything you want to change, and approve it so it
publishes on schedule.

> [!IMPORTANT]
>
> Nothing PinFlow generates reaches Pinterest on its own. Every pin waits in a
> review queue until you approve it, so you always see a pin before it is
> public.

## Step 1: Open the review queue

Open **Calendar** in PinFlow. Pins are grouped into four tabs.

**Needs Approval** is where every newly generated pin lands. **Scheduled** holds
the ones you have approved and are waiting on their slot. **All** is everything,
and **Rejected** is what you skipped.

![The All Pins tabs in PinFlow, with Needs Approval highlighted as the review queue](/images/help/fresh-pins-small-catalog/01-review-queue.png)

If you see a banner saying you have empty slots between two dates, **Fill Empty
Slots** generates pins to cover them.

## Step 2: Read a day at a time

Pins are grouped by the day they are due to post, with a count next to each date.

Each pin shows the board it will post to and the exact time it goes out, both
chosen for you. You can change either from this screen without opening anything.
The green and red buttons on the day's header approve or reject that whole day
in one click.

![A day of pending pins showing the board dropdown, scheduled time, hover pencil, and per-day approve and reject buttons](/images/help/fresh-pins-small-catalog/02-pin-row.png)

> [!TIP]
>
> Skim by day rather than by pin. If a day's six pins all look right, approve the
> whole day and move on. Only open the individual pins that look off.

## Step 3: Check the words

Hover a pin and click the pencil to open it. The **Pin Details** side holds
everything Pinterest will read.

- **Image Text** is the headline drawn onto the pin itself.
- **Pinterest Title** and **Description** are what appear under the pin.
- **Alt Text** describes the image for Pinterest and for screen readers.
- **Outbound URL** is the product page on your store that the pin links to.
- **Board to Pin** is which of your boards it posts to.

All of it is written for you from the product, and all of it is editable. Click
any box and type.

![The Pin Details panel with title, description, alt text, outbound URL and board fields](/images/help/fresh-pins-small-catalog/03-pin-details.png)

If you have a particular angle in mind for a product, the **title** is the
quickest field to adjust before approving. Otherwise leave it as generated and
move on.

## Step 4: Change the look

This is where a small catalog turns into a lot of pins. The same product,
restyled, is a fresh pin.

- **Selected Palettes** are pulled from the colours in your own product photo,
  so a recolour still looks like your brand. Pick a different one and the whole
  pin re-renders.
- **Fonts** has three slots: main, secondary and accent.
- **Templates** are grouped into Basic, Minimalist, Multi-image and More styles.

![The pin editor showing colour palettes, font slots and the template picker](/images/help/fresh-pins-small-catalog/04-design.png)

**Multi-image** templates lay several photos of the same product into one pin, so
they need a product with more than one image. If a product only has a single
photo, stay on Basic or Minimalist.

You can also swap which product photo the pin uses. If a jacket is unisex and
the current pin shows a woman wearing it, switching to the photo of a man gives
you a genuinely different pin from the same listing.

## Step 5: Set when it goes out

Scroll to **Schedule** in the editor. Pick a date, then one of your posting
slots. The slots come from the times you set on the Scheduling page, so pins
stay inside the window you chose.

**Save** keeps your edits and approves that pin for that slot. **Reject** drops
it. **Cancel** closes without changing anything.

![The schedule picker in the pin editor with a date, time slots, and the Save button](/images/help/fresh-pins-small-catalog/05-schedule.png)

## Step 6: Watch them publish

Approved pins move to **Scheduled** and post at their slot. Once a pin is live
it is marked **Published** and stops being editable, since it now exists on
Pinterest.

![Published pins in the calendar, each marked with a Published badge](/images/help/fresh-pins-small-catalog/06-published.png)

## How many pins do you actually need?

Work backwards from your posting rate.

| Pins per day | One month | Three months |
| --- | --- | --- |
| 3 | ~90 | ~270 |
| 5 | ~150 | ~450 |
| 8 | ~240 | ~720 |

At five pins a day you need roughly 150 pins to cover a month. A 35-product
catalog run through several templates and palettes produces around that in a
single generation, which is the whole point: you are not limited by how many
products you sell.

> [!TIP]
>
> Start at three to five pins a day rather than eight. A steady trickle looks
> natural, keeps your queue lasting longer, and is easier to review properly. You
> can always turn it up once you see which pins earn clicks.

## If you are running low

Open [Settings, on the Status tab](/help/settings#status). It shows how far ahead
you are already covered, as **Pins are currently generated until** a date.

- **Generate until \<date\> now** builds a fresh batch out to that date in one
  go. This is the control that turns a handful of products into hundreds of
  pins, so it is the one to reach for when the calendar is looking thin.
- **Generate next batch earlier** brings the next automatic batch forward
  instead of waiting for the current one to run down.

**Autopilot**, also in Settings, does this for you on a schedule, building the
next batch before the current one runs out.

If a batch comes back smaller than you expected, the products list is usually too
narrow. Open **Products** and select more of your catalog.

## Related

- [Getting Started with PinFlow](/help/getting-started) for first-time setup.
- [Setting Up PinFlow from the Dashboard](/help/pinflow-setup) for connecting
  Pinterest, picking boards, and setting your schedule.


---

---
title: Getting Started with PinFlow
description: Set up PinFlow and generate your first month of Pinterest pins from your Shopify products.
---

## What PinFlow does

PinFlow takes the products you already sell on Shopify and turns them into
Pinterest pins, then posts those pins for you on a schedule. You pick a look
once, and PinFlow keeps designing and publishing new pins in the background, so
your store stays active on Pinterest without you opening the design tool every
day.

This guide walks you through the setup, one step at a time. It takes about five
minutes. Most steps are already filled in with sensible defaults, so a lot of
the time you are just reviewing and clicking **Save & Continue**.

> [!IMPORTANT]
>
> Every pin links back to the matching product page on your own Shopify store.
> PinFlow does not sync your catalog, add prices, or put shoppable tags on pins.
> Shoppers browse and check out on your store, exactly as they do today.

## Step 1: Open PinFlow and start the setup guide

The first time you open PinFlow (from **Apps** in your Shopify admin sidebar), it
shows a **setup guide** - a short checklist that walks you through everything
below. Each step opens in place: you review it, then click **Save & Continue** to
move to the next one. Most steps are already filled in with good defaults, so you
are mostly just reviewing and continuing.

Once you finish the guide, you will not see it again - PinFlow opens on your home
dashboard instead. You can still change any of these settings any time from the
pages in the left menu: Pin Studio, Calendar, Products, Settings, and Scheduling.

![The PinFlow setup guide you see the first time you open the app](/images/help/getting-started/01-open-pinflow.png)

## Step 2: Connect your Pinterest account

The first step links PinFlow to your Pinterest business account. Click
**Connect Pinterest**. A Pinterest window opens where you log in and allow the
connection, then it brings you back to PinFlow.

![Connecting your Pinterest business account](/images/help/getting-started/02-connect-pinterest.png)

## Step 3: Choose which boards to pin to

Next, pick the Pinterest boards where your pins should go. Tick the boards you
want PinFlow to use. If you are not sure, start with one or two that match what
you sell. You can add or remove boards anytime from the **Settings** page.

![Selecting the Pinterest boards to publish to](/images/help/getting-started/03-select-boards.png)

## Step 4: Set your posting schedule

Now tell PinFlow how often to post. There are four simple settings:

- **Pins per day** - how many pins go out each day.
- **Time window** - the earliest and latest times pins can be posted.
- **Timezone** - so posts land at the right local time.
- **How often new pins are generated** - how frequently PinFlow designs a fresh batch.

The defaults are gentle on purpose, so you do not flood your boards. You can
change all of this later on the **Scheduling** page.

![Setting the daily pin count, time window, and timezone](/images/help/getting-started/04-set-schedule.png)

> [!TIP]
>
> Start small. A few well-spaced pins a day looks natural on Pinterest and is
> easier to keep an eye on while you get comfortable. You can always turn it up.

## Step 5: Turn on Autopilot

Autopilot keeps the pins flowing. When your current batch is running low,
PinFlow automatically creates the next one, so you never run out of scheduled
pins. Review the setting and continue. You can adjust or switch off Autopilot
later from **Settings**.

![Turning on Autopilot so new batches are created automatically](/images/help/getting-started/05-autopilot.png)

## Step 6: Choose your products

Pick which products PinFlow makes pins for. You can select **all** of your
products, or choose a smaller, curated set - for example just your best sellers
or a single collection. You can change this selection anytime on the
**Products** page.

![Choosing which products to create pins for](/images/help/getting-started/06-choose-products.png)

## Step 7: Choose your design and templates

This is where your pins get their look. Pick colors, fonts, and a template.
PinFlow uses your product photos and applies the design on top, so the pins feel
like your brand. Try matching the colors to your store so everything looks
consistent.

![Choosing colors, fonts, and a pin template](/images/help/getting-started/07-design-templates.png)

> [!TIP]
>
> Not happy with how a template looks? It is almost always the template choice,
> not your product. Try a cleaner, single-image template and pick colors that
> match your brand. You can fine-tune any template later in **Pin Studio**.

## Step 8: Generate your first batch

The last step in the guide is **Generate First Batch**. Click the **Generate**
button to create your first month of pins - PinFlow designs them from the
settings you just chose. Then click **Complete Setup & View Calendar** to finish
the guide.

![The Generate First Batch step in the setup guide](/images/help/getting-started/08-generate-batch.png)

> [!NOTE]
>
> When your batch is ready, PinFlow **emails you** to review and approve the
> pins. If you do not see it, check your spam folder.

On the **Calendar** you can review each pin before it goes out, swap a template,
or adjust a pin. Approve the ones you like with the green check, or use
**Approve All**. Once you are happy, PinFlow posts them on the schedule you set.

## That's it

You are set up. When you open PinFlow again, you land on your home dashboard:

![Your PinFlow home dashboard after setup](/images/help/getting-started/10-dashboard.png)

From here PinFlow keeps designing and posting pins in the background. Whenever
you want to make a change:

- **Products** - add or remove products to pin.
- **Pin Studio** - tweak your design, colors, and templates, or create a single pin.
- **Scheduling** - change how often and when pins post.
- **Settings** - manage boards, Autopilot, and your Pinterest connection.
- **Calendar** - review, edit, and approve upcoming pins.

Need a hand? Every page in PinFlow has a **Help** link that brings you to the
guide for that page.


---

---
title: "Pinterest Pin Description Character Limit: What Actually Fits"
description: The Pinterest pin description character limit is 500, and the title limit is 100. Mobile cuts both sooner. Here is what fits and how to make AI respect it.
---

## Watch the walkthrough

[https://www.youtube.com/watch?v=G9n_ZNFEdpI](https://www.youtube.com/watch?v=G9n_ZNFEdpI)

Seven minutes on the whole problem: what the limits are, the two habits that make
a description read as machine written, and the one prompt box in PinFlow that
controls every word.

## What the character limits actually are

A Pinterest pin title holds up to 100 characters and a description up to 500.
Those are the ceilings, and they are not the numbers to aim for.

The pin below uses most of both. On a desktop it looks fine. On a phone the title
is cut with an ellipsis long before 100 characters, so the half you wrote for the
shopper never gets read.

![A live Pinterest pin with a long title and a description ending in fire, pointing hand and pin emoji](/images/help/pin-description-character-limit/01-long-description.png)

Look at the tail of that description. Three emoji and a discount shout in the last
two lines. That, plus em dashes, is what makes a description read as machine
written. Most people cannot type an em dash on a keyboard, so a stray one is a
strong signal that ChatGPT wrote the sentence. PinFlow replaces em dashes with a
colon in the title, the description and the overlay text before you ever see them.

Emoji are not automatically wrong. Some audiences respond to them. The problem is
density, and a wall of them at the end of every description.

## The words on the picture are a separate field

The text baked into the image is not the description. It is its own field, and it
is the one people actually read, because a pin is looked at before it is read.

![A Pinterest pin whose image carries four lines of headline text above the product photo](/images/help/pin-description-character-limit/02-overlay-text.png)

Four lines of headline on the picture leaves very little room for the thing you
are selling. Three to five words is the working range.

## Where the writing gets controlled

Everything above is set in one place: the **AI Generation** panel on the
[Pin Studio page](/help/pin-studio).

![The AI Generation panel in Pin Studio, with the Tone select, the Language select and the prompt box outlined](/images/help/pin-description-character-limit/03-ai-generation.png)

Three controls, and that is the whole surface: a tone preset, a language, and the
prompt itself. Whatever you type in the prompt box becomes the rules the model
writes under.

Two buttons sit under it. **Test Prompt** regenerates the pins in front of you so
you can see the effect immediately. **Reset** puts the preset back, which is the
one to reach for after you have edited a prompt into a mess.

## Five presets, and which one to pick

![The Tone dropdown open, showing Engaging, Informative, Question, Listicle and E-commerce](/images/help/pin-description-character-limit/04-tones.png)

Each preset is a full prompt, not a label. **E-commerce** is the one to use on a
Shopify store, and it is the most heavily tuned:

- Title under 50 characters, so nothing truncates on a phone
- Product type plus one strong descriptor, rather than a sentence
- Two or three sentences in the description, covering a benefit and what makes
  the product different
- Social proof and a call to action
- Three to five hashtags at the end
- A three to five word punchy overlay for the image

**Question** opens with a question, **Listicle** counts items, **Informative**
stays plain and professional, **Engaging** is warm and conversational. They are
worth trying, but on a product catalogue E-commerce is the one that keeps titles
short.

## The four pieces of text on every pin

Open any pin and you get four generated fields.

![The Pin Details panel showing Image Text, Pinterest Title, Description and Alt Text, with the hashtags at the end of the description outlined](/images/help/pin-description-character-limit/05-pin-details.png)

- **Image Text** is the overlay burned into the picture
- **Pinterest Title** is the headline under the pin
- **Description** is the part Pinterest reads for search
- **Alt Text** describes the image, and by default it repeats the description,
  because a description written for search already reads well as alt text

All four are editable. Type over any of them and the preview updates as you
change it, so you can fix a word without regenerating the pin. The outbound URL
and the board sit under them; the board is matched to the product for you.

## Turning hashtags off

The hashtags outlined above come from one line of the prompt. Delete that line, or
replace it with an instruction not to use them, and they stop.

![The same Pin Details panel with no hashtags anywhere in the description or the alt text](/images/help/pin-description-character-limit/06-no-hashtags.png)

Writing `do not include hashtags` is enough. So is `include only one hashtag`. The
prompt is read as instructions, not matched as keywords, so plain English works.

The same trick applies to anything else in the preset. If you do not want a call
to action, say so.

## Changing the words on the picture

The overlay length is a line in the prompt too.

![The prompt asking for a four word punchy title, and a pin whose overlay reads Floral White Top Glow](/images/help/pin-description-character-limit/07-four-words.png)

Change three to four, hit **Test Prompt**, and every pin in the preview comes back
with a four word overlay. That is the fastest way to see whether your product
names fit the space before you commit to a batch.

## Writing in 40 languages

PinFlow generates in 40 languages. If your store sells through Shopify Markets in
a language other than English, set it here and every field follows.

![The Pin Details panel with the image text, title, description and alt text all in French](/images/help/pin-description-character-limit/08-french.png)

That is the same product as the earlier screenshots, with the language set to
French. The overlay on the picture, the title, the description and the alt text
all come back in French together. There is nothing to translate afterwards.

Once the prompt and the language are right, hit **Save**. Every pin generated from
then on uses these settings, including the ones the
[scheduler](/help/scheduling) creates on its own.

## Numbers worth writing down

- **Title: aim for under 50 characters**, not the 100 Pinterest allows. Anything
  longer is at risk of being cut on a phone.
- **Description: two or three sentences.** You have 500 characters. Using all of
  them is not a goal.
- **Overlay text: three to five words.** The picture is the point.
- **Hashtags: three to five, or none.** Both are defensible. What reads badly is
  ten.
- **No em dashes.** PinFlow removes them; if you write your own copy, do the same.

## Related

- [Pin Studio: Design Your Pinterest Pins](/help/pin-studio)
- [How to Post on Pinterest Without Getting Banned](/help/avoid-pinterest-ban)
- [How to Schedule Pinterest Pins: Review, Edit and Approve](/help/calendar)


---

---
title: "Pin Studio: Design Your Pinterest Pins"
description: Set the templates, colours, fonts and AI wording that every generated pin inherits, and build a single pin by hand when you want one.
---

## Watch the walkthrough

[https://www.youtube.com/watch?v=MCR6tm24uuo](https://www.youtube.com/watch?v=MCR6tm24uuo)

Six minutes covering the whole page, including the part most people miss: Pin
Studio is where you set the look, but it is not where you should be making all
your pins.

## What Pin Studio is actually for

Pin Studio does two jobs, and it helps to keep them separate in your head.

**Its main job is setting your defaults.** The templates, colour palette, fonts
and AI wording you choose here are what every pin PinFlow generates in bulk will
use. You are not designing one pin. You are deciding what a few hundred of them
will look like.

**Its second job is making one pin on demand.** If you want a specific product
pinned on a specific date, you can build and schedule it here directly.

The preview on the right is the point of the whole page. It shows real designs on
a real product of yours, so you can see what your defaults produce before you
commit to hundreds of pins in that style.

![Pin Studio with the product picker, AI Generation, and Fonts, Colors and Templates in the left column, and the preview area on the right](/images/help/pin-studio/00-overview.png)

## Step 1: Choose a product to preview with

The **Product** picker at the top of the left column decides which product the
previews are built from. Search for one and select it.

Pick something representative. A product whose photo is busy or oddly cropped is
a better test than your cleanest studio shot, because it shows you which
templates hold up.

![The Select product dialog in Pin Studio, with the search box highlighted and a list of products to tick](/images/help/pin-studio/01-choose-product.png)

## Step 2: Fonts, colours and templates

Open **Fonts, Colors, and Templates**. This section holds the three settings that
decide how a pin looks.

**Fonts.** Choose the typeface used for the text drawn on the pin. The defaults
were picked to be readable at the size Pinterest actually shows a pin, so if you
have no strong brand font, leave them alone.

![The Fonts picker showing Main, Secondary and Accent typeface pairings, with one selected](/images/help/pin-studio/03-fonts.png)

**Colour palette.** Pick the palette that suits your product photography. If your
products are photographed on green, a green palette will sit on top of them
better than a blue one. You can enable several palettes and let PinFlow rotate
through them, or narrow it to one for a tighter look.

![The Color Palette section with Auto-match to product, and the Green palette family switched on](/images/help/pin-studio/02-color-palette.png)

**Templates.** Every template is enabled by default and we suggest keeping it
that way. Each enabled template is another distinct-looking pin you can make from
the same product photo, which is exactly what keeps a small catalog going.

> [!TIP]
>
> More enabled templates and palettes means more variety across your queue. If
> you disable everything except one template, every pin in your calendar will
> look the same, which is the thing Pinterest rewards least.

## Step 3: Tell the AI how to write

Open **AI Generation**. This is what writes the pin titles and descriptions.

**Tone** changes the style of the writing. The options are **Engaging**,
**Informative**, **Question**, **Listicle** and **E-commerce**. For a Shopify
store selling products, **E-commerce** is the one to use. The others suit blog
and content pins better.

**Language** is the language the AI writes in. Set it to whatever your customers
read, not necessarily the language your store admin is in.

![The AI Generation section with the Tone dropdown open on Engaging, Informative, Question, Listicle and E-commerce](/images/help/pin-studio/04-ai-tone.png)

**Your Prompt** is the underlying instruction the tone sets for you. You can edit
it if you want the copy to lean a particular way, but the presets are a fine
starting point.

## Step 4: Shuffle until you like what you see

The preview sidebar shows several designs at once. The shuffle button re-rolls
them, mixing different templates, palettes and product photos.

Shuffle a few times. You are not looking for one perfect pin, you are checking
that the range looks right: that your text is readable on every template, that
the palette does not fight your photography, and that nothing important in the
product photo is being covered by the design.

![A shuffled set of pin previews, the same product laid out in several different templates and palettes](/images/help/pin-studio/05-shuffle.png)

If a particular template keeps covering the part of the product that matters,
that is your signal to disable it back in **Templates**.

## Step 5: Image fit and position

Two settings decide how your product photo sits inside the pin, and they matter
more than they sound.

**Image display** is **Cover** or **Contain**.

- **Cover** fills the whole pin, cropping whatever does not fit. No blank space.
- **Contain** fits the entire photo inside, which usually leaves empty bands at
  the top and bottom.

Use **Cover**. It is the default, and a pin with empty bands looks unfinished in
a Pinterest feed. Anyone who has used Canva will recognise the same trade-off.

![The Images row with the fit dropdown open, showing Contain above Cover](/images/help/pin-studio/06-image-fit.png)

**Image position** decides which part of the photo survives the crop, with the
usual nine positions from top left to bottom right. **Center center** is right
for most product photos. Change it when the subject sits off to one side, for
example a ring photographed in the bottom right corner of the frame.

![The image position dropdown open on the nine crop anchors, from Top Left to Bottom Right](/images/help/pin-studio/07-image-position.png)

## Step 6: Schedule a single pin

To publish one pin from this page, open a preview and use the publish dialog.
Everything about that one pin is editable there.

- **Image Text** is the headline drawn onto the pin itself. Type a longer line
  and the font size shrinks to fit automatically. This is a real difference from
  designing in Canva, where fitting the text is your problem.
- **Title** and **Description** are what Pinterest shows under the pin. Both are
  AI generated and both are editable.
- **Alt Text** describes the image, for Pinterest and for screen readers. It
  defaults to the description.
- **Outbound URL** is the product page the pin links to. It is filled in from the
  product, so leave it alone unless you have a reason.
- **Board** is which of your Pinterest boards it posts to.

Then pick a date and a time slot. Dates that are already full are disabled, so if
everything looks greyed out, page forward until you reach dates with room. Save,
and the pin is scheduled.

![The Schedule step with a month calendar, one date selected, the posting time slots, and the Schedule Pin button](/images/help/pin-studio/08-schedule.png)

> [!NOTE]
>
> If your Pinterest account is new, **Publish without Visit link** in
> Settings under **URL Limits** posts pins without an outbound link. Some people
> use this to build account trust before sending traffic. It is a setting for all
> pins, not just this one.

## Do not build your whole queue this way

One pin at a time is the slow path, and it is not what PinFlow is for.

Once the previews look right, generate a month of pins in one run from
[Settings, on the Status tab](/help/settings#status). That page walks through the
**Generate until \<date\> now** button and what it does. Then review the results
in the [Content Calendar](/help/calendar), where you can edit, approve or reject
each one far faster than building them individually.

> [!IMPORTANT]
>
> Pinterest rewards consistency and volume more than it rewards any single
> perfect pin. Time spent perfecting one design is time not spent posting.
> Set your defaults here, generate in bulk, and skim the results.

## Related

- [The Content Calendar](/help/calendar) for reviewing what bulk generation
  produced.
- [Choosing Which Products Become Pinterest Pins](/help/products) for controlling
  which products these designs get applied to.
- [Setting Your Pinterest Posting Schedule](/help/scheduling) for when the pins
  go out.


---

---
title: Setting Up PinFlow from the Dashboard
description: Configure Pinterest, boards, schedule, autopilot, products, and design from each PinFlow page.
---

## What PinFlow does

PinFlow takes the products you already sell on Shopify and turns them into
Pinterest pins, then posts those pins for you on a schedule. You pick a look
once, and PinFlow keeps designing and publishing new pins in the background, so
your store stays active on Pinterest without you opening the design tool every
day.

This guide sets everything up from PinFlow's own pages - the ones you reach from
the dashboard. If you just installed PinFlow and see the welcome setup guide
instead, follow [Getting Started with PinFlow](/help/getting-started).

> [!IMPORTANT]
>
> Every pin links back to the matching product page on your own Shopify store.
> PinFlow does not sync your catalog, add prices, or put shoppable tags on pins.
> Shoppers browse and check out on your store, exactly as they do today.

## Step 1: Open PinFlow

Open PinFlow from **Apps** in your Shopify admin sidebar. You land on your home
dashboard, with Quick Actions and links to each page along the left: Pin Studio,
Calendar, Products, Settings, and Scheduling. Everything below is reached from
these pages.

![Your PinFlow home dashboard](/images/help/pinflow-setup/01-home.png)

## Step 2: Connect your Pinterest account

Open **Settings** and go to the **Pinterest** tab. Click **Connect Pinterest**.
A Pinterest window opens where you log in and allow the connection, then it
brings you back. Once linked, you will see your account with a green Connected
check.

![Connecting your Pinterest account from Settings](/images/help/pinflow-setup/02-connect-pinterest.png)

## Step 3: Choose which boards to pin to

In **Settings**, open the **Boards** tab. Tick the boards where your pins should
go. If you are not sure, start with one or two that match what you sell. Use
**Sync from Pinterest** to pull in your latest boards.

![Choosing your Pinterest boards](/images/help/pinflow-setup/03-select-boards.png)

## Step 4: Set your posting schedule

Open the **Scheduling** page. Here you set:

- **Pins per day** - how many pins go out each day.
- **Time window** - the earliest and latest times pins can be posted.
- **Timezone** - so posts land at the right local time.

The defaults are gentle on purpose, so you do not flood your boards.

![Setting the daily pin count, time window, and timezone](/images/help/pinflow-setup/04-set-schedule.png)

> [!TIP]
>
> Start small. A few well-spaced pins a day looks natural on Pinterest and is
> easier to keep an eye on while you get comfortable. You can always turn it up.

## Step 5: Turn on Autopilot

In **Settings**, open the **Autopilot** tab. Turn on automatic pin regeneration
so PinFlow builds the next batch before your current one runs out - you never
have to remember to generate again.

![Turning on Autopilot](/images/help/pinflow-setup/05-autopilot.png)

## Step 6: Choose your products

Open the **Products** page. You can use **all** of your products, or tick a
smaller, curated set - for example just your best sellers or a single collection.

![Choosing which products to create pins for](/images/help/pinflow-setup/06-choose-products.png)

## Step 7: Choose your design and templates

Open **Pin Studio**. Pick your fonts, a color palette, and a template. PinFlow
uses your product photos and applies the design on top, so the pins feel like
your brand. Try matching the colors to your store so everything looks consistent.

![Choosing colors, fonts, and a pin template](/images/help/pinflow-setup/07-design-templates.png)

> [!TIP]
>
> Not happy with how a template looks? It is almost always the template choice,
> not your product. Try a cleaner, single-image template and pick colors that
> match your brand.

## Step 8: Generate your first batch

Open **Settings**, stay on the **Status** tab, and click the **Generate** button
to create your first month of pins. Give it a moment and PinFlow designs them
for you.

![Generating your first batch from Settings](/images/help/pinflow-setup/08-generate-batch.png)

> [!NOTE]
>
> When your batch is ready, PinFlow **emails you** to review and approve the
> pins. If you do not see it, check your spam folder.

Open the **Calendar** to see every pin laid out by date. On the **Needs Approval**
tab you can review each pin before it goes out, swap a template, or adjust a pin.
Approve the ones you like with the green check, or use **Approve All**. Once you
are happy, PinFlow posts them on the schedule you set.

![Reviewing your scheduled pins on the Calendar](/images/help/pinflow-setup/09-calendar-review.png)

## That's it

You are set up. From here PinFlow keeps designing and posting pins in the
background. Whenever you want to make a change:

- **Products** - add or remove products to pin.
- **Pin Studio** - tweak your design, colors, and templates, or create a single pin.
- **Scheduling** - change how often and when pins post.
- **Settings** - manage boards, Autopilot, and your Pinterest connection.
- **Calendar** - review, edit, and approve upcoming pins.

Need a hand? Every page in PinFlow has a **Help** link that brings you to the
guide for that page.


---

---
title: Choosing Which Products Become Pinterest Pins
description: Pin your whole catalog, or narrow it to a collection, a tag, what is in stock, or what you added recently.
---

## Watch the walkthrough

[https://www.youtube.com/watch?v=iRUcHCe5nz8](https://www.youtube.com/watch?v=iRUcHCe5nz8)

Two minutes, covering everything on this page. The written version below goes
into a bit more detail on when to use each filter.

## What the Products page decides

PinFlow builds pins out of your Shopify products. The **Products** page is the
one place that decides which products it is allowed to use.

Everything downstream follows from this choice. Pin Studio previews a product
from this set, the [bulk generator](/help/settings#status) draws from this set,
and the pins waiting in your calendar all come from this set. Narrow it and your
queue gets smaller and more focused. Widen it and you get more pins covering more
of your catalog.

![The PinFlow Products page showing the product selection card](/images/help/products/00-overview.png)

## Option 1: use every active product

At the top of the page is a single checkbox, **Use all active products**.

Leave it ticked and PinFlow uses your entire active catalog. New products you add
to Shopify later are picked up automatically, with nothing to change here.

![The Product selection card with Use all active products ticked and a count of selected products](/images/help/products/02-all-products.png)

This is the right default for most stores, and it is what we recommend starting
with. A bigger pool of products means more distinct pins, and Pinterest rewards
posting something new far more than it rewards posting your best product again.

> [!TIP]
>
> If you are not sure, leave this ticked. You can always narrow it later, and
> narrowing does not delete pins that were already generated.

## Option 2: pick the products yourself

Untick **Use all active products** and a product table appears underneath, with
a checkbox on every row. Tick the products you want and leave the rest alone.

The count under the checkbox tells you where you stand, for example
"12 products selected".

![The product table with In stock only ticked and several products selected](/images/help/products/03-pick-products.png)

### Search

The search box at the top of the table matches on product title. Useful when you
know exactly which few products you want and do not want to scroll.

### In stock only

Tick **In stock only** to hide products with no inventory. Worth doing before a
big selection pass. There is no point sending Pinterest traffic to a product page
that cannot be bought, and a sold-out pin still keeps circulating on Pinterest
for months.

### Collection

The **All collections** dropdown filters the table to one Shopify collection.
This is the quickest way to pin a category rather than a whole store: choose the
collection, tick everything in the filtered table, and save.

![The All collections dropdown open, listing the store's Shopify collections](/images/help/products/04-collection.png)

### Tag

The **All tags** dropdown does the same thing with product tags. If you already
tag products for merchandising, that tagging carries over here for free. A
"bestseller" or "evergreen" tag makes a good pinning set.

### Date added

The date filter narrows the table by when a product was added, with presets for
**Last 7 days**, **Last 30 days**, **Last 90 days**, **Last 365 Days** and a
**Custom** range.

![The Select Date Range dialog with presets for the last 7, 30, 90 and 365 days](/images/help/products/05-date-added.png)

Handy for a new-arrivals push: filter to the last 30 days, tick what appears, and
your pins cover only the products you are actively promoting.

> [!NOTE]
>
> These are filters on the table, not a saved rule. They change what you can see
> and tick right now. What gets saved is the specific products you ticked, so a
> product added next month will not join the set on its own. That only happens
> with **Use all active products**.

## Save

Filters change the view. Nothing takes effect until you save.

When your selection differs from what is stored, Shopify's save bar slides in at
the top of the screen. **Save** commits it and **Discard** puts it back.

![The Shopify save bar showing Unsaved changes with Discard and Save buttons](/images/help/products/06-save.png)

From then on, pins are generated only from the products you saved.

## Which option should you choose?

| Your situation | What to pick |
| --- | --- |
| Under a few hundred products | Use all active products |
| Large catalog, only some worth pinning | Pick your own, filter by collection or tag |
| Seasonal or limited-run stock | Pick your own, and revisit when the season turns |
| Testing PinFlow before committing | Pick a handful you know convert |

> [!WARNING]
>
> If you narrow the selection hard, check your queue afterwards. Fewer products
> means fewer possible pins, and a very small set can leave gaps in the calendar.
> The [Content Calendar](/help/calendar) shows you exactly what is scheduled, and
> its **Fill Empty Slots** button covers any dates that came out empty.

## Related

- [Pin Studio: Design Your Pinterest Pins](/help/pin-studio) for how the products
  you picked get turned into pin designs.
- [The Content Calendar](/help/calendar) for reviewing and approving what was
  generated.
- [How to Post Fresh Pins Consistently With Only 50 Shopify Products](/help/fresh-pins-small-catalog)
  if your catalog is small.


---

---
title: "How Often to Post on Pinterest: Setting Your Schedule"
description: How many pins a day, in which time zone, between which hours, and how much randomness so your account never posts on a robotic timetable.
---

## Watch the walkthrough

[https://www.youtube.com/watch?v=9fXpFBezOjA](https://www.youtube.com/watch?v=9fXpFBezOjA)

Under four minutes on every setting on this page, with the preview updating live
as each one changes.

## What this page decides

The **Scheduling** page decides when your approved pins go out: how many a day,
in whose time zone, between which hours, and how much natural variation sits on
top of all of it.

The panel on the right is a live preview of the resulting schedule. Change any
setting on the left and the dates and times on the right rewrite themselves
immediately, so you can see the effect before you save.

![The PinFlow scheduling page with the settings on the left and the live time slot preview on the right](/images/help/scheduling/00-overview.png)

> [!WARNING]
>
> Change these settings before you approve pins, not after. Pins already sitting
> in your queue were given times under the old settings, and changing the rules
> disturbs them. If you have pins waiting, PinFlow warns you at the top of the
> page with a count. Reject those first, change the settings, then generate
> again.

## Pins per day

The slider at the top sets your base number of pins a day. Raise it and the
preview immediately shows more pins on each date. Lower it and the days thin out.

![The warning banner about pins already in the queue, the pins per day slider, and the Humanized Randomization control](/images/help/scheduling/02-pins-per-day.png)

Three to five a day is a sensible place to start. It is enough to look active,
it makes your queue last much longer, and it is a realistic amount to actually
review. You can always turn it up once you can see which pins earn clicks.

> [!NOTE]
>
> The slider goes up to 50 pins a day. If you need more than that, ask us in chat
> or at contact@getpinflow.com and we will raise it for your store.

## Vary the daily count

Underneath is **Humanized Randomization**, which varies how many pins go out each
day rather than posting the same number every single day.

At five pins a day with a variation of plus or minus 2, you get somewhere between
three and seven pins on any given day. Some days four, some days six. Over a week
it averages out to what you asked for, but no two days look identical.

Real accounts do not post exactly five things every day forever. This is what
stops yours from looking like it does.

The default of plus or minus 2 is a good setting for most stores. Leave it.

## Your customers' time zone

**Your Customers' Timezone** is the time zone every slot on this page is
expressed in.

Set it to where your customers are, not where you are. A store selling to the US
that schedules in Indian time will post at the wrong end of the day for everyone
who might buy. If most of your traffic is American, America/New_York is a
reasonable default.

![The Your Customers' Timezone picker with the time zone list open](/images/help/scheduling/03-timezone.png)

This one catches people out, so check it carefully. Every time shown on this page
and in your calendar is in the zone you pick here.

## The posting window

**Scheduling: from ... to ...** sets the earliest and latest a pin can go out.
Every slot lands somewhere between the two.

Set it to, say, 5:30 AM and 8:30 PM and no pin will ever be scheduled outside
that range. The range is in your customers' time zone, so it means the hours your
customers are awake, not yours.

![The scheduling window slider, showing the earliest and latest a pin can post](/images/help/scheduling/04-window.png)

## Humanized randomization on the times

Fixed times are the clearest signal that an account is automated. Something
posting at exactly 8:00 AM, 12:00 PM and 6:00 PM every day for a month is
obviously not a person.

**Humanized randomization** shifts the start and end of your window so the times
move around. Instead of the same three times daily you get 6:58 AM one day, 7:30
AM the next, 8:00 AM after that.

Open the section to see the flex controls for the start and end of the window.
The defaults add a sensible amount of drift.

![Start and end window flex in minutes, each showing the example window it produces](/images/help/scheduling/05-humanized.png)

## Floating minutes

**Use floating minutes** adds a small random offset to each individual slot, by
default plus or minus 5 minutes. You can tune it between 0 and 15.

![The Use floating minutes checkbox and the slider setting how many minutes of drift to add](/images/help/scheduling/06-floating-minutes.png)

This is the fine-grained version of the same idea. The window flex moves the
whole day around, floating minutes nudges each pin within it.

We suggest keeping the defaults. If you are posting a high volume, 40 to 70 pins
a day, increasing the randomization helps keep the times from clustering, because
there are far more pins competing for the same window.

## Save, then generate

None of this affects anything until you save. Shopify's save bar appears at the
top of the screen as soon as your settings differ from what is stored, with
**Save** and **Discard**.

Save first, then generate your pins so the new schedule is the one they are built
against. Generation happens in
[Settings, on the Status tab](/help/settings#status): **Generate until \<date\>
now** builds the whole batch in one run.

## Related

- [The Content Calendar](/help/calendar) for approving the pins these slots get
  filled with.
- [The Settings Page](/help/settings#status) for generating a batch of pins and
  for Autopilot.
- [Pin Studio: Design Your Pinterest Pins](/help/pin-studio) for what the pins
  look like.


---

---
title: "The Settings Page: Pinterest, Boards, Autopilot and Limits"
description: Connect Pinterest, choose boards, keep the queue topped up, set URL limits for a new account, and pause everything when you need to.
---

## Watch the walkthrough

[https://www.youtube.com/watch?v=Zj3ZutLkdow](https://www.youtube.com/watch?v=Zj3ZutLkdow)

Under two minutes on the whole settings page. The tabs have been reorganised a
little since it was recorded, so where the video and this article disagree, trust
the article.

## Six tabs

Settings is the control centre. It has six tabs, and this article walks through
them in order: **Status**, **Pinterest**, **Boards**, **Autopilot**,
**URL Limits** and **Plan**.

## Status

The Status tab is where you generate pins and where you stop everything.

**Pins are currently generated until** a date, at the top, tells you how far
ahead your queue is covered. This is the number to check whenever you wonder
whether PinFlow is still working.

Two buttons sit under it.

- **Generate until \<date\> now** builds a batch out to that date in one run.
  This is the bulk generator, and it is the fast way to fill a month of calendar
  in one go rather than making pins one at a time in Pin Studio.
- **Generate next batch earlier** brings the next automatic batch forward instead
  of waiting for the current one to run down.

![The Status tab showing how far ahead pins are generated, with the Generate until button](/images/help/settings/01-generate.png)

### Pausing everything

Also on the Status tab is **Pause Pins Upload**, a global stop. Use it if
something looks wrong, if your Pinterest account is behaving oddly, or if you
just want to stop posting for a while. **Resume Upload** starts it again.

![The Pause Pins Upload card with the Pause Upload button and a note on what happens to missed pins](/images/help/settings/07-pause.png)

> [!IMPORTANT]
>
> While you are paused, pins whose scheduled time passes are marked as missed and
> are not published when you resume. That is deliberate. Without it, resuming
> after a week off would dump a week of pins onto Pinterest at once, which is
> exactly the behaviour that gets accounts flagged.

## Pinterest

This tab is the connection to your Pinterest account.

![The Settings tabs, with the Pinterest tab open and the account connected](/images/help/settings/02-pinterest.png)

**Connect Pinterest Account** starts the authorisation, and
**Disconnect Pinterest** ends it.

There is also **Clear pins and restart generation**, which throws away the pins
PinFlow has generated and starts over. Reach for it when you have changed your
templates, palette or product selection substantially and would rather regenerate
than edit what is already queued. It asks for confirmation first, because
scheduled pins are affected.

## Boards

This is where you choose which Pinterest boards your pins post to.

![Choosing which Pinterest boards your pins post to](/images/help/settings/03-boards.png)

**Sync from Pinterest** pulls in the boards that already exist on your account.
Run it whenever you create or delete a board on Pinterest, so PinFlow's list
matches reality.

**Create Board** makes a new board from inside PinFlow, giving it a name and a
description. It is created on your real Pinterest account, so there is no need to
go over there and back.

Then tick the boards you want to use. Each pin is assigned to whichever of your
selected boards best matches the product.

> [!TIP]
>
> The board matching is only as good as the choice you give it. With two boards,
> most pins land in the same one whatever they are. Ten specific boards produce
> far better assignments than one general one.

> [!WARNING]
>
> If you delete a board on Pinterest, come back and hit **Sync from Pinterest**,
> then check the upcoming pins in your Calendar. Pins still pointing at the
> deleted board need reassigning.

## Autopilot

![The Autopilot setting](/images/help/settings/04-autopilot.png)

**Enable automatic pin regeneration** is on by default, and it is the setting
that means you never wake up to an empty queue. Before your current batch runs
out, PinFlow generates the next one and emails you to say it has.

Leave this on. It is the difference between PinFlow running by itself and PinFlow
needing you to remember it exists.

## URL Limits

Pinterest does not like the same link being pinned over and over in a short
period. This tab caps how often any one product page can be pinned.

**Monthly pin limit per URL** is how many pins can be created from the same URL
in a month. It resets at the start of each month.

**Lifetime pin limit per URL** is the total that can ever be created from that
URL. Once it is reached, no more pins are made from that page, in this month or
any future one.

Both accept a value from 1 to 300.

![The URL Limits tab with the lifetime and monthly per-URL caps and the Publish without Visit link option](/images/help/settings/05-url-limits.png)

**Publish without Visit link** posts pins with no outbound link at all. This is a
tactic for brand new stores and new Pinterest accounts: post genuinely useful
pins for a while to build trust before you start sending traffic anywhere.
Existing pins are not affected. Turn it off once your account is established.

## Plan

Your current plan, and where you change it. **Change Plan** hands you over to
Shopify's own plan picker, so billing changes happen on Shopify's side and are
prorated automatically.

![The Plan tab showing the current plan, its price, and the Change Plan button](/images/help/settings/06-plan.png)

## Bulk generation, start to finish

Putting the pieces together, the order that works is:

1. **Products**, to decide which products are in play.
2. **Pin Studio**, to set the templates, palette, fonts and AI wording.
3. **Scheduling**, to set pins per day, time zone and posting window.
4. **Settings** and the **Status** tab, to generate the batch.
5. **Calendar**, to approve what came out.

Then leave Autopilot on and it repeats step 4 for you.

## Related

- [Choosing Which Products Become Pinterest Pins](/help/products)
- [Setting Your Pinterest Posting Schedule](/help/scheduling)
- [The Content Calendar](/help/calendar)


---

---
title: "Upload Your Own Pin Image Instead of a Template"
description: PinFlow used to stamp its own frame, text and graphics on every pin. Two new options skip that: a frameless template, and your own Canva uploads.
---

## Watch the walkthrough

[https://www.youtube.com/watch?v=J2qZVQKXpT0](https://www.youtube.com/watch?v=J2qZVQKXpT0)

Three and a half minutes covering both new options end to end. Where the video and
the app disagree, this article is the authority - the app keeps moving.

## What changed

Until now every pin PinFlow generated went through one of its templates, and each
template laid its own structures, graphics, text and borders over your product
photo. That is useful when you want a designed pin in one click, and [Pin Studio](/help/pin-studio)
covers those templates in full. It is in the way when you already have the pin
you want.

Two things are new:

- A **frameless template**, which puts nothing on the image at all.
- **Your own image uploads**, so the pin can use a design you made elsewhere.

They are independent. Use either, or both together, which is what you want if you
made the whole pin in Canva.

## The frameless template

Open a pin from the [calendar's review queue](/help/calendar) and scroll to **Templates**. The first thumbnail under
**Basic** is the frameless one. It is the only one that shows the photo with
nothing over it.

![The Templates section of the PinFlow pin editor, with the first frameless template in the Basic row outlined](/images/help/upload-your-own-pin-image/01-frameless-template.png)

Pick it and the pin is your image, full bleed. No overlay text, no border, no
colour block, no title bar. If your image already carries its own words, this is
the option that stops PinFlow writing a second set on top of them.

The rest of the pin still works normally. The [title and the description](/help/pin-description-character-limit) and the
outbound URL are separate fields and are unaffected by which template you choose,
so a frameless pin still gets its Pinterest copy. Only the picture changes.

## Uploading your own image

Scroll up to **Images**. The row labelled **Available Images** holds every photo
attached to the product, and the tile at the end of that row, the one with the
plus, opens your computer's file browser.

![The Available Images row in the pin editor with the plus upload tile outlined, next to the in-app tooltip explaining it](/images/help/upload-your-own-pin-image/02-upload-your-image.png)

Pick the PNG or JPG you exported. Any shape works: it fills the pin from the
centre, and you can change how it is fitted afterwards.

### Where the file goes

The upload does not live only on this pin. It goes into your store's **Shopify
Files**, which is why it then shows up as an option on other products too. Your
own uploads are tagged **Yours** in the row so you can tell them from the product
photos Shopify already had.

![Two uploaded images at the start of the Available Images row, each carrying a Yours badge](/images/help/upload-your-own-pin-image/04-yours-badge.png)

Upload a branded background or a logo lockup once and it is available across the
catalogue, rather than being re-uploaded for every pin.

## The one limit worth knowing

Shopify rejects images above **25 megapixels**. If it refuses yours, this is the
message you get:

![The pin editor showing the error, media could not be processed because it exceeded the maximum resolution of 25 MP](/images/help/upload-your-own-pin-image/03-resolution-limit.png)

Megapixels are width multiplied by height, not file size. A 4K or larger export
trips this easily even when the file itself is small, so an image can be rejected
at 1.2 MB. Shopify applies a separate 20 MB file size cap on top of it, and you
can fail either one independently.

Export at a smaller pixel size and it uploads. Pinterest serves pins at
1000 x 1500 anyway, so nothing is lost by staying well under the ceiling.

## Cover or Contain

Once an image is in, the first dropdown under **Images** decides how it fills the
pin. **Cover** is the default: the image fills the whole pin and anything that
does not fit is cropped off. **Contain** shrinks the image until all of it fits,
which leaves empty bands down the sides or along the top and bottom.

![The fit dropdown in the pin editor set to Contain](/images/help/upload-your-own-pin-image/05-fit-contain.png)

Cover is almost always the right choice, because a Pinterest pin is tall and
empty bands waste the part of the feed you paid attention for. Contain is there
for the case where cropping would cut something you cannot lose.

### Choosing what survives the crop

Because Cover crops, it matters which part of the image it keeps. The second
dropdown sets that, and it only appears when the fit is Cover - Contain shows the
whole image, so there is nothing to choose.

![The focus area dropdown open, listing nine positions from Top Left to Bottom Right](/images/help/upload-your-own-pin-image/06-focus-area.png)

Nine positions, from Top Left to Bottom Right. The default is Center Center. If
the subject of your design sits in a corner, or your logo is along the bottom,
move the focus there and it stops being cropped away.

## Scheduling it

Nothing else changes. Pick the date and time under **Schedule**, then use the
**Schedule** button to queue the pin to the board named in **Board to Pin**. How
often those slots come round is set on the [scheduling page](/help/scheduling).

![The bottom action bar of the pin editor with the Schedule button outlined](/images/help/upload-your-own-pin-image/07-schedule.png)

**Reject** skips the pin instead, and **Cancel** closes the editor without
deciding. You can reopen a pin and apply a different template at any point before
it goes out - choosing frameless once does not lock the pin to it.

## When to use which

Use the **frameless template with your own upload** when you designed the whole
pin somewhere else and want PinFlow only for the scheduling.

Use the **frameless template with a product photo** when the photography is
strong enough to carry the pin on its own.

Use your **own upload with a normal template** when you want PinFlow's text and
layout, but over a background you control rather than a catalogue shot.

Use a **normal template with a product photo**, the original behaviour, when you
want a designed pin without opening a design tool at all. Most stores end up
mixing these, which is the point of keeping them independent.


---

---
title: "Craft Theme Variant Images: Each Colour's Own Photos"
description: "Craft shows every photo for every colour and puts the first one on the collection card. Here is how to give each colour its own photos and lock a cover."
---

## Craft shows every colour's photos on the product page

Craft lays out a product page as one large photo with the rest in a two-column grid below it. There is no slider and, on desktop, no row of thumbnails. That means every photo you upload is on the page at once, so a shopper who picks Red scrolls past the blue and yellow photos too.

I tested this on a fresh copy of Craft on my test store, with no edits to the theme. My product was a T-shirt called Classic Tee, sold in Red, Blue and Yellow. It had nine photos: a front and a back for each colour, a lookbook photo of a person wearing the tee by a window, a size guide and a fabric close-up. Craft picks Red when the page loads, and with Red picked all nine photos showed.

Two more places used the wrong photo. The Classic Tee card on the collection page showed the red front, since that is the first photo on the product. The featured collection on the home page showed the same red front.

![Craft product page with Red picked: before, all nine photos in a large photo and a two-column grid; with Ploqo, the red front and back plus the lookbook, size guide and fabric photos](/images/ploqo/help/craft-theme-variant-images/01-craft-product-page-before-after.png)

## Why every photo shows for every colour

Shopify keeps one photo link per variant. A variant is one version of a product a shopper can buy, such as the red T-shirt. Shopify calls that link the variant image, and a variant can have one and only one.

My test product had no variant images at all. That is common when photos are uploaded in a batch and never linked. Craft could not tell a red photo from a blue one, so it treated all nine as belonging to every colour. Linking a variant image to each colour would not fully fix it either. Red could hold the red front, but the red back would still belong to no colour and would still show when a shopper picks Yellow.

That one link, or the first photo when there is no link, decides three things on your store:

- **The product page.** Craft can react to the photo linked to the picked colour, but a photo with no link stays on the page for every colour.
- **The collection page card.** The card uses the product's first photo. For a clothing shop that is usually a flat front shot.
- **The featured collection on the home page.** It uses the same card, so it shows the same photo.

If you drag a nicer photo to the first spot to fix the card, the product page now opens on that photo instead. The order of your photos can only serve one of those places at a time.

## What changes in Craft once Ploqo is set up

Ploqo is a Shopify app that adds two things to each product. It records which photos go with which colour, and it holds one cover photo for cards.

On my Classic Tee in Craft, after setup:

- **Red picked:** the red front in the large spot, then the red back, the lookbook photo, the size guide and the fabric close-up. That is five photos, down from nine.
- **Blue picked:** the blue front and the blue back, followed by the same three shared photos.
- **Collection card and home page featured section:** the lookbook photo, which I locked as the cover.

Any photo you leave unticked for every colour counts as shared, and it shows whichever colour is picked. That is how the size guide and the fabric close-up stay in front of every shopper.

![Craft product page with Blue picked and Ploqo on: the blue front and back photos, then the lookbook, size guide and fabric photos](/images/ploqo/help/craft-theme-variant-images/02-craft-product-page-blue-picked.png)

## Step 1: Install Ploqo and add its card to your product pages

Install Ploqo from the Shopify App Store and open it once. Then open any product in your Shopify admin and scroll down to the **Blocks** section. Click **+ Block** and choose **Ploqo photos**.

![The Blocks section on a Shopify product page, with the + Block button highlighted](/images/ploqo/help/shared/01-add-admin-block.png)

The Ploqo card appears on the product. Click the pin icon at its top right so the card shows on every product page, not only this one.

![The Ploqo card on a product page, with the pin icon highlighted](/images/ploqo/help/shared/02-pin-admin-block.png)

## Step 2: Pick each colour's photos

The card lists every colour of the product. Click **Edit** next to the first one.

![The Ploqo card listing Red, Blue and Yellow, each with two photos and an Edit button](/images/ploqo/help/shared/03-click-edit.png)

A window opens showing every photo on the product. Tick the photos that belong to this colour and click **Save**. Leave shared photos unticked. The window marks them "On every variant", and the line at the bottom shows what a shopper who picks this colour will see.

![The Edit photos window for Red, with the red front and back ticked and the shared photos marked On every variant](/images/ploqo/help/shared/04-tick-photos.png)

Do the same for each colour. My product had three colours with two photos each, which took about a minute.

## Step 3: Lock the cover photo

The cover is the photo Ploqo puts on collection cards and in featured collections. On the Ploqo card, click **Open full editor**.

![The Ploqo card with the Open full editor link highlighted](/images/ploqo/help/shared/05-open-full-editor.png)

Under **Card cover**, click **Choose**.

![The Card cover section of the Ploqo editor, with the Choose button highlighted](/images/ploqo/help/shared/06-card-cover-choose.png)

Tick the photo you want and click **Save cover**. I chose the lookbook photo because a person wearing the tee shows the fit better than a shirt laid flat.

![The Choose the card cover window, with the lookbook photo ticked and the Save cover button highlighted](/images/ploqo/help/shared/07-pick-cover.png)

## Step 4: Add the Ploqo gallery filter to Craft's product page

The photo filtering on the product page runs from an app block. An app block is a piece an installed app adds to your theme, and you place it in the theme editor. To open the theme editor, go to **Online Store**, then **Themes**, then click **Customize** on Craft.

Switch the editor to a product page using the menu at the top. In the left sidebar, under **Template**, open **Product information**. Click **Add block**, the one at the top of the block list. Open the **Apps** tab, choose **Ploqo gallery filter**, then click **Save**.

![The Craft theme editor on a product page: Product information, Add block, the Apps tab and Ploqo gallery filter highlighted](/images/ploqo/help/craft-theme-variant-images/05-craft-editor-add-gallery-filter.png)

You will not see the block on the page, and it has nothing to set. It watches which colour a shopper picks and hides the photos that belong to the other colours.

## Step 5: Put the cover on Craft's collection page cards

Switch the editor to a collection page. Under **Template**, click **Add section**, open the **Apps** tab and choose **Ploqo card cover**. Click **Save**.

![The Craft theme editor on a collection page: Add section, the Apps tab and Ploqo card cover highlighted](/images/ploqo/help/craft-theme-variant-images/06-craft-editor-add-card-cover.png)

In Craft's sidebar the new block shows up under the Product grid. On my test store the Classic Tee card changed from the red front photo to the lookbook photo after I saved.

![The Craft collection card for the Classic Tee: before, the red front photo; with Ploqo, the locked lookbook cover](/images/ploqo/help/craft-theme-variant-images/03-craft-collection-card-before-after.png)

## Step 6: Put the cover on Craft's home page featured collection

The home page needs one extra setting. The card cover block has to be told which collection your featured section shows.

First, check what Craft's **Featured collection** section is showing. On my store it showed a collection called **Products**, and I switched it to a collection called **Home page**, which holds The Complete Snowboard and the Classic Tee.

Then, still on the home page, click **Add section** under **Template**, open the **Apps** tab and choose **Ploqo card cover**. Craft adds it in a new section called Apps. Select the block, click **Select** under **Featured collections to cover**, pick **Home page**, and click **Save**.

![The Ploqo card cover settings in the Craft theme editor, with Featured collections to cover set to Home page](/images/ploqo/help/craft-theme-variant-images/07-craft-editor-home-featured-collection.png)

If you keep the section on **Products**, you cannot pick it in the collection picker. Turn on **Also cover "All products"** instead, which is there for a featured section that lists every product.

![The Craft home page featured collection: before, the Classic Tee shows the red front photo; with Ploqo, the lookbook cover](/images/ploqo/help/craft-theme-variant-images/04-craft-home-featured-before-after.png)

## How Craft orders the photos once Ploqo filters them

Ploqo only hides photos. It never changes their order. In Craft that matters because the first photo left on the page takes the large spot at the top, and the rest drop into the two-column grid.

When my Classic Tee page loaded, Craft had Red picked, so the red front filled the large spot. The red back came second and the lookbook photo third, followed by the size guide and the fabric close-up. With Blue picked, the blue front took the large spot instead. A shopper sees the colour they are about to buy first, and the lookbook still leads on the cards.

## Craft's product page media settings

Craft's **Product information** section has its own media settings in the theme editor. These are the ones I found, with the values Craft's product template ships with:

- **Layout.** The options are Stacked, 2 columns, Thumbnails and Thumbnail carousel. Craft uses Stacked, which gives the one large photo and the grid below it.
- **Mobile layout.** The options are 2 columns, Show thumbnails and Hide thumbnails. Craft uses Hide thumbnails.
- **Hide other variant media after one is selected.** Craft ships with this off. Even when it is on, it can only hide the one photo linked to each other colour. My product had no linked photos, so it would have had nothing to hide.

All my screenshots use Craft's template as it ships: Stacked, with that last setting off. Ploqo worked without changing any of them.

## The free option for Craft, and what it leaves out

Shopify's built-in variant images cost nothing. If one photo per colour is enough and you are fine with the extra photos staying on the page, start there. [How to add variant images in Shopify](/blog/shopify-variant-images) shows how to link a photo to each colour. [Shopify product variant image switching, explained](/blog/shopify-product-variant-image-switching) covers why the page sometimes opens on the wrong photo.

What the free route cannot do is give a colour two or more photos, or set a card photo that is different from the first photo on the product. Ploqo adds both.

If clicking a photo in Craft does not change the selected colour, that is a separate issue. I wrote it up in [Shopify Craft Theme: Sync Thumbnails to the Variant Picker](/blog/shopify-craft-theme-variant-sync).

## If it did not work

**Still seeing every colour's photos?** Check that **Ploqo gallery filter** is listed under Product information in the product template, and that you clicked Save. Also check you are previewing the same theme you added it to. A block on an unpublished copy only shows in that copy's preview.

**One colour only shows the shared photos?** Open the Ploqo card on that product. The colour probably has no photos ticked yet.

**The collection card still shows the first photo?** Look for the "Locked cover" badge on the product's Ploqo card. If it is there, check that **Ploqo card cover** is saved on the collection page in the theme editor.

**The home page card has not changed?** Select the Ploqo card cover block on the home page and check that **Featured collections to cover** lists the collection your Featured collection section shows. If that section shows Products, turn on **Also cover "All products"**.

**The editor shows the change but your store does not?** Hard-refresh the page with Ctrl+Shift+R, or Cmd+Shift+R on a Mac. Your browser may be showing an older copy.

## Definitions

- **Variant:** one buyable version of a product, such as the red T-shirt in size M.
- **Variant image:** the single photo Shopify links to a variant.
- **Cover photo:** the one photo Ploqo shows for a product on collection cards and in featured collections.
- **Shared photo:** a photo you left unticked for every colour. It shows whichever colour is picked.
- **App block:** a piece an installed app adds to your theme, placed from the theme editor.
- **Stacked layout:** Craft's product page layout with one large photo and the rest in a two-column grid.
- **Featured collection:** a home page section in Craft that shows products from one collection you choose.

Ploqo saves the colour photos and the cover on the product in Shopify, so they stay put if you change themes. You add the app blocks again in the new theme. For other themes, see [Ploqo's theme guides](/ploqo/help/supported-themes).


---

---
title: "Crave Theme Variant Images: Photos per Colour, Locked Cover"
description: "In Crave, the photo slider and the collection card ignore which photos belong to which colour. Here is how to show each colour's photos and keep your cover on the card."
---

## The problem with variant images in Crave

Crave is one of Shopify's free themes. Its product page shows photos in a slider: one large framed photo, with a strip of small thumbnails under it and arrows to move along the strip. The strip shows four thumbnails at a time.

When a shopper picks a colour, that strip does not change. It still holds the photos of every other colour.

I tested this on a fresh, unedited copy of Crave on my test store. My product is a T-shirt called Classic Tee, in Red, Blue and Yellow. It has nine photos: a front and a back for each colour, a lookbook photo of a person wearing the tee, a size guide and a fabric close-up. Crave picks Red when the page loads. The large photo was the red front, and the strip held all nine photos. The first four thumbnails were the red front, the red back, the blue front and the blue back.

The collection page had the same kind of problem. The Classic Tee card showed the red front photo, because that is the first photo on the product. The featured section on the home page showed the same red front photo.

![Crave product page with Red picked: before, the red front photo large and blue photos in the thumbnail strip; with Ploqo, the lookbook cover large and only red and shared photos in the strip](/images/ploqo/help/crave-theme-variant-images/01-crave-product-page-before-after.png)

## Why Crave's slider keeps every colour's photos

A Shopify product has one list of photos. Each variant can point at **one** photo from that list. A variant is one version of the product a shopper can buy, such as the red tee. The photo it points at is called the variant image.

There is no second slot. A colour with a front and a back photo can claim only one of them, and the other photo belongs to no colour. Photos that belong to no colour show for every colour.

On my test product, no photo was linked to any colour at all. That is common after a bulk upload. With no links, Crave had nothing to go on, so its slider kept all nine photos whichever colour was picked.

That single link, or the first photo when there is no link, feeds three places in your store:

- **The product page slider.** It holds every photo on the product, in upload order.
- **The collection card.** Crave uses the product's first photo.
- **The home page featured section.** It uses the same product card, so it shows the same first photo.

The usual workaround is to drag a better photo to the top of the product's photo list. That changes the card, but it also changes the first photo in the slider for every colour. A fix in one place moves the problem somewhere else.

## What Ploqo changes in Crave

Ploqo is a Shopify app that saves two extra things on each product. The first is which photos belong to which colour, with as many photos per colour as you like. The second is one cover photo for cards.

On Crave, after setup, my test product looked like this:

- **Red picked:** the thumbnail strip held the red front, the red back, the lookbook photo, the size guide and the fabric close-up. That is five thumbnails instead of nine. The blue and yellow photos were gone from the strip.
- **Blue picked:** the strip held the blue front, the blue back, the lookbook photo, the size guide and the fabric close-up.
- **Large photo on page load:** the lookbook cover, for both colours. The section below on photo order explains why.
- **Collection card and home page card:** the lookbook photo, which is the photo I locked as the cover.

The size guide, fabric close-up and lookbook photo stay in the strip for every colour because I did not tick them for any colour. A photo with no colour ticked counts as shared.

![Crave product page with Blue picked and Ploqo on: the lookbook cover large, and the blue front, blue back and shared photos in the thumbnail strip](/images/ploqo/help/crave-theme-variant-images/02-crave-product-page-blue-picked.png)

## Step 1: Install Ploqo and add its card to your product pages

Install Ploqo from the Shopify App Store and open it once. Then open any product in your Shopify admin and scroll down to the **Blocks** section. Click **+ Block** and choose **Ploqo photos**.

![The Blocks section on a Shopify product page, with the + Block button highlighted](/images/ploqo/help/shared/01-add-admin-block.png)

The Ploqo card appears on the product page. Click the pin icon in its top right corner. Pinning makes the card show on every product, not only the one you are on.

![The Ploqo card on a product page, with the pin icon highlighted](/images/ploqo/help/shared/02-pin-admin-block.png)

## Step 2: Pick each colour's photos

The card lists every colour of the product. Click **Edit** next to the first colour.

![The Ploqo card listing Red, Blue and Yellow, each with two photos and an Edit button](/images/ploqo/help/shared/03-click-edit.png)

A window opens with all the product's photos. Tick the photos that belong to this colour, then click **Save**. Leave shared photos unticked, such as a size guide. The window labels them "On every variant". The line at the bottom of the window says what a shopper who picks this colour will see.

![The Edit photos window for Red, with the red front and back ticked and the shared photos marked On every variant](/images/ploqo/help/shared/04-tick-photos.png)

Do the same for each colour. My test product has three colours with two photos each, and it took about a minute.

## Step 3: Lock the cover photo

The cover is the photo shoppers see on product cards, on collection pages and in the home page featured section. On the Ploqo card, click **Open full editor**.

![The Ploqo card with the Open full editor link highlighted](/images/ploqo/help/shared/05-open-full-editor.png)

Find **Card cover** and click **Choose**.

![The Card cover section of the Ploqo editor, with the Choose button highlighted](/images/ploqo/help/shared/06-card-cover-choose.png)

Tick the photo you want on the card and click **Save cover**. I chose the lookbook photo. A person wearing the tee by a window tells a shopper more than a flat front shot does.

![The Choose the card cover window, with the lookbook photo ticked and the Save cover button highlighted](/images/ploqo/help/shared/07-pick-cover.png)

## Step 4: Add the gallery filter to Crave's product page

The slider filtering comes from an app block. An app block is a piece an installed app adds to your theme, which you place from the theme editor. The theme editor is where you change how your theme looks. To open it, go to **Online Store**, then **Themes**, and click **Customize** on Crave.

Use the page menu at the top of the theme editor to open the product page template. In the left sidebar, under **Template**, open **Product information**. Click **Add block**, which sits at the top of that section's block list. Switch to the **Apps** tab, choose **Ploqo gallery filter**, and click **Save** at the top right.

![The Crave theme editor on the product page: Product information, Add block, the Apps tab and Ploqo gallery filter highlighted](/images/ploqo/help/crave-theme-variant-images/05-crave-editor-add-gallery-filter.png)

The block has no settings and adds nothing visible to the page. It reads the colour a shopper picks and hides the other colours' photos from the slider.

## Step 5: Put the cover on Crave's collection cards

Open the collection template from the page menu. Under **Template**, click **Add section**. Open the **Apps** tab, choose **Ploqo card cover**, and click **Save**.

![The Crave theme editor on the collection page: Add section, the Apps tab and Ploqo card cover highlighted](/images/ploqo/help/crave-theme-variant-images/06-crave-editor-add-card-cover.png)

Crave puts the block inside a new section named **Apps**. Its job is to swap the card photo for each product that has a locked cover.

On my test store the Classic Tee was the first card on the all-products collection page. Before, the card showed the red front photo. After I saved, it showed the lookbook cover.

![The Crave collection card for the Classic Tee: before, the red front photo; with Ploqo, the lookbook cover](/images/ploqo/help/crave-theme-variant-images/03-crave-collection-card-before-after.png)

## Step 6: Put the cover on Crave's home page featured section

The home page needs one setting more than the collection page. The card cover block cannot tell which collection a featured section shows, so you choose it.

Crave's home page has a **Featured collection** section. On my store its heading reads "Featured products". It was set to show a collection called **Products**, and I switched it to a collection called **Home page**. That collection holds The Complete Snowboard and the Classic Tee.

Open the home page template. Under **Template**, click **Add section**, open the **Apps** tab and choose **Ploqo card cover**. Crave adds it in a new **Apps** section under the Featured collection section.

Click the new block to open its settings. Under **Featured collections to cover**, click **Select** and pick the collection your featured section shows. For me that was Home page. Click **Save**.

![The Ploqo card cover settings in the Crave theme editor, with Featured collections to cover set to Home page](/images/ploqo/help/crave-theme-variant-images/07-crave-editor-home-featured-collection.png)

If your featured section still shows **Products**, the picker cannot select it, because that collection is every product in your store. Turn on **Also cover "All products"** instead.

On my store, the Classic Tee card in the featured section went from the red front photo to the lookbook cover.

![The Crave home page Featured products section: before, the Classic Tee shows the red front photo; with Ploqo, the lookbook cover](/images/ploqo/help/crave-theme-variant-images/04-crave-home-featured-before-after.png)

## Why the Crave slider opens on the cover photo

In Crave, Ploqo opens the slider on the cover photo. So with Ploqo on, the large photo on page load was the lookbook, not the red front. That held even though Crave picks Red when the page loads. With Blue picked, the large photo was the lookbook too.

The thumbnail strip keeps the product's own photo order, because Ploqo hides photos and does not reorder them. With Red picked, the strip ran red front, red back, lookbook, size guide, fabric close-up. The lookbook photo sits third in the strip because it is the seventh photo on the product, after the six colour photos. Ploqo removed the four blue and yellow photos in front of it.

A stacked grid works differently. In a theme like Dawn, the first photo left on the page takes the top spot, so the colour's own front photo comes first. If you run both kinds of theme, the [Dawn guide](/ploqo/help/dawn-theme-variant-images) shows the stacked version.

So in Crave the cover does two jobs: it is the photo on the collection card, and it is the large photo a shopper sees when they land on the product. Pick a cover you are happy to lead with in both places.

## Crave product page settings that affect photos

Crave's product template has its own photo settings, under **Product information** in the theme editor. Two of them sit close to what Ploqo does.

- **Layout.** Crave's product template is set to **Thumbnail carousel**, the slider in my screenshots. The other options are Stacked, 2 columns and Thumbnails.
- **Hide other variant media after one is selected.** Crave has this setting, and its product template ships with it off. It can hide only the one photo linked to each other colour. On my test product no photo was linked to any colour, so it had nothing to hide. Even with every colour linked, the other colours' second photos would stay in the strip.

## A free way to do part of this in Crave

Shopify's built-in variant images cost nothing, and they may be enough if one photo per colour is fine for you. The post on [how to add variant images in Shopify](/blog/shopify-variant-images) shows how to link one image to each colour. The post on [Shopify product variant image switching](/blog/shopify-product-variant-image-switching) explains why the wrong photo can show first.

The free route has two limits. Each colour can hold only one photo, so a colour's back photo still shows for every other colour. And the card photo is always the product's first photo, so you cannot pick a separate cover. Ploqo adds those two things.

## If it did not work

**Still seeing other colours' photos in the slider?** Check that **Ploqo gallery filter** sits under Product information in the product template, as in Step 4, and that you clicked Save. Also check you are previewing the theme you added the block to. A block in an unpublished copy of Crave shows only in that copy's preview.

**A colour shows only the shared photos?** Open the Ploqo card on that product and click Edit on that colour. If no photos are ticked, that colour has no photos of its own, so only the shared ones show.

**Want the slider to open on the colour photo instead of the cover?** In Crave the slider opens on the locked cover. Lock a photo you want shoppers to see first, or read the section above on how the slider orders photos.

**The collection card still shows the old photo?** Check that the product has a locked cover. The Ploqo card shows a "Locked cover" badge when it does. Then check that **Ploqo card cover** is saved in the collection template.

**The home page card did not change?** Open the Ploqo card cover block on the home page template. Check that **Featured collections to cover** lists the collection your Featured collection section shows. If the section shows all products, turn on **Also cover "All products"**.

**The editor shows the change but your live store does not?** Hard-refresh the page with Ctrl+Shift+R, or Cmd+Shift+R on a Mac. Your browser may be showing a copy of the page it saved earlier.

## Definitions

- **Variant:** one version of a product a shopper can buy, such as the red tee in size M.
- **Variant image:** the one photo Shopify links to a variant.
- **Thumbnail strip:** the row of small photos under Crave's large product photo.
- **Cover photo:** the photo Ploqo shows for a product on collection cards and in featured sections.
- **Shared photo:** a photo you did not tick for any colour. It shows for every colour.
- **App block:** a piece an installed app adds to your theme, placed from the theme editor.
- **Featured collection:** a Crave home page section that shows products from one collection you choose.

Ploqo saves your colour photos and cover on the product itself in Shopify, so they stay in place if you change themes. You add the app blocks again in the new theme. For the other free themes, see [Ploqo's theme guides](/ploqo/help/supported-themes).


---

---
title: "Dawn Theme Variant Images: Give Each Colour Its Own Photos"
description: "In Dawn, picking a colour still shows every other colour's photos, and the collection card shows whatever photo is first. Here is how to fix both with Ploqo."
---

## The problem with variant images in Dawn

Dawn is Shopify's default free theme, so it is the first place most merchants meet this. You upload a front and a back photo for each colour of a T-shirt. A shopper picks Red, and Dawn still shows the blue and yellow photos underneath the red ones.

I set this up on a fresh, unedited copy of Dawn on my test store. The product is a T-shirt in Red, Blue and Yellow with nine photos: a front and a back for each colour, a lookbook photo, a size guide and a fabric close-up. With Red picked, Dawn showed all nine, in the order they were uploaded.

The same product also looked wrong in two other places. The collection page card showed the red front photo, because it is the first photo on the product. The featured collection on the home page showed that same photo.

![Dawn product page with Red picked: before, all nine photos including blue and yellow; with Ploqo, only the red photos plus the lookbook, size guide and fabric photos](/images/ploqo/help/dawn-theme-variant-images/01-dawn-product-page-before-after.png)

## Why Dawn shows every colour's photos

Shopify lets you link **one** image to each variant. A variant is one buyable version of a product, like the red T-shirt. That single link is called the variant image, and Shopify has no field for a second one.

On my test product no photo was linked to any colour, which is how products often look after a bulk upload. Dawn had no way to tell which photos were red, so it showed all of them for every colour. Linking a photo to each colour helps only partly: each colour can hold one photo, so the red back photo still belongs to no colour and still shows when a shopper picks Blue.

Three parts of your store read that one link:

- **The product page.** Dawn can move to the linked photo when a shopper picks a colour, but every photo that is not linked stays in place.
- **The collection card.** Dawn shows the product's first photo, which is often a plain front shot rather than the photo you want shoppers to see.
- **Featured collections on the home page.** They use the same card, so they show the same first photo.

Changing the first photo to fix the card changes which photo the product page opens on. Fixing one place moves the problem to another.

## What Ploqo changes in Dawn

Ploqo is a Shopify app that stores two extra things on each product: which photos belong to which colour, and one cover photo.

In Dawn, after setup:

- **Red picked:** the red front, the red back, the lookbook photo, the size guide and the fabric close-up. Five photos instead of nine. The blue and yellow photos are hidden.
- **Blue picked:** the blue front and back, plus the same three shared photos.
- **Collection card and home page:** the lookbook photo, the one I locked as the cover.

Photos you do not tick for any colour stay visible for every colour. That is how the size guide and fabric close-up stay on the page whichever colour a shopper picks.

![Dawn product page with Blue picked and Ploqo on: the blue front and back photos, then the shared photos](/images/ploqo/help/dawn-theme-variant-images/02-dawn-product-page-blue-picked.png)

## Step 1: Install Ploqo and add its card to your product pages

Install Ploqo from the Shopify App Store and open it once. Then open any product in your Shopify admin and scroll to the **Blocks** section near the bottom. Click **+ Block** and choose **Ploqo photos**.

![The Blocks section on a Shopify product page, with the + Block button highlighted](/images/ploqo/help/shared/01-add-admin-block.png)

The Ploqo card appears. Click the pin icon at its top right, so the card shows on every product page from now on, not only this one.

![The Ploqo card on a product page, with the pin icon highlighted](/images/ploqo/help/shared/02-pin-admin-block.png)

## Step 2: Pick each colour's photos

The card lists each colour of the product. Click **Edit** next to a colour.

![The Ploqo card listing Red, Blue and Yellow, each with two photos and an Edit button](/images/ploqo/help/shared/03-click-edit.png)

A window opens with every photo on the product. Tick the photos that belong to this colour and click **Save**. Leave shared photos, like a size guide, unticked: the window marks them "On every variant", and the line at the bottom tells you what a shopper who picks this colour will see before you save.

![The Edit photos window for Red, with the red front and back ticked and the shared photos marked On every variant](/images/ploqo/help/shared/04-tick-photos.png)

Repeat for each colour. On my test product that was three colours, two photos each, about a minute in total.

## Step 3: Lock the cover photo

The cover is the photo shoppers see on collection pages and in featured collections. On the Ploqo card, click **Open full editor**.

![The Ploqo card with the Open full editor link highlighted](/images/ploqo/help/shared/05-open-full-editor.png)

Under **Card cover**, click **Choose**.

![The Card cover section of the Ploqo editor, with the Choose button highlighted](/images/ploqo/help/shared/06-card-cover-choose.png)

Tick the photo you want as the cover and click **Save cover**. I picked the lookbook photo, a person wearing the T-shirt, because it sells the product better than a flat front shot.

![The Choose the card cover window, with the lookbook photo ticked and the Save cover button highlighted](/images/ploqo/help/shared/07-pick-cover.png)

## Step 4: Turn on the gallery filter in Dawn

The colour filtering on the product page comes from an app block. An app block is a piece an installed app adds to your theme, placed from the theme editor. The theme editor is the page where you customise your theme: **Online Store**, then **Themes**, then **Customize** on Dawn.

In the theme editor, open the product page template from the page menu at the top (Products, then Default product). In the left sidebar, under **Template**, open **Product information** and click **Add block**. Switch to the **Apps** tab and choose **Ploqo gallery filter**. Click **Save** at the top right.

![The Dawn theme editor on the product page: Product information, Add block, the Apps tab and Ploqo gallery filter highlighted](/images/ploqo/help/dawn-theme-variant-images/05-dawn-editor-add-gallery-filter.png)

The block has no settings and shows nothing on its own. It works in the background, reading the colour each shopper picks.

## Step 5: Show the cover on collection pages in Dawn

Open the collection template (Collections, then Default collection). Under **Template**, click **Add section**, switch to the **Apps** tab and choose **Ploqo card cover**. Click **Save**.

![The Dawn theme editor on the collection page: Add section, the Apps tab and Ploqo card cover highlighted](/images/ploqo/help/dawn-theme-variant-images/06-dawn-editor-add-card-cover.png)

In Dawn the block sits in its own small Apps section under the product grid. It takes up no space on the page. On my test store the T-shirt card switched from the red front photo to the lookbook photo as soon as I saved.

![The Dawn collection card for the T-shirt: before, the red front photo; with Ploqo, the locked lookbook cover](/images/ploqo/help/dawn-theme-variant-images/03-dawn-collection-card-before-after.png)

## Step 6: Show the cover in featured collections on the Dawn home page

Featured collections need one more setting, because the card cover block cannot guess which collection your home page shows. Open the home page template. Click **Add section** under Template, open the **Apps** tab and choose **Ploqo card cover** again.

Select the new block. Under **Featured collections to cover**, click **Select** and pick the collection your Featured collection section shows. Click **Save**.

![The Ploqo card cover settings in the Dawn theme editor, with Featured collections to cover set to Home page](/images/ploqo/help/dawn-theme-variant-images/07-dawn-editor-home-featured-collection.png)

A new Dawn store's Featured collection section shows a collection called **Products**, which is every product. The picker cannot select that one, so turn on **Also cover "All products"** instead. On my test store the section showed a collection called Home page, so I picked that.

![The Dawn home page Featured products section: before, the T-shirt shows the red front photo; with Ploqo, the lookbook cover](/images/ploqo/help/dawn-theme-variant-images/04-dawn-home-featured-before-after.png)

## How the Dawn product page orders the photos

Dawn stacks product photos in a grid rather than a slider: one large photo, then two per row. Dawn also selects the first colour when the page loads, so a shopper lands on Red without clicking anything.

Ploqo hides photos; it does not reorder them. So the large first spot goes to the first photo left on the page. On my test product that was the red front photo with Red picked, and the blue front photo with Blue picked. The lookbook cover came after the chosen colour's photos, with the size guide and fabric close-up. In Dawn, the cover leads on the collection card and the home page, and on the product page a shopper sees the colour they are about to buy first.

## Shopify Dawn theme product page settings that affect photos

Dawn's product page has its own media settings, under the Product information section in the theme editor. Two of them sit close to what Ploqo does:

- **Layout.** Dawn offers Stacked, 2 columns, Thumbnails and Thumbnail carousel. My screenshots use Stacked, the default, which shows every photo down the page.
- **Hide other variant media after one is selected.** Dawn turns this on by default. It hides the one photo linked to each other colour, and nothing else, so it cannot hide a second photo of a colour. On my test product no photos were linked, so it hid nothing and all nine showed. My Ploqo screenshots were taken with it on, as Dawn ships it.

## A free way to do part of this in Dawn

If you only need the product page to switch photos and can live with the extra photos showing, Shopify's own variant images are free. The blog post on [how to add variant images in Shopify](/blog/shopify-variant-images) walks through linking one image to each colour, and [Shopify product variant image switching, explained](/blog/shopify-product-variant-image-switching) covers why the wrong photo can show first.

That free route cannot give a colour more than one photo, and it cannot set a cover photo separate from the first photo. Those two are what Ploqo adds.

## If it did not work

**Still seeing other colours' photos?** Check that **Ploqo gallery filter** is in the product template and that you clicked Save in the theme editor. Then check you are looking at the theme the block is in: a block added to an unpublished copy only shows in that copy's preview.

**A colour shows no photos of its own?** Open the Ploqo card on that product and check the colour has photos ticked. A colour with none ticked shows only the shared photos.

**The collection card still shows the old photo?** Check the product has a locked cover (the card shows a "Locked cover" badge), and that **Ploqo card cover** is saved on the collection template.

**The home page card did not change?** Open the Ploqo card cover block on the home page and check **Featured collections to cover** lists the collection your Featured collection section shows. If that section shows all products, turn on **Also cover "All products"**.

**Seeing a change in the editor but not on the live store?** Hard-refresh the page (Ctrl+Shift+R, or Cmd+Shift+R on a Mac). Browsers keep an old copy of a page for a while.

## Definitions

- **Variant:** one buyable version of a product, such as the red T-shirt in size M.
- **Variant image:** the single image Shopify links to a variant.
- **Cover photo:** the one photo Ploqo shows on collection cards and featured collections for that product.
- **Shared photo:** a photo you did not tick for any colour. It shows for every colour.
- **App block:** a piece an installed app adds to your theme, placed from the theme editor.
- **Featured collection:** a Dawn home page section that shows products from one collection you choose.

Ploqo saves your colour photos and cover on the product itself in Shopify, so they stay in place if you change themes. For the other free themes, see [Ploqo's theme guides](/ploqo/help/supported-themes).


---

---
title: "Fabric Theme Variant Images: Each Colour's Photos and Cover"
description: "Fabric keeps every colour's photos in one gallery and puts the first photo on the card. Here is how to show only the picked colour's photos and lock a cover."
---

## Fabric shows every colour's photos at once

Fabric is one of Shopify's newer free themes, built for fashion and apparel stores. Clothing is where colour photos matter most. A shopper who picks a red shirt wants to see the red shirt, front and back, before they add it to the cart.

I installed a fresh, unedited copy of Fabric on my test store and opened a product called Classic Tee. It comes in Red, Blue and Yellow and has nine photos: a front and a back for each colour, a lookbook photo of a person wearing the tee by a window, a size guide and a fabric close-up. With Red picked, Fabric showed all nine photos, two to a row. The blue and yellow shirts sat right under the red ones.

The card for the Classic Tee had the same issue in a different form. On the collection page, and in the New Arrivals section on the home page, the card showed the red front photo. That is the product's first photo, not the one I would choose to sell it.

![Fabric product page with Red picked: before, all nine photos in a two-column grid; with Ploqo, the red front and back, then the lookbook, size guide and fabric close-up](/images/ploqo/help/fabric-theme-variant-images/01-fabric-product-page-before-after.png)

## Why Fabric cannot tell which photos are red

Shopify links **one** image to each variant. A variant is one buyable version of a product, such as the red Classic Tee in size M. That link is called the variant image, and there is no second slot for a back photo or a close-up.

My test product had no photo linked to any colour. Products often look like that after a bulk upload. With no links at all, Fabric has nothing to go on, so it keeps every photo in the gallery whatever colour is picked. If you link one photo per colour, the other photo of that colour is still unlinked, and it still shows next to every other colour.

That single link feeds three places on your storefront:

- **The product page gallery**, where the theme decides which photos belong to the picked colour.
- **The collection page card**, which uses the first photo on the product.
- **Product sections on the home page**, like Fabric's New Arrivals, which use the same card.

So the first photo does two jobs. Move a lifestyle shot to the front to improve the card, and the product page now opens on that shot instead of the colour the shopper came for.

## What Ploqo changes in Fabric

Ploqo is a Shopify app that saves two extra things on each product. The first is which photos belong to which colour, with as many photos per colour as you like. The second is one cover photo for cards.

Here is what Fabric showed on my test store once Ploqo was set up:

- **Red picked:** the red front and red back side by side, then the lookbook and the size guide, then the fabric close-up. Five photos in place of nine.
- **Blue picked:** the blue front and back first, then the same three shared photos.
- **Collection card and New Arrivals card:** the lookbook photo, which I locked as the cover.

A photo you leave unticked for every colour is a shared photo. It stays on the page for every colour. That is how the size guide and the fabric close-up appear whether a shopper picks Red, Blue or Yellow.

![Fabric product page with Blue picked and Ploqo on: the blue front and back in the first row, then the lookbook, size guide and fabric close-up](/images/ploqo/help/fabric-theme-variant-images/02-fabric-product-page-blue-picked.png)

## Step 1: Install Ploqo and add its card to your product pages

Install Ploqo from the Shopify App Store and open it once. Then open any product in your Shopify admin and scroll to the **Blocks** section near the bottom. Click **+ Block** and choose **Ploqo photos**.

![The Blocks section on a Shopify product page, with the + Block button highlighted](/images/ploqo/help/shared/01-add-admin-block.png)

The Ploqo card appears. Click the pin icon at its top right, so the card shows on every product page from now on, not only this one.

![The Ploqo card on a product page, with the pin icon highlighted](/images/ploqo/help/shared/02-pin-admin-block.png)

## Step 2: Pick each colour's photos

The card lists each colour of the product. Click **Edit** next to a colour.

![The Ploqo card listing Red, Blue and Yellow, each with two photos and an Edit button](/images/ploqo/help/shared/03-click-edit.png)

A window opens with every photo on the product. Tick the photos that belong to this colour and click **Save**. Leave shared photos, like a size guide, unticked. The window marks them "On every variant", and the line at the bottom tells you what a shopper who picks this colour will see before you save.

![The Edit photos window for Red, with the red front and back ticked and the shared photos marked On every variant](/images/ploqo/help/shared/04-tick-photos.png)

Repeat for each colour. On my test product that was three colours with two photos each, and it took about a minute.

## Step 3: Lock the cover photo

The cover is the photo shoppers see on collection pages and in home page product sections. On the Ploqo card, click **Open full editor**.

![The Ploqo card with the Open full editor link highlighted](/images/ploqo/help/shared/05-open-full-editor.png)

Under **Card cover**, click **Choose**.

![The Card cover section of the Ploqo editor, with the Choose button highlighted](/images/ploqo/help/shared/06-card-cover-choose.png)

Tick the photo you want as the cover and click **Save cover**. I chose the lookbook photo. For a fashion store, a photo of the tee being worn says more than a flat front shot.

![The Choose the card cover window, with the lookbook photo ticked and the Save cover button highlighted](/images/ploqo/help/shared/07-pick-cover.png)

## Step 4: Add the gallery filter to Fabric's product page

The product page filtering is an app block. An app block is a piece an installed app adds to your theme, and you place it in the theme editor. To open the theme editor, go to **Online Store**, then **Themes**, and click **Customize** on Fabric. Then open a product page from the menu at the top of the editor.

In the left sidebar, under **Template**, open **Product information**. Fabric has two **Add block** buttons in this area. One sits inside the **Details** group. The other belongs to the whole section and sits directly above **Disclosures**. Click the one above Disclosures, switch to the **Apps** tab and choose **Ploqo gallery filter**. Click **Save** at the top right.

![The Fabric theme editor on a product page: Product information, the Add block above Disclosures, the Apps tab and Ploqo gallery filter highlighted](/images/ploqo/help/fabric-theme-variant-images/05-fabric-editor-add-gallery-filter.png)

The block has no settings and adds nothing you can see. It reads the colour a shopper picks and hides the photos that belong to the other colours.

## Step 5: Put the cover on Fabric's collection cards

Next, open a collection page from the menu at the top of the editor. Under **Template**, click **Add section**, which sits below the **Collection** section. Switch to the **Apps** tab, choose **Ploqo card cover** and click **Save**.

![The Fabric theme editor on a collection page: Add section below Collection, the Apps tab and Ploqo card cover highlighted](/images/ploqo/help/fabric-theme-variant-images/06-fabric-editor-add-card-cover.png)

On my test store the Classic Tee was the first card in the collection. Before the block, it showed the red front photo. After saving, it showed the lookbook photo.

![The Fabric collection card for the Classic Tee: before, the red front photo; with Ploqo, the locked lookbook cover](/images/ploqo/help/fabric-theme-variant-images/03-fabric-collection-card-before-after.png)

## Step 6: Put the cover on Fabric's home page product section

On a fresh copy of Fabric, the home page has a product section headed **New Arrivals**. The card cover block needs to know which collection that section shows, because it cannot work that out by itself.

First, check the section's collection. On my test store it showed a collection called **Products** by default. I switched it to a collection called **Home page**, which holds the Classic Tee and The Complete Snowboard.

Then, under **Template**, click **Add section**, open the **Apps** tab and choose **Ploqo card cover**. Select the new block. Under **Featured collections to cover**, click **Select**, pick **Home page** and click **Save**.

![The Ploqo card cover settings in the Fabric theme editor, with Featured collections to cover set to Home page](/images/ploqo/help/fabric-theme-variant-images/07-fabric-editor-home-featured-collection.png)

If you keep New Arrivals on **Products**, which is every product, the picker cannot select it. Turn on **Also cover "All products"** in the same block instead.

With the block saved, the Classic Tee card in New Arrivals changed from the red front photo to the lookbook photo.

![The Fabric home page New Arrivals section: before, the Classic Tee shows the red front photo; with Ploqo, the lookbook cover](/images/ploqo/help/fabric-theme-variant-images/04-fabric-home-featured-before-after.png)

## How Fabric's product page lays out the photos

Fabric puts the photos in a grid of two columns on the left part of the page. There is no slider and no row of thumbnails. On the right is the buy box, the column with the colour picker, and it stays in view as the shopper scrolls down the photos. The colours are square buttons, and below them are collapsible rows titled PRODUCT DETAILS, CARE & MAINTENANCE and SIZE & FIT.

Fabric selects Red when the page loads, so the shopper starts on the first colour without clicking. With Ploqo on, the first row on page load was the red front and the red back. The lookbook cover came third.

Ploqo hides photos; it does not change their order. The photos that stay keep the order they have on the product. That is why the order with Red picked was red front, red back, lookbook, size guide, fabric close-up.

The grid suits colour photos well. A front and a back fill one row together, so the shopper sees both sides of the chosen colour next to each other. On the product page the cover keeps its place in that order, which on my test product was right after the picked colour's photos.

## A free way to handle part of this

If you only need the product page to jump to one photo per colour, and you are fine with the other photos staying in the gallery, Shopify's own variant images cost nothing. The post on [how to add variant images in Shopify](/blog/shopify-variant-images) shows how to link one image to each colour. [Shopify product variant image switching, explained](/blog/shopify-product-variant-image-switching) covers why the wrong photo can show first.

The free route has two limits. A colour can hold only one photo, so the back photo of each colour still shows for every colour. The card always uses the product's first photo, so you cannot pick a cover without changing what the product page opens on. Ploqo adds those two things.

## Switching to Fabric from another theme

If you move to Fabric from another theme, such as Dawn, Ploqo has already saved the colour photos and the cover on the product itself in Shopify, as metafields. A metafield is an extra field on a product that holds your own information. So when you change themes, the photos you ticked and the cover you locked stay on each product.

The app blocks belong to the theme, not the product. After you switch to Fabric, add **Ploqo gallery filter** to the product page and **Ploqo card cover** to the collection page and home page again, using Steps 4 to 6. You do not need to redo Steps 1 to 3.

## If it did not work

**Other colours' photos still show on the product page?** Check that **Ploqo gallery filter** is in Product information and that you clicked Save. Make sure you are previewing the same copy of Fabric you added it to. A block in an unpublished copy only shows in that copy's preview.

**Cannot find the Add block above Disclosures?** Open **Product information** under Template. The section-level Add block is directly above **Disclosures**, outside the **Details** group.

**A colour shows only the shared photos?** Open the Ploqo card on that product. If the colour has no photos ticked, it shows only the photos shared by all colours.

**The collection card did not change?** Check the Ploqo card on the product shows a "Locked cover" badge. Then check that **Ploqo card cover** is saved on the collection template.

**The New Arrivals card still shows the first photo?** Open the Ploqo card cover block on the home page. **Featured collections to cover** must list the collection New Arrivals shows. If that section shows **Products**, turn on **Also cover "All products"**.

**The editor shows the change but your store does not?** Hard-refresh the page with Ctrl+Shift+R, or Cmd+Shift+R on a Mac. Your browser may be showing a copy it saved earlier.

## Definitions

- **Variant:** one buyable version of a product, such as the red Classic Tee in size M.
- **Variant image:** the single image Shopify links to a variant.
- **Cover photo:** the one photo Ploqo shows on collection cards and home page product sections for that product.
- **Shared photo:** a photo you did not tick for any colour. It shows for every colour.
- **App block:** a piece an installed app adds to your theme, placed from the theme editor.
- **Buy box:** the column next to Fabric's photos with the colour picker. It stays in view as you scroll.

Ploqo saves your colour photos and cover on the product itself in Shopify, so they stay in place if you change themes. For the other free themes, see [Ploqo's theme guides](/ploqo/help/supported-themes).


---

---
title: "Horizon Theme Variant Images: Photos and Covers per Colour"
description: "Horizon shows every colour's photos whichever colour a shopper picks, and the collection card shows the first photo. Here is how to fix both with Ploqo."
---

## The problem with variant images in Horizon

Horizon is Shopify's newer free theme. If you sell a product in several colours and upload a few photos of each, Horizon puts every one of them on the product page. A shopper who picks Red still scrolls past the blue and yellow photos to reach the size guide.

I reproduced it on a fresh, unedited copy of Horizon on my test store. My product, Classic Tee, comes in Red, Blue and Yellow. It has nine photos: a front and back for each colour, a lookbook photo of a person wearing the tee, a size guide and a fabric close-up. With Red picked, the Horizon product page showed all nine photos in its grid.

The product looked off in two more places. The card on the collection page used the red front photo, since that is the first photo on the product. The home page section that lists products from a collection used that same red front photo.

![Horizon product page with Red picked: before, all nine photos in the grid including the blue and yellow ones; with Ploqo, five photos, the red front and back followed by the lookbook, size guide and fabric photos](/images/ploqo/help/horizon-theme-variant-images/01-horizon-product-page-before-after.png)

## Why Horizon cannot tell which photos are red

Shopify stores a single image link on each variant. A variant is one version of a product a shopper can buy, such as the red tee. That link is the variant image, and there is only room for one.

None of my nine photos were linked to a colour. Plenty of stores look like this after uploading photos in bulk. With nothing to go on, Horizon treats every photo as belonging to every colour. Linking would not solve it either. Red can hold the red front, but the red back has no colour to belong to, so it would still show for Blue and Yellow.

That one link feeds three places on the storefront:

- **The product page gallery.** The theme knows at most one photo per colour. Every other photo stays on the page for every colour.
- **The collection card.** The card uses the product's first photo, whether or not it is the photo that sells the product.
- **Home page product lists.** They reuse the same card, so they show the same first photo.

A merchant who reorders photos to get a better card also changes the first photo on the product page. The two places pull in different directions.

## What Ploqo changes in Horizon

Ploqo is a Shopify app that adds two things to each product: a list of which photos go with which colour, and one cover photo.

Here is what Horizon showed on my test store once Ploqo was set up:

- **Red picked:** the red front, the red back, then the lookbook photo, the size guide and the fabric close-up. That is five photos, down from nine.
- **Blue picked:** the blue front and the blue back first, then the same three shared photos.
- **Collection card and home page:** the lookbook photo, which I locked as the cover.

Any photo you leave unticked for every colour stays on the page whichever colour is picked. That is how the size guide and fabric close-up reach every shopper.

![Horizon product page with Blue picked and Ploqo on: the blue front and back photos at the top of the grid, then the lookbook, size guide and fabric photos](/images/ploqo/help/horizon-theme-variant-images/02-horizon-product-page-blue-picked.png)

## Step 1: Install Ploqo and add its card to your product pages

Install Ploqo from the Shopify App Store and open it once. Then open any product in your Shopify admin and scroll down to the **Blocks** section. Click **+ Block** and choose **Ploqo photos**.

![The Blocks section on a Shopify product page, with the + Block button highlighted](/images/ploqo/help/shared/01-add-admin-block.png)

The Ploqo card appears. Click the pin icon at its top right, so the card shows on every product page from now on, not only on this one.

![The Ploqo card on a product page, with the pin icon highlighted](/images/ploqo/help/shared/02-pin-admin-block.png)

## Step 2: Pick each colour's photos

The card lists every colour of the product. Click **Edit** next to a colour.

![The Ploqo card listing Red, Blue and Yellow, each with two photos and an Edit button](/images/ploqo/help/shared/03-click-edit.png)

A window opens with all the product's photos. Tick the ones that belong to this colour and click **Save**. Leave shared photos, such as a size guide, unticked. The window marks them "On every variant", and the line at the bottom tells you what a shopper who picks this colour will see.

![The Edit photos window for Red, with the red front and back ticked and the shared photos marked On every variant](/images/ploqo/help/shared/04-tick-photos.png)

Do the same for each colour. My test product had three colours with two photos each, which took about a minute.

## Step 3: Lock the cover photo

The cover is the photo shoppers see on collection pages and in home page product lists. On the Ploqo card, click **Open full editor**.

![The Ploqo card with the Open full editor link highlighted](/images/ploqo/help/shared/05-open-full-editor.png)

Under **Card cover**, click **Choose**.

![The Card cover section of the Ploqo editor, with the Choose button highlighted](/images/ploqo/help/shared/06-card-cover-choose.png)

Tick the photo you want as the cover and click **Save cover**. I chose the lookbook photo. A person wearing the tee by a window shows the product better than a flat front shot.

![The Choose the card cover window, with the lookbook photo ticked and the Save cover button highlighted](/images/ploqo/help/shared/07-pick-cover.png)

## Step 4: Add the gallery filter to the Horizon product page

The colour filtering comes from an app block, which is a piece an installed app adds to your theme. You place it in the theme editor, the page where you customise your theme. Go to **Online Store**, then **Themes**, then click **Customize** on Horizon.

Open the product page template from the page menu at the top. In the left sidebar, under **Template**, expand **Product information**. Horizon shows two **Add block** links inside this section: one inside the **Details** group, and one further down, directly above **Disclosures** and outside the Details group. I used the second one, the one above Disclosures, shown in the screenshot below.

In the window that opens, switch to the **Apps** tab. On my store it listed Ploqo card cover, Ploqo gallery filter and Sign in with Shop Button. Choose **Ploqo gallery filter**, then click **Save** at the top right.

![The Horizon theme editor on the product page: under Product information, the Add block link above Disclosures, the Apps tab and Ploqo gallery filter are highlighted](/images/ploqo/help/horizon-theme-variant-images/05-horizon-editor-add-gallery-filter.png)

The block has no settings and adds nothing you can see. It reads which colour the shopper picks and hides the photos that belong to the other colours.

## Step 5: Show the cover on Horizon collection pages

Switch the page menu to the collection template. Under **Template**, click **Add section**, which sits below the **Collection** section. Open the **Apps** tab and choose **Ploqo card cover**. Click **Save**.

![The Horizon theme editor on the collection page: Add section under Template, the Apps tab and Ploqo card cover highlighted](/images/ploqo/help/horizon-theme-variant-images/06-horizon-editor-add-card-cover.png)

Horizon adds the block as a new section of its own. On my test store, the Classic Tee card changed from the red front photo to the lookbook cover after I saved.

![The Horizon collection card for Classic Tee: before, the red front photo; with Ploqo, the locked lookbook cover](/images/ploqo/help/horizon-theme-variant-images/03-horizon-collection-card-before-after.png)

## Step 6: Show the cover on the Horizon home page

The card cover block needs to know which collection your home page lists, so this step has one extra setting.

On my copy of Horizon, the home page section that lists products was set to a collection called **Products**. I switched that section to a collection called **Home page**, which holds The Complete Snowboard and Classic Tee. After that, the section's heading read "Home page".

Next, open the home page template. Under **Template**, click **Add section**, open the **Apps** tab and choose **Ploqo card cover**. Select the new block in the sidebar. Under **Featured collections to cover**, click **Select** and pick the collection your home page section lists. I picked Home page. Click **Save**.

![The Ploqo card cover settings in the Horizon theme editor, with Featured collections to cover set to Home page](/images/ploqo/help/horizon-theme-variant-images/07-horizon-editor-home-featured-collection.png)

If your home page section lists every product in your store, the picker cannot select that collection. Turn on **Also cover "All products"** in the same block instead.

With the block saved, the Classic Tee card on my home page changed from the red front photo to the lookbook cover. The snowboard card next to it did not change.

![The Horizon home page section titled Home page: before, the Classic Tee card shows the red front photo; with Ploqo, the lookbook cover](/images/ploqo/help/horizon-theme-variant-images/04-horizon-home-featured-before-after.png)

## How Horizon orders the photos on the product page

Horizon does not use a slider for product photos. It lays them out in a stacked grid with two photos to a row. Horizon also picks Red for the shopper when the page loads, so the first view is already filtered.

Ploqo removes photos from the page, but it never changes their order. Whatever survives keeps its upload position. With Red picked on page load, the first photo on my test product was the red front, and the lookbook cover came third, after the red back. With Blue picked, the blue front and back moved to the top because the red and yellow photos ahead of them were hidden.

This split works well in Horizon. The lookbook cover leads on the collection card and the home page, where a shopper is browsing. On the product page, the colour they are about to buy comes first, with the lookbook just after it.

## The small photo in Horizon's sticky add-to-cart bar

Horizon has a bar that sticks to the screen with an add-to-cart button and a small product thumbnail. That thumbnail is part of the theme, not part of the product photo gallery. The Ploqo gallery filter works on the gallery, so check the thumbnail separately if it matters to you.

## Free ways to do part of this in Horizon

There is a free method written for Horizon on this site: [Horizon: Show Only the Selected Variant's Images](/blog/shopify-horizon-show-only-variant-images). It uses each photo's alt text plus a Custom Liquid block, which is a box in the theme editor where you paste code. If you are comfortable pasting a snippet into your theme, start there.

Two general posts cover Shopify's own variant images, which are free in every theme. [How to add variant images in Shopify](/blog/shopify-variant-images) walks through linking one image to each colour. [Shopify product variant image switching](/blog/shopify-product-variant-image-switching) explains why the wrong photo can show first.

Shopify's variant images give a colour one photo, and they cannot set a cover separate from the first photo. Ploqo adds both, with no code in your theme.

## If it did not work

**Still seeing every colour's photos?** Check that **Ploqo gallery filter** is listed under Product information in the product template (Step 4). Then check you clicked Save. If you added it to an unpublished copy of Horizon, it only shows in that copy's preview.

**One colour shows only the shared photos?** Open the Ploqo card on that product and click Edit next to the colour. If no photos are ticked, tick that colour's photos and save.

**The collection card did not change?** Check the Ploqo card shows a "Locked cover" badge on that product. Then check that **Ploqo card cover** is saved as its own section on the collection template.

**The home page card did not change?** Open the Ploqo card cover block on the home page. Check that **Featured collections to cover** includes the collection your home page section lists. If the section lists every product, turn on **Also cover "All products"**.

**The editor shows the change but your store does not?** Hard-refresh the page with Ctrl+Shift+R, or Cmd+Shift+R on a Mac. Your browser may still be showing an older copy.

## Definitions

- **Variant:** one buyable version of a product, such as the red tee in size M.
- **Variant image:** the single image Shopify links to a variant.
- **Cover photo:** the one photo Ploqo shows for a product on collection cards and home page product lists.
- **Shared photo:** a photo you did not tick for any colour. It shows for every colour.
- **App block:** a piece an installed app adds to your theme, placed from the theme editor.
- **Custom Liquid block:** a box in the theme editor where you paste code.
- **Stacked grid:** Horizon's product photo layout, with photos two to a row down the page.

Ploqo keeps your colour photos and cover on the product itself in Shopify, so they stay put if you switch themes. You add the two app blocks again in the new theme. For the other free themes, see [Ploqo's theme guides](/ploqo/help/supported-themes).


---

---
title: "Refresh Theme Variant Images: Photos per Colour and a Cover"
description: "In Refresh, the photo slider shows every colour's photos and the collection card shows the first one. Here is how to show each colour's photos and lock a cover."
---

## The problem with variant images in Refresh

Refresh is a free Shopify theme from the same family as Dawn, and it is the theme Ploqo's App Store listing names. Its product page uses a slider: one large photo, with a strip of small thumbnails under it. When a shopper picks a colour in Refresh, that strip still holds the photos of every other colour.

Refresh is the live theme on my test store, so I set this up there. The product is a T-shirt called Classic Tee, in Red, Blue and Yellow. It has nine photos: a front and a back for each colour, a lookbook photo of a person wearing the tee, a size guide and a fabric close-up.

With Red picked, the large photo was the red front. The thumbnail strip held all nine photos. The first four on show were the red front, the red back, the blue front and the blue back, so a shopper buying red was looking at blue shirts one click away.

The product also looked wrong off the product page. On the collection page, the Classic Tee card showed the red front photo, because that is the first photo on the product. The home page showed the same red front photo in its featured products row.

![Refresh product page with Red picked: before, the red front photo large and red and blue thumbnails in the strip; with Ploqo, the lookbook cover large and only the red and shared photos in the strip](/images/ploqo/help/refresh-theme-variant-images/01-refresh-product-page-before-after.png)

## Why the Refresh slider mixes colours

Shopify lets you link **one** image to each variant. A variant is one buyable version of a product, like the red T-shirt. That one link is called the variant image, and Shopify has no place to store a second.

On my test product, no photo was linked to any colour. Products often end up like that after a bulk upload or a supplier import. With no links, Refresh cannot tell a red photo from a blue one, so it puts all nine in the slider for every colour.

Linking a photo to each colour fixes only part of it. Each colour can hold one photo, so the red back photo has no colour to belong to. It stays in the strip when a shopper picks Blue or Yellow.

That one link per variant also decides what shoppers see in three places:

- **The product page slider.** Refresh can jump to the linked photo when a colour is picked. Every photo without a link stays in the strip.
- **The collection card.** Refresh shows the product's first photo. For a T-shirt that is usually a flat front shot.
- **The featured products row on the home page.** It uses the same card, so it shows the same first photo.

If you move a better photo to the first spot to fix the card, the product page opens on that photo too. You can choose a good card photo or a good first slide, but Shopify gives you one setting for both.

## What Ploqo changes in Refresh

Ploqo is a Shopify app that keeps two extra things on each product: which photos belong to which colour, and one cover photo for cards.

In Refresh, once it was set up, the product page looked like this:

- **When the page loads:** the large photo is the lookbook cover. That held whether the link named no colour, Red, Blue or Yellow.
- **Red picked:** the strip holds the red front, the red back, the lookbook, the size guide and the fabric close-up. Five photos instead of nine.
- **Blue picked:** the strip holds the blue front, the blue back and the same three shared photos.
- **Collection card and home page:** the lookbook photo, the one I locked as the cover.

Photos you leave unticked for every colour stay in the strip for every colour. That is how the size guide and the fabric close-up stay on the page whichever colour a shopper picks.

![Refresh product page with Blue picked and Ploqo on: the lookbook cover large, then blue front, blue back, lookbook and size guide in the thumbnail strip](/images/ploqo/help/refresh-theme-variant-images/02-refresh-product-page-blue-picked.png)

## Step 1: Install Ploqo and add its card to your product pages

Install Ploqo from the Shopify App Store and open it once. Then open any product in your Shopify admin and scroll down to the **Blocks** section. Click **+ Block** and choose **Ploqo photos**.

![The Blocks section on a Shopify product page, with the + Block button highlighted](/images/ploqo/help/shared/01-add-admin-block.png)

The Ploqo card appears. Click the pin icon at its top right. Pinned, the card shows on every product page, not only this one.

![The Ploqo card on a product page, with the pin icon highlighted](/images/ploqo/help/shared/02-pin-admin-block.png)

## Step 2: Pick each colour's photos

The card lists every colour of the product. Click **Edit** next to a colour.

![The Ploqo card listing Red, Blue and Yellow, each with two photos and an Edit button](/images/ploqo/help/shared/03-click-edit.png)

A window opens with every photo on the product. Tick the photos that belong to this colour and click **Save**. Leave shared photos, like a size guide, unticked. The window marks those "On every variant", and the line at the bottom tells you what a shopper who picks this colour will see, before you save.

![The Edit photos window for Red, with the red front and back ticked and the shared photos marked On every variant](/images/ploqo/help/shared/04-tick-photos.png)

Do the same for each colour. My test product had three colours with two photos each, which took about a minute.

## Step 3: Lock the cover photo

The cover is the photo shoppers see on collection pages and in featured sections. On the Ploqo card, click **Open full editor**.

![The Ploqo card with the Open full editor link highlighted](/images/ploqo/help/shared/05-open-full-editor.png)

Under **Card cover**, click **Choose**.

![The Card cover section of the Ploqo editor, with the Choose button highlighted](/images/ploqo/help/shared/06-card-cover-choose.png)

Tick the photo you want as the cover and click **Save cover**. I chose the lookbook photo, because a person wearing the tee sells it better than a flat front shot.

![The Choose the card cover window, with the lookbook photo ticked and the Save cover button highlighted](/images/ploqo/help/shared/07-pick-cover.png)

## Step 4: Add the gallery filter to the Refresh product page

The colour filtering on the product page comes from an app block. An app block is a piece an installed app adds to your theme, and you place it from the theme editor. The theme editor is where you customise your theme: go to **Online Store**, then **Themes**, and click **Customize** on Refresh.

Use the page menu at the top of the editor to open a product page. In the left sidebar, under **Template**, open **Product information** and click **Add block**. Switch to the **Apps** tab and choose **Ploqo gallery filter**. Click **Save** at the top right.

![The Refresh theme editor on the product page, with Add block, the Apps tab, Ploqo gallery filter and the Save button highlighted](/images/ploqo/help/refresh-theme-variant-images/05-refresh-editor-add-gallery-filter.png)

The gallery filter shows nothing by itself. It reads the colour a shopper picks and hides the photos that belong to the other colours.

## Step 5: Add the card cover to the Refresh collection page

Switch the page menu to a collection page. The cover cannot go inside the product grid, because Refresh's grid has no card blocks of its own. It goes in as a section of its own instead.

Under **Template**, click **Add section**. Switch to the **Apps** tab and choose **Ploqo card cover**. Click **Save**.

![The Refresh theme editor on the collection page, with Add section, the Apps tab, Ploqo card cover and the Save button highlighted](/images/ploqo/help/refresh-theme-variant-images/06-refresh-editor-add-card-cover.png)

After I saved, the Classic Tee card on my collection page showed the lookbook photo where it had shown the red front.

![The Refresh collection card for the Classic Tee: before, the red front photo; with Ploqo, the locked lookbook cover](/images/ploqo/help/refresh-theme-variant-images/03-refresh-collection-card-before-after.png)

## Step 6: Put the cover on the Refresh home page

Refresh's home page has a **Featured collection** section, titled "Featured products". On my store it showed **all** products. Shopify keeps those in its own all-products collection, and the card cover block needs to be told which collection to cover.

Switch the page menu to the home page. Under **Template**, click **Add section**, open the **Apps** tab and choose **Ploqo card cover** again. Select the new block to see its settings.

The block has two settings. **Featured collections to cover** is a picker for a named collection. Its **Select** button cannot choose the all-products collection, so on Refresh I turned on the second setting, **Also cover "All products"**, and clicked **Save**. That switch is what put the cover on my home page card.

![The Ploqo card cover settings in the Refresh theme editor, showing the Featured collections to cover picker with its Select button](/images/ploqo/help/refresh-theme-variant-images/07-refresh-editor-home-featured-collection.png)

Your Refresh home page may show a specific collection instead, such as a summer range. In that case, click **Select** under **Featured collections to cover** and pick that collection. Then click **Save**.

On my store the Classic Tee card in "Featured products" changed from the red front photo to the lookbook cover. The other products in the row kept their usual photos.

![The Refresh home page Featured products row: before, the Classic Tee shows the red front photo; with Ploqo, the lookbook cover](/images/ploqo/help/refresh-theme-variant-images/04-refresh-home-featured-before-after.png)

## How the Refresh slider shows the photos

Refresh's product template sets **Layout** to **Thumbnail carousel**. That gives one large photo with a strip of thumbnails under it. Four thumbnails fit at a time, and the strip has its own arrows for the rest. Refresh also selects the first colour when the page loads, so a shopper lands on Red without clicking.

With Ploqo on, the large photo on every page load is the lookbook cover. The strip under it holds only the chosen colour's photos and the three shared ones. Ploqo hides photos and does not reorder them, so the strip keeps the upload order: the colour's front, its back, then the lookbook, size guide and fabric close-up.

When a shopper clicks a colour button, the large photo switches to that colour's front photo. Blue shows the blue front, Yellow shows the yellow front, and a click back on Red shows the red front. Clicking any thumbnail shows that photo large.

I loaded the product page 85 times, across all three colours, hard reloads, colour clicks and a phone-sized screen. The large photo was always one of the photos shoppers should see: the cover on load, and the picked colour's front after a click.

In Refresh, then, the cover leads in three places: the collection card, the home page card and the first view of the product page. The colour a shopper is about to buy takes over the large spot as soon as they choose it.

## Shopify Refresh theme settings that affect product photos

Refresh keeps its media settings in the **Product information** section of the product template. Two of them sit close to what Ploqo does:

- **Layout.** The options are Stacked, 2 columns, Thumbnails and Thumbnail carousel. Refresh's template uses Thumbnail carousel, the slider in my screenshots.
- **Hide other variant media after one is selected.** This is on in Refresh's template. It hides the one photo linked to each other colour and nothing more, so it cannot hide a colour's second photo. My test product had no linked photos, so this setting hid nothing.

Because that setting works on linked photos only, a colour with a front and a back can never be fully filtered by it. Ploqo works from the photos you tick per colour instead, so both photos of each colour are covered.

## A free way to do part of this in Refresh

Shopify's own variant images cost nothing. If you only need the slider to jump to a colour's photo, and the other colours' photos can stay in the strip, they may be all you need. [How to add variant images in Shopify](/blog/shopify-variant-images) shows how to link one image to each colour. [Shopify product variant image switching, explained](/blog/shopify-product-variant-image-switching) covers why the wrong photo can show first.

The free route has two limits. A colour can hold only one photo, and the card photo is always the product's first photo. Ploqo adds a list of photos per colour and a cover photo that is set apart from the photo order.

## If it did not work

**Still seeing other colours in the thumbnail strip?** Check that **Ploqo gallery filter** is under Product information in the product template, as in Step 4. Then check you clicked Save. If you added it to a copy of Refresh that is not published, it only shows in that copy's preview.

**A colour shows only the shared photos?** Open the Ploqo card on that product and click **Edit** next to the colour. A colour with nothing ticked shows only the photos shared by every colour.

**The collection card still shows the first photo?** Check the product has a locked cover. The Ploqo card shows a "Locked cover" badge when it does. Then check that the **Ploqo card cover** section is saved on the collection template.

**The home page card did not change?** Open the Ploqo card cover block on the home page. If your featured section shows all products, turn on **Also cover "All products"**. If it shows a named collection, pick that collection under **Featured collections to cover**. Click Save after either change.

**The large photo is the cover, not the colour you picked?** On page load, Refresh with Ploqo shows the cover large. Click a colour button and the large photo moves to that colour's front photo.

**Your change shows in the editor but not on the live store?** Hard-refresh the page with Ctrl+Shift+R, or Cmd+Shift+R on a Mac. Browsers keep an old copy of a page for a while.

## Definitions

- **Variant:** one buyable version of a product, such as the red T-shirt in size M.
- **Variant image:** the single image Shopify links to a variant.
- **Cover photo:** the one photo Ploqo shows on collection cards and featured sections for that product.
- **Shared photo:** a photo you did not tick for any colour. It shows for every colour.
- **App block:** a piece an installed app adds to your theme, placed from the theme editor.
- **Thumbnail carousel:** Refresh's slider layout, with one large photo and a strip of small photos under it.
- **Featured collection:** a Refresh home page section that shows products from one collection, or from all products.

Ploqo saves your colour photos and cover on the product itself in Shopify, so they stay in place if you change themes. You add the two app blocks again in the new theme. For the other free themes, see [Ploqo's theme guides](/ploqo/help/supported-themes).


---

---
title: "Savor Theme Variant Images: Photos per Colour and a Cover"
description: "Savor shows every product photo no matter which option a shopper picks. Here is how to group photos by option and lock the cover on cards and the home page."
---

## The problem with variant images in Savor

Savor is one of Shopify's newer free themes. It was built for food and drink brands, and its demo home page opens with a "Savor every. last. bite." banner, but it works for any kind of product. When a shopper picks an option in Savor, such as a colour, the product page keeps every photo on the product in view.

I tested this on a fresh copy of Savor on my test store, with no theme edits. My product was a plain T-shirt called Classic Tee, in Red, Blue and Yellow. It had nine photos: a front and a back for each colour, a lookbook photo of a person wearing the tee by a window, a size guide and a fabric close-up. With Red picked, Savor showed all nine photos, so a shopper choosing Red still scrolled past the blue and yellow ones.

Two more places showed the wrong photo for this product. The card on the collection page used the red front photo, because it was the first photo uploaded. The featured collection on the home page used that same red front photo.

![Savor product page with Red picked: before, all nine photos including the blue and yellow ones; with Ploqo, only the red front and back plus the lookbook, size guide and fabric photos](/images/ploqo/help/savor-theme-variant-images/01-savor-product-page-before-after.png)

## Why Savor cannot tell which photo belongs to which colour

Shopify keeps one image slot on each variant. A variant is one version of a product a shopper can buy, such as the red tee. The photo in that slot is the variant image, and Shopify gives you exactly one per variant.

On my test product, none of the nine photos sat in a variant image slot. Products often end up like that after a bulk upload. With nothing linked, Savor had no record of which photos were red, so it kept all of them on the page for every colour. Filling the slot would not have fixed it either. Each colour can hold one photo, so the red back photo would still have no colour and would still show next to the blue ones.

That one slot also feeds three different parts of your store:

- **The product page**, which needs to know which photos go with the option a shopper picked.
- **The collection page card**, which shows the product's first photo.
- **The featured collection on the home page**, which uses the same card and so the same first photo.

The first photo does two jobs at once. If you move the lookbook photo to the front so it shows on the card, the product page also opens on the lookbook photo instead of the red front. You can only pick one place to get right.

## What Ploqo changes in Savor

Ploqo is a Shopify app that adds two things to each product: a list of which photos go with which colour, and one cover photo for cards.

With Ploqo set up on my Savor test store:

- **Red picked:** five photos. The red front leads in the large spot, then the red back, the lookbook photo, the size guide and the fabric close-up. The blue and yellow photos are hidden.
- **Blue picked:** the blue front and the blue back, then the same three shared photos.
- **Collection page and home page:** the card shows the lookbook photo, which I locked as the cover.

Any photo you leave unticked for every colour stays on the page whatever a shopper picks. That is why the size guide and fabric close-up show for Red, Blue and Yellow alike.

![Savor product page with Blue picked and Ploqo on: the blue front and blue back first, then the lookbook, size guide and fabric photos](/images/ploqo/help/savor-theme-variant-images/02-savor-product-page-blue-picked.png)

## Savor stores that sell flavours or pack sizes

A Savor store's options are often a flavour or a pack size rather than a colour. Ploqo groups photos by any option value, and the Ploqo card lists each value with its own Edit button. My test used colours, so the steps below say "colour", but they read the same for a flavour.

## Step 1: Install Ploqo and add its card to your product pages

Install Ploqo from the Shopify App Store and open it once. Then open any product in your Shopify admin and scroll down to the **Blocks** section. Click **+ Block** and choose **Ploqo photos**.

![The Blocks section on a Shopify product page, with the + Block button highlighted](/images/ploqo/help/shared/01-add-admin-block.png)

The Ploqo card appears. Click the pin icon at its top right. Pinning makes the card show on every product page, not only on this one.

![The Ploqo card on a product page, with the pin icon highlighted](/images/ploqo/help/shared/02-pin-admin-block.png)

## Step 2: Pick each colour's photos

The card lists each colour of the product. Click **Edit** next to a colour.

![The Ploqo card listing Red, Blue and Yellow, each with two photos and an Edit button](/images/ploqo/help/shared/03-click-edit.png)

A window opens with every photo on the product. Tick the photos that belong to this colour and click **Save**. Leave shared photos, like a size guide, unticked. The window marks those "On every variant", and the line at the bottom tells you what a shopper who picks this colour will see before you save.

![The Edit photos window for Red, with the red front and back ticked and the shared photos marked On every variant](/images/ploqo/help/shared/04-tick-photos.png)

Do the same for each colour. My test product had three colours with two photos each, and it took about a minute.

## Step 3: Lock the cover photo

The cover is the photo shoppers see on collection pages and in featured collections. On the Ploqo card, click **Open full editor**.

![The Ploqo card with the Open full editor link highlighted](/images/ploqo/help/shared/05-open-full-editor.png)

Under **Card cover**, click **Choose**.

![The Card cover section of the Ploqo editor, with the Choose button highlighted](/images/ploqo/help/shared/06-card-cover-choose.png)

Tick the photo you want as the cover and click **Save cover**. I chose the lookbook photo, because a person wearing the tee sells it better than a flat front shot does.

![The Choose the card cover window, with the lookbook photo ticked and the Save cover button highlighted](/images/ploqo/help/shared/07-pick-cover.png)

## Step 4: Add the gallery filter to the Savor product page

The product page filtering is an app block. An app block is a piece an installed app adds to your theme, and you place it in the theme editor. The theme editor is where you customise your theme: go to **Online Store**, then **Themes**, then click **Customize** on Savor.

Switch the page menu at the top of the editor to a product page. In the left sidebar, under **Template**, open **Product information**. Savor lists several blocks inside that section, including a **Details** group with its own **Add block** button. I used the other one: the **Add block** at the very bottom of the Product information list, which belongs to the section itself. Open the **Apps** tab, choose **Ploqo gallery filter**, then click **Save** at the top right.

![The Savor theme editor on the product page: the Product information section, its bottom Add block button, the Apps tab and Ploqo gallery filter highlighted](/images/ploqo/help/savor-theme-variant-images/05-savor-editor-add-gallery-filter.png)

The gallery filter has no settings and shows nothing on the page by itself. It reads the option a shopper picks and hides the photos that belong to the other options.

## Step 5: Put the cover on Savor collection pages

Switch the page menu to a collection page. Under **Template**, click **Add section** below the **Collection** section. Open the **Apps** tab, choose **Ploqo card cover** and click **Save**.

![The Savor theme editor on the collection page: Add section below Collection, the Apps tab and Ploqo card cover highlighted](/images/ploqo/help/savor-theme-variant-images/06-savor-editor-add-card-cover.png)

Savor puts the block in a section of its own, listed under Collection in the sidebar. With the block saved, my Classic Tee card changed from the red front photo to the lookbook cover.

![The Savor collection card for Classic Tee: before, the red front photo; with Ploqo, the locked lookbook cover](/images/ploqo/help/savor-theme-variant-images/03-savor-collection-card-before-after.png)

## Step 6: Put the cover in the Savor home page featured collection

The card cover block needs to be told which collection your home page features. It has no way to work that out on its own.

First check which collection your **Featured collection** section shows. On my fresh copy of Savor it showed a collection called **Products**. I switched it to a collection called **Home page**, which held The Complete Snowboard and Classic Tee.

Then, still on the home page template, click **Add section** under Template, open the **Apps** tab and choose **Ploqo card cover**. Click the new block to select it. Under **Featured collections to cover**, click **Select**, pick the collection your Featured collection section shows (Home page, in my case) and click **Save**.

![The Ploqo card cover settings in the Savor theme editor, with Featured collections to cover set to Home page](/images/ploqo/help/savor-theme-variant-images/07-savor-editor-home-featured-collection.png)

If you keep the Featured collection section on Products, which holds every product, the picker cannot select it. Turn on **Also cover "All products"** in the same block instead.

My Classic Tee card in the featured section went from the red front photo to the lookbook cover.

![The Savor home page featured collection: before, Classic Tee shows the red front photo; with Ploqo, the lookbook cover](/images/ploqo/help/savor-theme-variant-images/04-savor-home-featured-before-after.png)

## How the Savor product page lays out the photos

Savor fills the left side of the product page with photos. The first photo is large, and the rest follow in a grid two columns wide. The title, the colour picker and the add-to-cart button sit on the right. There is no slider and no row of thumbnails, so every photo left on the page is in view as the shopper scrolls.

Savor picks Red when the page loads, so a shopper starts on Red without clicking anything. With Ploqo on, the large first photo on page load was the red front. The lookbook cover came after the two red photos, followed by the size guide and the fabric close-up.

Ploqo hides photos but keeps their order. Whatever photo is first among those still showing takes the large spot. With Blue picked, that was the blue front photo. The cover you lock leads on cards, and on the product page the shopper sees the colour they picked first.

## The small photo in Savor's sticky add-to-cart bar

Savor shows a tiny product thumbnail in a bar that sticks to the screen with the add-to-cart button. That thumbnail belongs to the theme, not to the photo grid. Ploqo's gallery filter works on the grid, so do not judge your setup by that small image. Check the large photos on the left instead.

## Savor and Horizon

Savor shares its page structure with Horizon, another of Shopify's free themes. If you have set up Ploqo on Horizon, Savor's product page and theme editor will look familiar. The Ploqo setup on each product is the same in every theme, because it lives on the product rather than in the theme.

## A free way to do part of this in Savor

Shopify's own variant images cost nothing. If one photo per colour is enough, and you are fine with the extra photos staying on the page, start there. The post on [how to add variant images in Shopify](/blog/shopify-variant-images) shows how to link an image to each colour. [Shopify product variant image switching, explained](/blog/shopify-product-variant-image-switching) covers why a shopper can land on the wrong photo first.

The free route stops at one photo per colour, and the card always shows the product's first photo. Ploqo adds the second photo onward for each colour and a cover that is separate from the first photo.

## If it did not work

**Picked a colour and still see the others' photos?** Check that **Ploqo gallery filter** is in the Product information section of your product template, and that you clicked Save. Also check you are previewing the theme you edited, since an unpublished copy only shows its changes in its own preview.

**A colour shows only the shared photos?** Open the Ploqo card on that product and check that colour has photos ticked. A colour with no ticked photos gets the shared ones only.

**The collection card still shows the first photo?** Check the product has a locked cover on the Ploqo card, and that **Ploqo card cover** is saved on the collection template.

**The home page card did not change?** Select the Ploqo card cover block on the home page and check **Featured collections to cover** lists the collection your Featured collection section shows. If that section shows Products, turn on **Also cover "All products"**.

**Checking the small photo in the sticky add-to-cart bar?** That thumbnail is part of Savor, not the photo grid Ploqo filters. Look at the large photos on the left of the page.

**Changes show in the editor but not on the store?** Hard-refresh the page with Ctrl+Shift+R, or Cmd+Shift+R on a Mac. Your browser can hold on to an older copy of the page.

## Definitions

- **Option:** a choice a shopper makes on the product page, such as colour, flavour or pack size.
- **Variant:** one buyable version of a product, such as the red tee.
- **Variant image:** the single image Shopify links to a variant.
- **Cover photo:** the one photo Ploqo shows for a product on collection cards and in featured collections.
- **Shared photo:** a photo you did not tick for any colour. It shows whichever colour a shopper picks.
- **App block:** a piece an installed app adds to your theme, placed from the theme editor.
- **Featured collection:** a Savor home page section that shows products from one collection you choose.

Ploqo saves your colour photos and cover on the product in Shopify, so they stay put if you switch themes. You only add the app blocks to the new theme. For the other free themes, see [Ploqo's theme guides](/ploqo/help/supported-themes).


---

---
title: "Ploqo Theme Guides: Variant Photos on Every Free Theme"
description: "Ploqo gives each colour its own photos and locks one cover for the collection card and the home page. Pick your theme for a step-by-step guide with screenshots."
---

## What Ploqo changes on your store

Ploqo is a Shopify app that fixes three things about product photos. It works the same way on every theme in the list below.

1. **Each colour gets its own photos.** When a shopper picks Red on the product page, they see the red photos, plus any photo that belongs to no colour, like a size chart. The blue and yellow photos are hidden until someone picks Blue or Yellow.
2. **The collection card shows your cover photo.** You pick one photo per product, and that photo is what shoppers see on collection pages, in search results and in related products.
3. **Featured collections on your home page show the same cover.** The home page is often the first place a shopper sees a product, so the cover goes there too.

![Ploqo on the product page and on the collection card, before and after](/images/ploqo/help/supported-themes/hero.jpg)

## Pick your theme

I installed a fresh, unedited copy of each theme on my test store on 4 October 2026 and set Ploqo up on it. Each guide below walks through the setup in that theme and shows the product page, the collection card and the home page before and after, as screenshots from that theme.

| Theme | Product page layout | Product page opens on | Collection card cover | Home page cover | Guide |
| --- | --- | --- | --- | --- | --- |
| Dawn | Stacked grid | The picked colour's first photo | Yes | Yes | [Dawn guide](/ploqo/help/dawn-theme-variant-images) |
| Horizon | Stacked grid | The picked colour's first photo | Yes | Yes | [Horizon guide](/ploqo/help/horizon-theme-variant-images) |
| Craft | Stacked grid | The picked colour's first photo | Yes | Yes | [Craft guide](/ploqo/help/craft-theme-variant-images) |
| Savor | Stacked grid | The picked colour's first photo | Yes | Yes | [Savor guide](/ploqo/help/savor-theme-variant-images) |
| Fabric | Stacked grid | The picked colour's first photo | Yes | Yes | [Fabric guide](/ploqo/help/fabric-theme-variant-images) |
| Crave | Slider with thumbnails | The cover photo | Yes | Yes | [Crave guide](/ploqo/help/crave-theme-variant-images) |
| Refresh | Slider with thumbnails | The cover photo | Yes | Yes | [Refresh guide](/ploqo/help/refresh-theme-variant-images) |

In every theme, picking a colour shows that colour's photos plus the shared ones, and hides the other colours' photos. The one difference is the first view of the product page. A slider opens on the cover photo. A stacked grid keeps the photos in your product's order, so on my test product, where the colour photos come before the cover, the picked colour's first photo led.

If your theme is not in the table, Ploqo may still work on it. Every theme built on Shopify's current theme system (Online Store 2.0) accepts app blocks, which is how Ploqo adds itself. The guides above are the themes I have checked screen by screen.

## Why every theme shows the wrong photos without an app

Shopify lets you link exactly one image to each variant. A variant is one buyable version of a product, like the red T-shirt in size M. That one link is called the variant image, and Shopify has no field for a second one.

So when you have six photos of a red shirt, only one of them is the red variant's image. The other five belong to no colour at all. The theme cannot tell they are red photos, so it shows them for every colour.

Three parts of the storefront read that single link:

- **The product page gallery** jumps to the variant image when a shopper picks a colour, then shows every other photo too.
- **The collection card** shows the product's first photo, which is often not the photo you want shoppers to see first.
- **Featured collections on the home page** use the same card, so they show the same first photo.

Changing the variant image to fix one of these changes the other two. That is why so many merchants on the Shopify Community report that linking one photo to a colour "broke" their collection page.

If you would rather fix the product page without an app, the blog post on [how to add variant images in Shopify](/blog/shopify-variant-images) covers the free route and its limits.

## How setup works on any theme

The steps are the same on every theme. Only the name of the section you add the block to changes, and each theme guide shows the exact place.

1. **Install Ploqo** from the Shopify App Store and open it once.
2. **Add the Ploqo photos card** to your product page in the Shopify admin, and pin it.
3. **Pick each colour's photos.** Click Edit next to a colour and tick the photos that belong to it.
4. **Lock a cover photo** for the product.
5. **Add two app blocks in the theme editor.** The theme editor is the page where you customise your theme. You add the *Ploqo gallery filter* block to the product page and the *Ploqo card cover* block to the collection page.
6. **For the home page**, add the *Ploqo card cover* block there too and pick the collections your featured section shows.

![The Ploqo card on a product in the Shopify admin, with a locked cover and photos for each colour](/images/ploqo/help/shared/11-admin-card-explained.png)

An app block is a piece an installed app adds to your theme. You add it from the theme editor and you can remove it the same way. Ploqo does not edit your theme's code files.

## Where Ploqo keeps your settings

Ploqo saves which photos belong to which colour, and which photo is the cover, on the product itself in Shopify. It uses metafields for this. A metafield is an extra field on a product that holds information Shopify does not have a field for.

Because the settings live on the product, they stay in place when you switch themes. You add the two app blocks to the new theme and the photos are grouped the same way, with no need to map every product again.

## Definitions

- **Variant:** one buyable version of a product, such as Red / M.
- **Variant image:** the single image Shopify links to a variant.
- **Cover photo:** the one photo Ploqo shows first on the product page and on every card for that product.
- **Shared photo:** a photo you did not tick for any colour. It shows for every colour, which suits size charts and fabric close-ups.
- **App block:** a piece an installed app adds to your theme, placed from the theme editor.
- **Featured collection:** a home page section that shows products from one collection you choose.


---

# Privacy Policy

Welcome to PinFlow ("we", "our", or "us"). We are committed to protecting your personal information and your right to privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our Shopify app, PinFlow, and our website.

## 1. Information We Collect
When you install and use the PinFlow app, we automatically access certain types of information from your Shopify account:
*   **Store Information:** We collect your shop URL, email address, and store name to manage your account and communicate with you.
*   **Product Information:** We access your products, collections, and tags to help you generate and publish Pinterest pins automatically.
*   **Pinterest Account Information:** To publish on your behalf, we require standard authorization via the Pinterest API. We store authentication tokens securely.

## 2. How We Use Your Information
We use the information we collect primarily to provide, maintain, and improve our services. Specifically, we use your info to:
*   Provide PinFlow's AI-powered Pinterest assistant features.
*   Generate optimized pin titles, descriptions, and designs.
*   Maintain consistent posting schedules to your Pinterest boards.
*   Analyze app usage to improve our features and performance.
*   Communicate with you regarding updates, support, or billing.

## 3. Data Retention and Security
We implement reasonable technical and organizational security measures to protect your data. Your data is retained only as long as you have an active PinFlow subscription or installation. Upon uninstallation, we will purge your store data from our active databases in conformity with Shopify's data retention requirements.

## 4. Contact Us
If you have any questions or concerns about our Privacy Policy or our data practices, please contact us at contact@getpinflow.com.


---

# Terms of Service

By installing or using PinFlow ("the App"), provided by PinFlow ("we", "us", "our"), you agree to be bound by these Terms of Service. If you do not agree to these terms, do not use the App.

## 1. Description of Service
PinFlow is an AI-powered assistant designed for Shopify merchants to manage their Pinterest presence, design professional pins, and maintain consistent scheduling. The App interacts directly with your Shopify store data to facilitate content creation.

## 2. Account Requirements
*   You must have a valid Shopify account to use the App.
*   You must connect a valid Pinterest business account.
*   You are responsible for maintaining the security of your accounts and passwords.
*   You agree not to use the App for any illegal or unauthorized purpose, including spamming or violating Pinterest's community guidelines.

## 3. User Responsibilities
While PinFlow provides tools to ensure consistent and anti-spam posting, you are solely responsible for the content published to your Pinterest account. You retain all responsibility for complying with Pinterest's Acceptable Use Policies. We are not liable for any suspension or termination of your Pinterest account.

## 4. Intellectual Property
You retain all rights to the product images, data, and content you provide through your Shopify store. We retain all intellectual property rights to the PinFlow App, including its software, AI generation prompts, and interface designs.

## 5. Limitation of Liability
In no event shall PinFlow, its directors, employees, or agents be liable for any direct, indirect, incidental, special, or consequential damages arising out of or in connection with your use of the App, including but not limited to loss of sales, data, or reputation due to platform downtime or API issues.

## 6. Contact Us
If you have any questions about these Terms of Service, please contact us at contact@getpinflow.com.


---

<!--
Writing rules for this file:
- First "## " heading is where the on-page article starts (page.tsx slices from there).
- Escape currency dollars as \$ (remark-math).
- No em dashes. Use a regular hyphen.
- Short, plain sentences. Keep Avery counts factually correct (see the table below).
-->

---
title: "Free Address Label Template Maker (Avery-compatible)"
description: "How to make and print an Avery address label template for free. Pick a product number, add one address or mail-merge a list, and download a print-ready PDF at true size."
---

## Make an Avery address label template in your browser

[![Watch how it works](https://img.youtube.com/vi/qjCt7m9chVc/maxresdefault.jpg)](https://youtu.be/qjCt7m9chVc)

An address label template is a grid of small labels tiled onto a full sheet of
paper. You print the sheet, peel the labels off, and stick them on envelopes,
packages, or your return mail. The catch is that the grid has to line up exactly
with the pre-cut labels on your Avery sheet, or every label prints half off its
cell and the whole sheet is wasted.

This free maker builds that grid for you. Pick your Avery product number, type
one address or paste a whole mailing list, and download a print-ready PDF, PNG,
or SVG. It runs entirely in your browser, so your addresses never leave your
device, and there is no signup and no watermark.

## How to make address labels

1. **Pick your Avery template.** Look at the product number printed on your
   label sheet or its packaging (for example 5160 or 5167) and choose it from
   the list. The preview instantly shows the correct number of labels in the
   right grid.
2. **Choose a fill mode.** Use same-label mode to put one address on every label
   (great for return-address stickers), or mail-merge mode to print a different
   address on each label.
3. **Add your content.** Type the name, street, city, state, and zip, or paste a
   list of recipients. You can also import a CSV.
4. **Style it.** Pick a layout, font, colors, and alignment, add a logo, and
   scale the text size.
5. **Download and print.** Download the PDF and print it at 100% scale with
   fit-to-page turned off.

## Which Avery number should I use?

The right template depends on how big your labels are and how many you need per
sheet. These are the most common address label sizes on US Letter paper.

| Avery number | Label size | Grid | Per sheet | Best for |
| --- | --- | --- | --- | --- |
| 5160 | 2.625 x 1 in | 3 x 10 | 30 | Standard address labels |
| 5161 | 4 x 1 in | 2 x 10 | 20 | Wide address labels |
| 5162 | 4 x 1.333 in | 2 x 7 | 14 | Large address labels |
| 5163 | 4 x 2 in | 2 x 5 | 10 | Shipping labels |
| 5164 | 4 x 3.333 in | 2 x 3 | 6 | Large shipping labels |
| 5167 | 1.75 x 0.5 in | 4 x 20 | 80 | Return address labels |
| 5195 | 1.75 x 0.667 in | 4 x 15 | 60 | Return address labels |

On A4 paper, the Avery L-series covers the same jobs: L7160 prints 21 labels in
a 3 by 7 grid, L7161 prints 18, L7163 prints 14, and L7165 prints 8. If your
label stock is not an Avery size, use the Custom option to set your own rows,
columns, label size, margin, and gutter.

The default and most popular choice is **Avery 5160**, which prints 30 address
labels per sheet in a 3 by 10 grid. For small return-address stickers, **Avery
5167** prints 80 labels per sheet.

## Same label vs mail merge

Same-label mode copies one address into all of the cells on the sheet. This is
the return-address use case: your own name and address on every one of the 80
labels of an Avery 5167 sheet, ready to peel and stick on outgoing mail.

Mail-merge mode is for sending to many people. Each label gets a different
address, filled row by row across the sheet. Paste your list (separate each
recipient with a blank line so multi-line addresses stay together) or import a
CSV with name, street, city, state, and zip columns. If you have more recipients
than fit on one sheet, extra pages are added automatically, and each page prints
on its own Avery sheet.

## How to print so the labels line up

Alignment is the whole game with label sheets. Follow these steps every time.

- Download the **PDF**, not a screenshot. The PDF page is generated at the exact
  physical size (8.5 by 11 inches for Letter, or 210 by 297 mm for A4).
- In the print dialog, set the scale to **100%** and turn off **fit to page** or
  **shrink to fit**. Fit-to-page silently resizes the sheet and throws every
  label off by a few millimeters.
- Print one **test page on plain paper** first. Hold it up to the light against
  a blank Avery sheet to check the grid lines up with the die-cut labels.
- Once it lines up, load the real label sheet and print.

Because there is no fit-to-page and no watermark, what you see in the preview is
exactly what prints.

## Address label template vs Word and Google Docs

You can build an address label template in Microsoft Word or Google Docs, but it
is slower. In Word you open the Mailings tab, hunt for the matching Avery product
number, and then wrestle with a locked table where the cells are the labels. In
Google Docs you usually need a third-party add-on to get Avery sizing at all, and
mail-merge means wiring up a Google Sheet.

This tool skips all of that. The Avery grid is built the moment you pick the
product number, the mail merge is a paste or a CSV upload, and the output is a
clean PDF that prints 1:1. There is nothing to install, no template file to
download, and no account to create.

## Tips for clean address labels

- For return-address labels, use the compact return layout and the 5167 or 5195
  template so the small labels do not look cramped.
- Keep each address to four or five short lines. Very long lines are trimmed to
  fit the cell so they never overlap the next label.
- Uploading a logo switches on the with-logo layout, which places a small mark to
  the left of the address. It costs \$0 and makes business mail look finished.
- Reusing a partial sheet? Set the start-on-label number so printing begins on
  the first unused cell instead of wasting the labels you already peeled.

## Frequently asked questions

### Which Avery address label templates are supported?

For US Letter: 5160 (30 per sheet), 5161 (20), 5162 (14), 5163 (10), 5164 (6),
5167 return address (80), and 5195 return address (60), plus their 8000-series
equivalents. For A4: L7160 (21), L7161 (18), L7163 (14), and L7165 (8). There is
also a Custom size option for non-Avery label stock. The most common address
label is Avery 5160, which prints 30 labels in a 3 by 10 grid.

### How do I print the labels at the correct size?

Download the PDF and print it at 100% scale with fit-to-page turned off. The page
is generated at the exact physical size (8.5 by 11 inches for Letter or 210 by
297 mm for A4), so every label lands on its Avery cell. Run one test print on
plain paper, hold it up to a blank label sheet to confirm alignment, then print
on the real sheet.

### What is the difference between same-label and mail-merge mode?

Same-label mode tiles one address into every cell on the sheet, which is what you
want for return-address labels or a single business address. Mail-merge mode puts
a different address in each cell, so you can print a whole mailing list at once.
That mail-merge step is the feature most free design galleries hide behind a paid
plan.

### Can I import a list of addresses from a CSV or spreadsheet?

Yes. Switch to mail-merge mode and either paste your addresses (separate each
recipient with a blank line) or upload a CSV with name, street, city, state, and
zip columns. A downloadable sample CSV shows the exact format. Rows missing a
required name value are reported as warnings rather than silently dropped.

### Is this better than the address label template in Word or Google Docs?

It is faster for a print-ready sheet. In Microsoft Word or Google Docs you have
to find the matching Avery template, fight the table cells, and manually
mail-merge from a spreadsheet. Here you pick the Avery number, type or paste your
addresses, and the exact grid is built for you with a live preview, then you
download a PDF that prints 1:1 with no account and no watermark.

### Can I add a logo, change fonts, or center the text?

Yes. Upload a logo for the with-logo layout, pick any font, set the name and text
colors, choose left or centered alignment, and scale the font size up or down.
There are four layout styles: plain, centered, with-logo, and a compact
return-address style for the small 5167 and 5195 sheets.

### Is the address label maker free and is there a watermark?

It is completely free with no signup and no watermark. Everything runs in your
browser, your addresses never leave your device, and you can download as many
print-ready PDF, PNG, or SVG sheets as you like.

### I already peeled some labels off the sheet. Can I skip them?

Yes. Use the Start on label number control to leave the first labels blank so
printing begins on the first unused cell. This lets you reuse a partial Avery
sheet instead of wasting it.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Online Barcode Generator & UPC Maker

Generate barcode labels for your products instantly. You might need a simple **free barcode**. You might need a bulk **UPC maker**. You might need a full **print sheet of barcode labels**. This **free online barcode generator** has you covered. It supports EAN-13, UPC-A, CODE128, CODE39, and more. Pick a template. Customize colors. Download your labels. Print a single label. Create an Avery-compatible sheet. You need no signup to **generate barcode** images.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free Barcode Generator

[![Watch How It Works](https://img.youtube.com/vi/3SOtXYQmcIY/maxresdefault.jpg)](https://youtu.be/3SOtXYQmcIY)

This quick video walkthrough shows you how to pick a barcode format. Choose a label template. Customize colors. Download or print your barcode labels. Do it all in seconds.

## How to Create a Barcode Label

Creating a professional barcode label takes just 4 steps:

1. **Enter your product info**: Add the Name, price, SKU, vendor, and barcode number. Or use **Bulk Upload** to generate hundreds of labels from a CSV file.
2. **Choose a barcode format**: Use CODE128 for general use. Use EAN-13 for retail. Use UPC-A for US and Canada. Use CODE39 for warehouses.
3. **Pick a label template**: Choose Classic Retail, Minimal, Full Retail, or Price Tag. Choose Jewelry Tag, Shipping Label, Warehouse, Clothing Hang Tag, Round Sticker, or Asset Tag.
4. **Customise your colors and print style**: Choose from 16 curated palettes. Then print one label or fill a full label sheet.

Hit **Download** for a high-res PNG or SVG. Hit **Print** for one label. Hit **Print Sheet** to create a full page of barcode labels for Avery and A4 sheet layouts.

## Print Barcode Label Sheets

Do you need to print multiple barcode labels at once? Use the **Print Sheet** option. Generate a full page of repeated labels for common sheet layouts. These include Avery 5160, Avery 5163, Avery 5167, and generic A4 label sheets. This is ideal for product packaging, Shopify inventory, warehouse bins, retail shelves, and small batch product labeling.

For the best results, match the template to the physical label size before printing. Larger templates like Full Retail, Shipping Label, Warehouse, and vertical price tags are tricky. They may technically fit on tiny labels such as Avery 5167. However, the text and barcode can become too small to read or scan reliably. For small labels, choose a simple barcode-first template. For detailed retail or shipping labels, use a larger sheet layout. You can also use a dedicated thermal label size. For a tag with the price, the sale price, and the barcode on one label, use the [price tag maker](/tools/price-tag-generator).

## Bulk Generate from CSV

Do you need to generate distinct barcodes for your entire catalog at once? Use the **Bulk Upload** feature. Upload a CSV spreadsheet containing your product data. Include names, prices, SKUs, and barcode numbers. The tool parses your file locally. It renders a live row-by-row preview of your labels right in your browser. Once your design settings look perfect, export all your customized barcode label images. Download them as a single ZIP file. Everything processes on your device for maximum privacy and speed.

## Supported Barcode Formats

| Format         | Digits       | Common Use                           |
| -------------- | ------------ | ------------------------------------ |
| **CODE 128**   | Any ASCII    | General purpose, most versatile      |
| **EAN-13**     | 13 digits    | International retail products        |
| **EAN-8**      | 8 digits     | Small retail packages                |
| **UPC-A**      | 12 digits    | US and Canada retail                 |
| **CODE 39**    | Alphanumeric | Industrial, military, healthcare     |
| **ITF-14**     | 14 digits    | Shipping cartons and outer packaging |
| **MSI**        | 1-15 digits  | Inventory and warehouse management   |
| **Pharmacode** | 3-131070     | Pharmaceutical packaging             |
| **Codabar**    | A-D + digits | Libraries, blood banks, airbills     |

## Label Templates

### Classic Retail

This is a clean, balanced layout. It shows product name, price, SKU, barcode, and vendor. It is perfect for standard shelf labels sized at 2.625" × 1". It is Avery 5160 compatible.

### Minimal

This is a barcode-first design with just the essentials. The barcode takes center stage. Name and price sit below. It is great for clean, modern branding.

### Full Retail

This is the most detailed template. It features a colored vendor header band. It has prominent pricing, SKU, barcode, and custom text lines. It is ideal for professional retail environments.

### Price Tag

This is a compact vertical layout. The price acts as the hero element. It is great for clothing tags, market stalls, and pop-up shops.

### Jewelry Tag

This is a tiny, compact label. It is designed for small items like rings, earrings, and bracelets. It fits the standard 1.5" × 0.75" jewelry label size.

### Shipping Label

This is a large format (4" × 6") label. It includes a structured FROM header, product details, and a prominent barcode. It is perfect if you need to print standard **Zebra labels** or **Zebra barcode labels**. It is fully compatible with DYMO and Brother thermal label printers.

### Warehouse

This is a large, scan-friendly layout. It is designed for shelf bins and bulk inventory. It features a prominent SKU and wide barcode format.

### Clothing Hang Tag

This is a vertical tag designed for apparel. It features a prominent size or custom badge and bold pricing.

### Round Sticker

This is a circular label. It is designed for jars, bottles, and round containers. It features a compact center-aligned layout.

### Asset Tag

This is a slim horizontal strip. It is ideal for IT equipment and asset tracking.

## Color Palettes

Choose from 16 curated color palettes to match your brand:

- **Classic White**: Clean retail look with blue accents
- **Kraft Paper**: Artisan, organic feel with brown tones
- **Midnight**: Modern dark mode with purple accents
- **Rose Gold**: Luxury feel with red/pink tones
- **Forest**: Eco-friendly look with green accents
- **Sunset**: Warm, vibrant with amber accents
- **Ocean**: Professional blue theme
- **Monochrome**: Neutral, minimal greyscale
- **Lavender**: Soft purple luxury
- **Cherry**: Bold red energy
- **Slate**: Dark professional
- **Mint**: Fresh teal
- **Peach**: Warm coral
- **Coffee**: Dark neutral warm
- **Neon**: Matrix-style green and black
- **Pastel**: Soft pink and fuchsia

## Advanced Barcode Features for Merchants & Enterprise Users

We want to provide the absolute best value to businesses of all sizes. Our free barcode generator goes beyond simple image creation. It includes an extensive array of advanced, professional-grade settings. These are designed specifically for real-world retail environments. They work for complex supply chain logistics and rigorous industrial applications. You might run a small boutique. You might manage a sprawling e-commerce warehouse. You might set up a robust enterprise inventory system. These pro-level features are tailored to optimize your business workflow dramatically. They reduce operational friction. They minimize costly human errors. Here is a deep dive into how these powerful capabilities can revolutionize your daily operations:

### Custom Human-Readable Text Overrides

![Custom Text Override on Barcode](/images/tools/barcode-generator/barcode-custom-text.webp)
**What it exactly does:** This highly requested feature lets you encode a raw, system-friendly numerical identifier (like `123456789`) inside the scannable barcode. At the same time, it displays a completely different, clear, human-readable string underneath the barcode lines. You can show `Part #123-Blue`, `Size L`, or a custom product description.

**Why it matters for merchants:** In fast-paced retail and warehouse environments, efficiency is key. This feature makes manual inventory checks significantly faster and more accurate. Your warehouse picking staff, stockroom employees, and frontline cashiers can instantly read the product name directly below the barcode. They do not constantly need to rely on a physical scanner. This immediate visual context directly reduces manual picking errors. It streamlines the order fulfillment process. It vastly improves checkout speeds at the point of sale (POS). It bridges the gap between machine-readable data and human-friendly information.

### Precision Padding & Quiet Zone Controls

![Precision Padding and Quiet Zones](/images/tools/barcode-generator/barcode-padding.webp)
**What it exactly does:** This granular control mechanism gives you precise, pixel-perfect authority over the blank white space surrounding your generated barcode. This space is often called padding or the "quiet zone". You can adjust it on both the horizontal and vertical axes.

**Why it matters for merchants:** Reliable scanning is the backbone of any barcode system. All physical barcode scanners strictly require a "quiet zone". This includes handheld laser scanners and automated conveyor belt imagers. A quiet zone is a clear, unprinted border around the barcode. It helps the scanner sensor recognize exactly where the barcode data begins and ends. It prevents interference from surrounding text, graphics, or the edge of the label. Adjusting the padding to optimal levels ensures your barcodes scan reliably and instantly on the very first try. You might print on tiny retail jewelry tags. You might print on massive warehouse bin labels meant for scanning from a distance. Proper quiet zones guarantee flawless scan rates and prevent frustrating delays.

### Advanced Barcode Image Rotation

![Advanced Barcode Image Rotation](/images/tools/barcode-generator/barcode-rotation.webp)
**What it exactly does:** This flexible formatting option lets you instantly generate and export your barcode images rotated precisely. You can rotate them at 0, 90, 180, or 270 degrees. This adapts to any layout requirement.

**Why it matters for merchants:** Printing hardware and packaging designs are rarely one-size-fits-all. Not all thermal label printers output labels horizontally. You must consider the specific configuration of your Zebra, DYMO, Brother, or Rollo thermal printer. You also must consider the unique physical layout constraints of your custom product packaging. You may frequently need barcodes printed sideways (portrait) or completely inverted. This built-in rotation feature completely eliminates layout alignment headaches. It prevents the need for complex secondary image editing software. It ultimately saves you money by drastically reducing the number of wasted, misprinted label rolls.

### Checksum Verification Control

**What it exactly does:** This technical feature provides a simple toggle to explicitly include or exclude a mathematical check digit (checksum). This works for compatible barcode formats, such as Code 39 or Interleaved 2 of 5.

**Why it matters for merchants:** Data integrity is critical when tracking inventory or processing sales. A checksum acts as a built-in security measure. It is a calculation that verifies the structural accuracy of a barcode during a scan. It effectively catches and prevents misreads or partial scans (read errors). However, different legacy systems have different requirements. Having explicit control over the checksum calculation ensures your generated barcodes remain 100% compatible. They will work with your specific legacy Point of Sale (POS) systems. They will work with highly customized warehouse management systems (WMS). They will also work with older, proprietary scanning hardware that expects a barcode formatted in a very specific, strict manner.

### Comprehensive 2D and Extended Symbology Support

**What it exactly does:** Beyond standard 1D barcodes, our tool generates highly advanced, data-dense 2D barcodes. These include QR Codes, DataMatrix, PDF417, and Aztec codes. It does this seamlessly alongside extended 1D formats, postal codes, and GS1 DataBar variants.

**Why it matters for merchants:** The future of retail and logistics lies in rich data. 2D barcodes hold exponentially more data in a fraction of the physical footprint compared to traditional linear 1D barcodes. With a single, compact 2D code, you can encode extensive information. You can include entire website URLs linking to product manuals. You can include complex manufacturing lot numbers. You can add exact expiration dates, serial numbers, or even lengthy product specifications. All this fits neatly into a tiny square. This capability is absolutely ideal. It is often strictly required for compact electronic components. It is used in tightly regulated healthcare and pharmaceutical packaging. It is essential for detailed international shipping manifests and modern interactive marketing campaigns.

## Understanding Barcodes

At its core, a barcode translates characters and numbers into a visual pattern. Optical scanners can easily read this pattern. These patterns act as a digital fingerprint for physical items. They might be traditional vertical lines (1D) or complex pixel grids (2D). When scanned at a checkout register or warehouse terminal, they instantly fetch stored database details. These details include pricing, SKU variants, and stock quantity. This completely eliminates the need for manual data entry.

## The Value of Generating Your Own Labels

- **Cut Overhead Costs**: Stop paying recurring software subscription fees just to design and export standard product labels.
- **Minimize Human Error**: Automating the checkout process prevents cashiers from keying in the wrong price or item number.
- **Speed Up Fulfillment**: Warehouse workers can locate and verify the right products instantly with a quick scan. This streamlines daily logistics.
- **Seamless System Sync**: You can upload downloaded barcode images directly into any modern inventory tracker. You can also upload them into Point of Sale software for immediate use.

## Best Practices for Scanning Reliability

- **Verify Before Printing**: Always double-check your encoded text before committing to a massive print run. Pay special attention to long numeric strings.
- **Perform Trial Scans**: Generate a single test label. Scan it using a smartphone app or a standard laser scanner under typical lighting conditions.
- **Mind the Dimensions**: Avoid scaling barcodes down too much. If lines become too dense or blurry, scanners will fail to decode them. Give them ample breathing room on the package.
- **Invest in Hardware**: Thermal label printers (like Dymo or Zebra) generally produce sharper, smudge-proof lines. Standard inkjet office printers cannot match this quality.

## How to Use This Barcode Generator With Shopify

If you run an e-commerce store, you might be searching for a **Shopify barcode generator**. You can seamlessly use our tool alongside your Shopify store. Manage physical inventory without paying for premium apps.

### How to add barcode to Shopify product

To link our barcodes to your store, simply generate your barcode number here. You can also use your official GS1 UPC. Log in to your Shopify Admin. Go to **Products**. Select your product or variant. Paste the number into the **Barcode (ISBN, UPC, GTIN, etc.)** field located under the Inventory section.

### How to print barcode labels on Shopify

Shopify offers a basic Retail Barcode Labels app. However, you can use our tool to generate and print highly customized, high-resolution labels. Simply enter your Shopify SKU, price, and barcode data into our generator. Select a template. Hit **Print** to send it directly to your **Shopify barcode printer**.

### What barcode scanners work with Shopify POS?

If you run a retail location, you might wonder **how to use barcode scanner with Shopify POS**. Supported 1D and 2D Bluetooth scanners include the Socket Mobile S700 and S740. Any standard USB or Bluetooth **Shopify barcode scanner** acts as a keyboard wedge. It will instantly read the labels generated by our tool directly into your Shopify POS app.

## FAQ

### Is this barcode generator really free?

Yes, completely free. There is no signup. There are no watermarks. There are no limits. Generate as many barcode labels as you need.

### What barcode format should I use?

- For **retail products**: Use EAN-13 (international) or UPC-A (US/Canada).
- For **general purpose**: CODE128 is the most versatile. It supports letters, numbers, and symbols.
- For **shipping cartons**: ITF-14 is the standard.
- For **inventory management**: CODE128 or CODE39 work well.
- For **libraries or blood banks**: Codabar is the traditional standard.
- For **pharmaceutical packaging**: Pharmacode is industry-specific.

### Can I use these barcodes commercially?

Yes! The barcodes generated here are standard formats. However, for retail barcodes (EAN-13, UPC-A), you need to purchase a valid barcode number from GS1 or an authorized reseller. This tool generates the _visual barcode_ from your number. It does not assign numbers.

### What label printers and sheets are compatible?

The labels can be printed on any printer. You can print a single label or use **Print Sheet** for common Avery and A4 layouts. For dedicated label printers:

- **Zebra**: Download PNG and print via ZebraDesigner.
- **DYMO**: Download PNG and import into DYMO Label software.
- **Brother**: Use the print button or download PNG.
- **Avery sheets**: Print full sheets for Avery 5160 / 8160, Avery 5163 / 8163, Avery 5167, and generic A4 label sheets.

For tiny sheet labels like Avery 5167, use compact templates. Test-scan one page before printing in bulk. Detailed templates can become hard to read when compressed onto very small labels.

### Can I customize the label design further?

Currently, you can choose from 10 professionally designed templates. You can choose from 16 color palettes. We will be adding more templates soon. These will include custom Canva-designed templates. For now, download the SVG version. You can edit it further in any vector editor.

### What's the difference between PNG and SVG download?

- **PNG**: High-resolution raster image at 300 DPI. Best for printing and most label software.
- **SVG**: Vector format that scales to any size without losing quality. Best for further editing in design tools.

### Do barcodes work internationally?

Absolutely. Global retail heavily relies on standardized frameworks (like GS1). Always generate a widely recognized format, such as an EAN-13 or UPC-A. Scanners across different countries and retail chains will have no trouble parsing the symbol. The visual encoding is a universally understood machine language.

### How do I acquire an official UPC for retail?

You might be a growing brand needing to register products under your own corporate identity. You should register directly with GS1 to lease an official Company Prefix. However, you might be a smaller seller looking to keep upfront costs low. If you do not strictly require your own prefix, you can legally buy single, ready-to-use UPC codes through verified third-party brokers.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     4. The "## Frequently asked questions" answers must match FAQ_ITEMS in page.tsx word for word. -->

# Free Bill of Lading Template

Fill in a **bill of lading template** and download a print-ready PDF in a couple of minutes. Add the shipper, consignee, and carrier, list each freight line with its weight and NMFC class, pick the freight charge terms, and sign the shipper and carrier certifications. It is free, runs entirely in your browser, and needs no signup.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## What Is a Bill of Lading?

[![Watch how the free Bill of Lading generator works](https://img.youtube.com/vi/KH6c8q-F-gU/maxresdefault.jpg)](https://youtu.be/KH6c8q-F-gU)

A bill of lading, often shortened to BOL or B/L, is the single most important document in a freight shipment. A carrier issues it to a shipper when it picks up the goods, and it does three jobs at the same time.

First, it is a **receipt**. It proves the carrier took the freight and lists what was handed over, in what condition, and how much it weighed. Second, it is a **contract of carriage**. The terms printed on it set out the carrier's duties and its liability if the freight is lost or damaged. Third, when it is a negotiable bill of lading, it is a **document of title**, which means the paper itself represents ownership of the goods.

A bill of lading is not a priced invoice. It shows no unit prices, no tax, and no money total. Instead it records the commodity description, the number of handling units and packages, the weight, the freight class, who pays the carrier, and the certifications that make it a legal shipping document. If you also need a document that shows value, that is a separate commercial invoice.

This tool produces the **straight (non-negotiable) bill of lading** used for most domestic less-than-truckload (LTL) freight in the United States. It follows the standard VICS-style Uniform Straight Bill of Lading layout that carriers, brokers, and freight forwarders recognize on sight.

## Straight vs Order vs Bearer Bill of Lading

There are three ways a bill of lading can be issued, and the difference matters because it decides who is allowed to receive the goods.

- **Straight bill of lading** is non-negotiable. The freight is released only to the named consignee. It cannot be endorsed or signed over to anyone else. This is the everyday BOL for domestic truck freight, and it is what the generator on this page creates.
- **Order bill of lading** is negotiable. It can be endorsed and transferred, so ownership of the goods can change hands while they are still moving. This is the type used with letters of credit in international trade, because a bank can hold the document as security.
- **Bearer bill of lading** is delivered to whoever physically holds the paper. It is the least common and the riskiest, because anyone who ends up with the document can claim the freight.

A straight bill of lading does not by itself transfer ownership of the goods, and it is not a demand for payment. It is a receipt and a contract. Keep that distinction clear: the priced sale is handled by your invoice, not by the BOL.

## What a Straight Bill of Lading Includes

A complete straight BOL carries a fixed set of blocks. This **blank bill of lading template** fills them in for you.

1. **Ship From (shipper)**: your legal business name, full address, and an internal shipper reference number (SID#) if you use one.
2. **Ship To (consignee)**: the legal name and full address of the party the freight is delivered to, plus a consignee reference (CID#) if there is one. On a straight BOL the goods are released only to this named party.
3. **Third Party / Bill To**: an optional block for when a third party pays the freight, such as a broker or the buyer's logistics partner. It appears on the document only when you fill it in.
4. **Carrier details**: the carrier name, the SCAC code (the four-letter Standard Carrier Alpha Code), the PRO number the carrier uses to track the shipment, the trailer number, and the seal number(s).
5. **BOL number and date**: your own numbering plus an optional customer or purchase order number. Everyone quotes the BOL number in messages about the shipment.
6. **Freight Charge Terms**: exactly one of Prepaid, Collect, or 3rd Party.
7. **Special instructions**: free text for the driver, such as a liftgate requirement or a call-before-delivery note.
8. **Carrier Information table**: one row per freight line, with handling units, packages, weight, the hazardous materials flag, the commodity description, the NMFC number, and the freight class. A grand total row sums the handling units and the weight.
9. **COD amount and declared value**: optional money fields that sit outside the freight table.
10. **Certifications and signatures**: a shipper certification and signature line, and a carrier certification and signature line, plus the Trailer Loaded and Freight Counted boxes.

## How to Fill Out the Freight Lines

The freight table is the heart of the bill of lading, and it is where a BOL differs most from an invoice. Each line describes a distinct commodity, not a priced product.

- **Handling Unit (Qty + Type)**: how the freight is palletized, for example 10 Pallets or 2 Skids. This is what a forklift moves.
- **Package (Qty + Type)**: the individual packages stacked on the handling units, for example 400 Cartons or 40 Bags.
- **Weight**: the total weight of that line. The tool adds every line into a grand total.
- **H.M.**: mark this with an X only when the commodity is a U.S. Department of Transportation hazardous material.
- **Commodity Description**: a plain description of the goods, for example "Machine parts, NOI" (not otherwise indexed).
- **NMFC #**: the National Motor Freight Classification item number for that commodity.
- **Class**: the freight class, one of the eighteen NMFC classes from 50 to 500.

Here is a worked example. Line one is 10 Pallets, 400 Cartons, 2,500 lb, class 85, "Machine parts, NOI". Line two is 2 Skids, 40 Bags, 1,000 lb, class 70, "Plastic pellets". The grand total row shows 12 handling units and 3,500 lb. There is no money subtotal, tax, or total anywhere on the document, because a bill of lading never carries prices.

## Freight Charge Terms: Prepaid, Collect, or 3rd Party

Freight charge terms answer one question: who pays the carrier? A straight bill of lading uses exactly three options.

- **Prepaid**: the shipper pays the freight charges. This is the most common term when the seller ships to a customer and builds freight into the price.
- **Collect**: the consignee pays the carrier on delivery. This is common when the buyer arranges and pays for transport.
- **3rd Party**: a party named on the Bill To block pays, neither the shipper nor the consignee. This is normal when a freight broker or a managed logistics provider is billed.

Pick the term on the BOL tab and it prints on the face of the document so the carrier bills the right party.

## Freight Class, NMFC, and Declared Value

Freight class comes from the National Motor Freight Classification system. It groups every commodity into one of eighteen classes, from 50 for dense, easy-to-handle freight up to 500 for light, bulky, or fragile freight. A higher class means a higher rate, because low-density and awkward freight takes up more trailer space and is harder to handle. The NMFC number points to the exact commodity listing that sets the class. This tool lets you choose any of the eighteen valid classes and does not invent classes outside the 50 to 500 range.

Declared value protects you if the freight is lost or damaged. Carrier liability on interstate truck freight is governed by the Carmack Amendment and by the carrier's tariff, and it can be limited unless the shipper states a value in writing. The declared value clause on the bill of lading invites you to do exactly that. Declaring a value can raise the freight rate, but it means the carrier is on the hook for the amount you stated rather than a low per-pound tariff cap. If the shipment is high value, declare it.

## Certifications and Signatures

A bill of lading is signed twice. The shipper certifies that the materials are properly classified, packaged, marked, and labeled, and are in proper condition for transportation under the applicable U.S. Department of Transportation regulations. The carrier acknowledges receipt of the packages and any required placards and certifies that the property was received in good order, except as noted. The Trailer Loaded box records whether the shipper or the driver loaded the trailer, and the Freight Counted box records who counted the pieces. These certifications are what turn a packing list into a legal freight document, and they are different from the signed declaration on a commercial invoice.

## Bill of Lading vs Commercial Invoice vs Packing Slip

These three documents often travel together, but they answer different questions. The **bill of lading** is the contract of carriage and the receipt for the freight; it is signed by the carrier. The **commercial invoice** is the priced customs document for an international shipment; it shows value, HS codes, and country of origin. The **packing slip** is a simple contents list for the receiver to check off on arrival. Only the commercial invoice carries prices. Use the BOL for the freight, and pair it with a commercial invoice when the shipment crosses a border. PinFlow has free generators for all three so you can produce a matching set.

## Authoritative Sources

For the legal background on bills of lading and carrier liability, see the [Federal Motor Carrier Safety Administration (FMCSA)](https://www.fmcsa.dot.gov/), which administers the interstate motor carrier rules in 49 CFR. For a plain-language definition of the receipt, contract, and document-of-title roles, see [Investopedia's Bill of Lading entry](https://www.investopedia.com/terms/b/billoflading.asp). The layout this tool follows is the standard Uniform Straight Bill of Lading, the VICS-style format used across the North American LTL industry.

## Frequently asked questions

### What is a bill of lading?

A bill of lading (BOL) is the legal document a carrier issues to a shipper when it picks up freight. It is three things at once: a receipt for the goods, a contract of carriage between the shipper and the carrier, and, when it is negotiable, a document of title. It is not a priced invoice, so it shows no unit prices and no money total. It records what is being shipped, its weight and freight class, who pays the freight, and the shipper and carrier certifications.

### What is the difference between a straight and an order bill of lading?

A straight bill of lading is non-negotiable: the freight is delivered only to the named consignee, and it cannot be endorsed or transferred to anyone else. An order bill of lading is negotiable: it can be endorsed and transferred, so it is used with letters of credit and lets ownership of the goods change hands while they are in transit. A bearer bill of lading is delivered to whoever physically holds it. This generator produces the straight, non-negotiable bill of lading used for most domestic LTL freight.

### Do I put prices on a bill of lading?

No. A bill of lading is a freight document, not a commercial or tax invoice, so it never carries unit prices, tax, or a money subtotal or total. It records the commodity description, the number of handling units and packages, the weight, the NMFC freight class, and who pays the carrier. If you need a priced document for customs or payment, use a commercial invoice alongside the BOL.

### What are the freight charge terms Prepaid, Collect, and 3rd Party?

Freight charge terms state who pays the carrier. Prepaid means the shipper pays the freight charges. Collect means the consignee (the receiver) pays them on delivery. 3rd Party means a separate party named on the Bill To block pays, which is common when a broker or the buyer's logistics partner is responsible. These are the only three terms a straight bill of lading carries.

### What is freight class and the NMFC number?

Freight class is the National Motor Freight Classification (NMFC) class that groups a commodity by how hard it is to ship. There are eighteen classes, from 50 for dense, easy-to-handle freight up to 500 for light, bulky, or fragile freight; a higher class means a higher rate. The NMFC number identifies the specific commodity listing within that system. This tool lets you pick any of the eighteen valid classes (50 to 500) and does not invent classes outside that range.

### What does the H.M. column mean on a bill of lading?

The H.M. column flags hazardous materials. Mark it with an X when the commodity on that line is a U.S. Department of Transportation hazardous material, because hazmat freight has to be properly classified, packaged, marked, and labeled, and the shipper certifies that on the bill of lading. Leave it blank for non-hazardous freight.

### What is declared value on a bill of lading?

Declared value is the value the shipper states in writing for the freight, and it governs the carrier's liability limit if the goods are lost or damaged. Where the rate depends on value, the shipper is required to declare it; if no value is declared, the carrier's liability can be limited by its tariff or by the Carmack Amendment. Stating a declared value can raise the freight rate but protects the full value of the shipment.

### Is this bill of lading generator free?

Yes. This bill of lading generator is completely free, needs no signup, and creates unlimited bills of lading. Everything runs in your browser, so your shipper, consignee, and freight data never leaves your computer. The exported PDF carries no watermark and no branding.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Break-Even Calculator

Work out exactly how much you need to sell to stop losing money. Our free **break-even calculator** takes your fixed costs, your variable cost per unit, and your selling price, then shows the units and revenue you need to break even. It is built for Shopify sellers and ecommerce merchants who want a clear answer before they price a product or set an ad budget. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Break-Even Calculator

[![Watch How It Works](https://img.youtube.com/vi/7u-mAnPKglo/maxresdefault.jpg)](https://youtu.be/7u-mAnPKglo)

This **break even point calculator** needs three numbers. Here is how to use it:

1. **Enter your fixed costs**: These are the costs that stay the same no matter how much you sell, like your Shopify plan, apps, rent, and salaries. A monthly figure works well.
2. **Enter your variable cost per unit**: This is what one extra sale costs you: product cost (COGS), shipping, payment and transaction fees, and pick and pack.
3. **Enter your selling price per unit**: This is what the customer pays for one unit.
4. **Add a target profit (optional)**: If you have a profit goal on top of breaking even, enter it. The tool shows the extra units you need to hit it.
5. **Read your results**: The calculator instantly shows the units to break even, the revenue to break even, your contribution margin per unit, and your margin percent.

![Break-even calculator showing 1,000 units and \$25,000.00 revenue to break even from \$10,000 fixed costs, \$15 variable cost, and \$25 selling price, with a \$10.00 contribution margin per unit, 40% margin, and a break-even analysis chart where the revenue and total cost lines cross](/images/tools/break-even-calculator/break-even-calculator-results.webp)

## How to Calculate Break-Even by Hand

You can run a **break even analysis** with a calculator and three numbers. Follow these steps:

1. **Find the contribution margin per unit**: Subtract the variable cost from the selling price. This is the money each sale leaves over to pay your fixed costs.
2. **Divide fixed costs by the contribution margin**: This gives the number of units you need to sell to break even. Round up, because you cannot break even on a fraction of a sale.
3. **Multiply units by the selling price**: This gives the revenue you need to break even. You can also divide fixed costs by the contribution margin ratio to get the same number.

That is the whole method. The calculator above does this for you and updates as you type.

## The Break-Even Formula

The **break even formula** has two parts: one for units and one for revenue. First, the contribution margin:

$$
\text{Contribution margin} = \text{Selling price} - \text{Variable cost}
$$

Then the break-even point in units:

$$
\text{Break-even units} = \frac{\text{Fixed costs}}{\text{Contribution margin}}
$$

And the break-even point in revenue:

$$
\text{Break-even revenue} = \frac{\text{Fixed costs}}{\text{Contribution margin} / \text{Selling price}}
$$

The contribution margin ratio is just the contribution margin divided by the selling price. In a spreadsheet like Excel, the units formula is `=FixedCosts/(Price-VariableCost)`, so you can build a quick **break even calculator excel** sheet from the same math.

### Worked Example

Say you run a Shopify t-shirt store. Your fixed costs are **\$10,000** a month. Each shirt costs you **\$15** in product, shipping, and fees, and you sell it for **\$25**.

First find the contribution margin:

$$
\text{Contribution margin} = 25 - 15 = 10
$$

Then divide fixed costs by that margin to get the units:

$$
\text{Break-even units} = \frac{10{,}000}{10} = 1{,}000 \text{ units}
$$

So you break even at **1,000 shirts**, which is **\$25,000** in revenue, with a contribution margin of **\$10** per unit, or **40%**.

A smaller store with **\$1,000** in fixed costs, a **\$10** variable cost, and a **\$25** price breaks even at just **67 units**, because the contribution margin is higher at **\$15** (60%).

## Fixed Costs vs Variable Costs for a Shopify Store

The split between fixed and variable costs is the heart of every break-even analysis. Here is what goes in each bucket for an ecommerce store:

**Fixed costs** stay the same whether you sell 10 orders or 10,000:

- Your Shopify plan and paid apps
- Rent, warehouse, or storage fees
- Salaries and contractor retainers
- Software subscriptions and accounting tools

**Variable costs** change with every unit you sell:

- Product cost, also called COGS
- Shipping and fulfilment
- Payment and transaction fees
- Pick, pack, and packaging materials

## Break-Even vs Payback Time

Break-even and payback are not the same metric. The break-even point tells you the sales volume where revenue covers costs. The payback period tells you how long it takes to earn back a specific investment, like the cost of new equipment or a marketing push. Use break-even for pricing and feasibility, and use payback when you want to know how many months an investment takes to pay for itself.

## Work Backwards: The Most You Can Pay for Inventory

You can rearrange the **break even point calculator** to solve for your costs instead of your volume. If you know how many units you can realistically sell, you can work out the most you can afford to pay per unit and still break even.

Rearrange the formula so the variable cost is the unknown:

$$
\text{Max variable cost} = \text{Selling price} - \frac{\text{Fixed costs}}{\text{Target units}}
$$

This is a useful sourcing check. If a supplier quote pushes your variable cost above this number at your expected volume, the deal will not break even.

## Why Break-Even Matters for Ecommerce

Knowing your break-even point keeps your pricing honest. It tells you the minimum volume a product needs, whether a price is high enough to be feasible, and how much room you have for discounts. It also sets a ceiling on ad spend. Once you know the contribution margin on each order, you can work out your [profit margin](/tools/profit-margin-calculator) and your **break even ROAS**, which is the return on ad spend where ad revenue exactly covers product and ad cost. A store with a 40% margin breaks even on ads at a 2.5x ROAS, so any campaign below that loses money on a per-order basis.

## Frequently Asked Questions

### What is a break-even point?

The sales level where total revenue equals total costs, so you make zero profit. Below it you lose money; above it you profit.

### How do I calculate the break-even point in units?

Divide fixed costs by the contribution margin per unit (selling price minus variable cost). Example: \$10,000 / (\$25 - \$15) = 1,000 units.

### What is the break-even revenue formula?

Fixed costs divided by the contribution margin ratio (contribution margin / selling price). For example, \$10,000 / 0.40 = \$25,000.

### What is the difference between fixed and variable costs?

Fixed costs stay the same each month, like your Shopify plan, apps, and rent. Variable costs change per unit sold, like COGS, shipping, and fees.

### Is this break-even calculator free?

Yes, it is 100% free, with no signup and unlimited calculations.

### How do I find break-even for multiple products?

Estimate your sales mix, work out a blended average contribution margin across your products, then use that single number in the formula.

### What is break-even ROAS?

The return on ad spend where ad-driven revenue exactly covers the product cost plus the ad cost. It uses the same contribution-margin idea applied to advertising.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     4. The "### question" blocks under "## Frequently asked questions" are the source for FAQ_ITEMS in
        page.tsx. After editing them, run the scratchpad sync_faq.py script (see add-tool-runs). -->

---
title: Bulk Coupon & Discount Code Generator
description: Free coupon, promo and discount code generator. Make up to 5,000 unique random codes in bulk, attach a discount rule, and download a CSV for a Shopify import.
---

# Bulk Coupon & Discount Code Generator

Generate up to 5,000 **unique, random coupon codes** in one click and download them as a text file or a CSV. Set a prefix like SAVE, pick a length and character set, attach a percentage, fixed amount, or free shipping rule, then export a Matrixify-ready **discounts.csv** for a Shopify import. Every code in a batch is different, and everything runs in your browser. No signup, no upload, no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Generate Bulk Discount Codes

[![Watch how the free Bulk Discount Code Generator works](https://img.youtube.com/vi/CIpvoh-0IPY/maxresdefault.jpg)](https://youtu.be/CIpvoh-0IPY)

A batch of unique codes takes about a minute. The generator above has two cards on the left and the list of codes on the right.

1. **Set the code format and quantity.** In the **Code format** card, add a prefix like SAVE, an optional suffix, and the random length (3 to 16 characters). Pick a character set: letters and digits, letters only, or digits only. Leave **Avoid ambiguous characters** on to remove 0, O, 1, I, and L. Turn on **Group into blocks** to split a code like SAVE-8F3K-2QP9. Then set the **Quantity**, anywhere from 1 to 5,000 codes.

![The Code format card with the prefix SAVE, an 8-character random length, Letters and digits selected, Avoid ambiguous characters switched on, and a quantity of 50](/images/tools/bulk-discount-code-generator/step-code-format.webp)

2. **Attach a discount rule.** In the **Discount rule** card, pick percentage off, a fixed amount off, or free shipping. You can add a minimum purchase amount or a minimum quantity of items, a total-use cap, one use per customer, a start date, and an end date. A campaign title is optional and goes into the Title column of the Shopify file.

![The Discount rule card set to Percentage off at 20, no minimum requirement, and One use per customer switched on](/images/tools/bulk-discount-code-generator/step-discount-rule.webp)

3. **Check the preview.** The **Generated codes** panel lists the first 50 codes with a count and a one-line summary of the rule, such as "20% off, 1 use per customer, no end date". The rest of the batch is in every download. Press **Regenerate** for a fresh batch.

![The Generated codes panel showing 50 SAVE codes, the rule summary line, and the Regenerate and Copy all buttons](/images/tools/bulk-discount-code-generator/step-preview.webp)

4. **Export the codes.** Click **Copy all**, or download one of three files: **.txt** (one code per line), **codes.csv** (a single Code column), or **discounts.csv** (every code with its discount rule, in the column layout the Matrixify app imports).

![The Download row with the .txt, codes.csv, and discounts.csv buttons and the note about importing discounts.csv with Matrixify](/images/tools/bulk-discount-code-generator/step-export.webp)

The preview changes as you edit the format, so you see the codes before you download them.

## A coupon code generator, promo code generator, and discount code generator in one

Stores use three names for the same thing: a short string a shopper types at checkout to get money off. A coupon code, a promo code, a voucher code, and a discount code all work the same way. This tool makes all of them, so it is a coupon code generator, a promo code generator, and a discount code generator at once. The only difference is the word you use in your emails and on your flyers.

What the tool makes:

- **Random codes in bulk.** One click makes up to 5,000 codes, each different from the others in the batch.
- **Codes in your own style.** A prefix such as SPRING, a suffix such as 25, and blocks such as SPRING-K7Q3-M9XA.
- **A file your store can read.** The discounts.csv carries each code with its discount type, value, dates, limits, and minimum.

What the tool does not make is the coupon itself, the card or flyer a customer holds. For that, use the [Coupon Maker](/tools/coupon-template-generator). It designs a printable coupon and can print a different code from this batch on each one (see the next section).

A random generator is safer than making codes up by hand. Hand-made codes such as SAVE10 or SUMMER are easy to guess, and once one leaks to a coupon site it works for anyone. Random codes from a large pool are impractical to guess, and with **One use per customer** or a total-use cap, a leaked code only works a limited number of times.

## Print each code on its own coupon

A code only reaches a customer if it is printed, emailed, or posted somewhere. To print a stack of coupons with a different code on each one:

1. **Make the codes here first.** Generate the batch and download the **.txt** file or click **Copy all**. Import the **discounts.csv** with Matrixify (see below), so every code works at checkout.
2. **Open the Coupon Maker and design the coupon.** Pick a template, add your offer and store name, then open the **Print sheet** tab and choose a coupon size and paper.

![The Coupon Maker Print sheet controls with the 3.5 x 2 in size, US Letter paper, and Unique code on each coupon selected, here set to generate codes; Paste a list is the option beside it](/images/tools/coupon-template-generator/step-sheet-controls.webp)

3. **Paste your codes.** Choose **Unique code on each coupon**, then **Paste a list**, and paste the codes from this tool, one per line. Each coupon prints its own code in list order, and its barcode holds the same code.

![The Coupon Maker print sheet preview with 8 coupons on a US Letter page, each with its own SAVE code and barcode, and crop marks at the corners](/images/tools/coupon-template-generator/step-sheet-preview.webp)

The Coupon Maker prints up to 500 coupons per sheet PDF. If your batch is bigger, paste the codes in groups of 500. Making the codes here first keeps one list in both places: the codes in your store and the codes on paper match.

## Unique Codes vs Shared Codes

There are two ways to run a promotion with codes.

A **shared code** is a single string, like WELCOME10, that every customer types. It is quick to set up, but it has downsides. It can end up on coupon sites within hours. You cannot tell one customer from another. A cap of "first 100 people" is hard to enforce, and one buyer can use it many times unless you limit it.

A **unique code** gives each customer their own string. This is what bulk generation is for. With a batch of unique codes you can:

- Give every influencer or affiliate their own code and see who drove sales.
- Send a single-use code to each newsletter subscriber, so a leak only burns one code.
- Run a loyalty reward where each member gets a personal code that expires.
- Print unique codes on packaging inserts, event flyers, or scratch cards.

## How Uniqueness and the Character Set Work

Every code has a fixed part (your prefix and suffix) and a random part. The random part is what makes each code different. The generator draws random characters from your chosen pool and throws away any code it has already produced, so a batch of 500 has exactly 500 distinct codes.

The size of the pool matters. With digits only and **Avoid ambiguous characters** on, the pool is just 8 characters (2 through 9). A 3-character random part then has only 8 x 8 x 8 = 512 possible codes. Ask for 5,000 codes at that size and there are not enough to go around. The tool then caps the batch at 512 and shows a warning, instead of freezing while it looks for codes that do not exist. To get more room, add letters to the pool or increase the length.

The default is 8 characters from letters and digits with the ambiguous ones removed. That pool has 31 characters, so there are 31 to the power of 8, or over 850 billion, possible codes. With the ambiguous characters allowed, the pool is 36 characters and the count passes 2.8 trillion. Either is far more than any promotion needs, and far too many for someone to guess a working code.

## Can You Import Discount Codes into Shopify?

**Shopify's own CSV import does not cover discount codes.** You can export your discounts to a CSV from the Shopify admin, but the admin has no matching import. A plain list of codes in a spreadsheet will not create discounts by itself.

There are three common ways to get bulk codes into a store, and this tool feeds all of them:

1. **The Matrixify app.** Download **discounts.csv** from this tool and import it in Matrixify, an app from the Shopify App Store that imports and exports store data with spreadsheets. It reads the columns and creates every code as a Shopify discount with your rule attached.
2. **A bulk discount app.** Several apps in the Shopify App Store accept a list of codes. Use the plain .txt or codes.csv for those.
3. **The Shopify Admin API.** If a developer works on your store, the codes.csv is a ready source list. The `discountRedeemCodeBulkAdd` mutation adds up to 250 codes per call to an existing discount.

Whichever route you take, the codes and the file come from this page for free.

## The Matrixify discounts.csv Columns

The **discounts.csv** download follows the column layout in Matrixify's discounts documentation. Each row is one discount code. The columns are:

- **Code**: the generated code.
- **Title**: a readable name. With a campaign title of "Summer Sale" it reads like "Summer Sale SAVE8F3K2QP9". Without one, the code is its own title.
- **Type**: "Amount off Order" for percentage and fixed amount, or "Free Shipping".
- **Method**: always "Code", for a discount the customer types in.
- **Value Type**: "Percentage", "Fixed Amount", or blank for free shipping.
- **Value**: a plain number like 20 for a percentage, a decimal like 10.00 for a fixed amount, or blank for free shipping.
- **Command**: always "NEW", so the import creates the discount.
- **Starts At** and **Ends At**: the date you pick, written as YYYY-MM-DD with 00:00:00 for the start and 23:59:59 for the end. A blank date stays blank.
- **Limit Total Times**: a whole number, or blank for no limit.
- **Limit One Use Per Customer**: TRUE or FALSE.
- **Minimum Requirement** and **Minimum Value**: "Amount" with a subtotal such as 50.00, or "Quantity" with a number of items. Blank when there is no minimum.

Any field with a comma or a quote mark is wrapped in quotes, so the file opens cleanly in Excel, Numbers, or Google Sheets.

## Tips for Running a Bulk Code Campaign

- **Brand the prefix.** A prefix with your store name or campaign makes codes easy to recognize and easy to search for in reports.
- **Keep codes short enough to type.** 6 to 10 random characters is long enough to be hard to guess and short enough to type on a phone.
- **Avoid ambiguous characters for print.** If codes go on paper or get read aloud, keep the switch on.
- **Set an end date.** An expiry date gives customers a reason to act and stops old codes from working forever.
- **Cap total uses.** For a "first 100 customers" offer, generate 100 codes and set one use each.
- **Track by channel.** Give each channel its own prefix or batch so you can see which one converts.
- **Match the coupon to the code.** Design a printable coupon in the [Coupon Maker](/tools/coupon-template-generator) and print or email it with the code.

Codes are not the only option. If the discount should grow as the customer adds more items, you do not need codes or an app. Automatic discounts with a minimum quantity give you a tier ladder for free, and Shopify applies the better tier rather than stacking them. I tested that setup alongside a build-your-own bundle and wrote it up in [how to build a Shopify mix and match bundle](/blog/shopify-mix-and-match-bundle). For a single code made by hand in the Shopify admin, see [how to create a discount code in Shopify](/blog/shopify-create-discount-code).

## Frequently asked questions

### Is this bulk discount code generator free?

Yes, it is free with no signup. Generate up to 5,000 unique codes at a time and download them as a .txt file, a codes.csv, or a Matrixify-ready discounts.csv as often as you want. Everything runs in your browser, so your codes are never uploaded to a server.

### Can I use this as a coupon code generator or promo code generator?

Yes. Coupon codes, promo codes, voucher codes, and discount codes are the same thing at checkout: a string the shopper types to get a discount. Set a prefix that fits your campaign, such as PROMO or VIP, pick a length, and generate up to 5,000 random codes at once.

### Are the generated discount codes unique?

Yes. Every code in a batch is different. The tool draws random characters and throws away any duplicate, so a batch of 500 has 500 different codes. If you ask for more codes than the character set and length can produce, the tool caps the batch and shows a warning instead of hanging.

### How do I print each code on its own coupon?

Generate the codes here and copy them or download the .txt file. Then open the Coupon Maker, design your coupon, open the Print sheet tab, choose Unique code on each coupon, and paste the codes with Paste a list. Each coupon prints its own code, up to 500 coupons per sheet PDF.

### Can I import these discount codes into Shopify with a CSV?

Not with Shopify's own CSV import, which does not cover discount codes. The most common route is the Matrixify app: download the discounts.csv file here, then import it in Matrixify to create every code as a Shopify discount. You can also give the plain code list to a bulk discount app or add the codes through the Shopify Admin API.

### What is the Matrixify discounts.csv format?

It is the column layout the Matrixify app reads to create discounts. Each row has Code, Title, Type, Method (Code), Value Type, Value, Command (NEW), Starts At, Ends At, Limit Total Times, Limit One Use Per Customer, Minimum Requirement, and Minimum Value. A percentage writes the value as a plain number like 20, a fixed amount writes a decimal like 10.00, and free shipping writes the Free Shipping type with no value.

### What is the difference between a unique code and a shared code?

A shared code, like WELCOME10, is one code that every customer uses. It is easy to set up but easy to leak to coupon sites, and you cannot tell customers apart. A unique code gives each customer their own single-use string, so you can cap redemptions, limit one use per customer, and see which channel or person redeemed it.

### How do I avoid confusing characters in the codes?

Keep the Avoid ambiguous characters switch on. It removes 0, O, 1, I, and L from the pool, so a customer cannot mistake a zero for the letter O or a one for the letter I. This matters most for printed coupons and codes read aloud over the phone.

### Can I add a prefix, suffix, or dashes to every code?

Yes. Add a prefix like SAVE or a suffix so codes are branded and searchable, and turn on Group into blocks to split the code into parts such as SAVE-8F3K-2QP9. Turning grouping off gives you one unbroken string. The prefix and suffix are the same on every code, so each code differs only in its random middle.

### What discount types can I attach to the codes?

Percentage off, a fixed amount off, or free shipping. You can also set a minimum purchase amount or a minimum quantity of items, cap total uses, limit each code to one use per customer, and set start and end dates. All of that goes into the Matrixify discounts.csv columns, so Matrixify can create the rule on import. Run a test import with a few codes first and check one discount in your admin.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---

title: "Free Business Card Maker - Online Generator"
description: "Create professional business cards online for free. Add your logo, choose from 12 modern templates, generate QR codes, and download high-resolution PNG, SVG, or PDF instantly."

---

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Make a Free Business Card Online

[![Watch How to Make a Free Business Card Online](https://img.youtube.com/vi/ZUJUmhuxUPA/maxresdefault.jpg)](https://youtu.be/ZUJUmhuxUPA)

A quick walkthrough showing how to pick a template. Add your logo and brand colors. Generate a QR code. Download a print-ready business card. It is completely free. No sign-up is required.

## Why You Need a Professional Business Card

In the digital age, a physical business card remains highly effective. It is one of the best networking tools. You might be at a conference. You might attend a local meetup. You might meet a potential client over coffee. Handing over a well-designed business card leaves a lasting, tangible impression. A LinkedIn connection simply cannot match it.

Our **Free Business Card Maker** is designed specifically for small business owners. It works perfectly for freelancers and entrepreneurs. You need a professional card quickly. Stop searching for a "business card maker near me". You can design your own card right from your browser. There is no need to buy an expensive business card maker machine. Do not hire a business card machine maker to get print-shop quality. We built what we believe is the best business card maker app. It gives you high-end results without the hassle of complex design software.

### Key Benefits of a Great Business Card:

- **Instant Credibility:** A clean, well-structured card shows you take your business seriously.
- **Brand Recall:** Include your logo and brand colors. This helps people remember you long after the initial meeting.
- **Frictionless Contact:** Provide all your essential contact information at a glance. Make it easy for leads to reach out.

## Why Shopify Merchants Love Our Tool

Do you run an ecommerce store on platforms like Shopify? Physical business cards are a powerful offline marketing asset:

![Unboxing experience with a branded business card inside a shipping box](/images/tools/business-card-maker/unboxing.webp)

- **Unboxing Experience:** Drop a beautifully designed candle maker business card or boutique shop card into every shipping package. It adds a premium touch to your order fulfillment. It encourages repeat purchases.
- **In-Person Sales & Pop-ups:** You might sell at local craft fairs, farmers markets, or pop-up shops. Hand out a card with a QR code linking directly to your Shopify store. This bridges the gap between offline and online sales.
- **Loyalty Programs & Discounts:** Use our powerful business card maker with qr code functionality. Link directly to a special discount code. Link to a hidden Shopify product page. Reward your best customers easily.
- **Wholesale & B2B Networking:** A professional card builds instant trust when meeting suppliers or retail partners. You might need a photography business card maker for your creative portfolio. You might need a sleek design for retail. Our templates adapt instantly to your needs.

## Features of Our Free Business Card Maker

Our tool is packed with advanced features. It gives you complete control over your design:

![Scanning a QR code on a business card with a smartphone](/images/tools/business-card-maker/qr-scan.webp)

- **12 Professional Templates:** Choose from a wide variety of layouts. These include Modern, Classic, Minimal, Bold, and dedicated Loyalty card designs. Match your brand's exact aesthetic.
- **Advanced QR Code Integration:** Generate a custom QR code for your card. Place the QR code exactly where you want it. Use our intuitive 5x5 position grid.
- **Granular Brand Colors:** Do not settle for generic colors. Customize your card's background, text, and accent colors. Perfectly match your brand identity.
- **Flexible Logo Uploads:** Upload your logo directly from your device. Alternatively, link to an external image URL. We ensure it renders at the highest possible quality.
- **Multi-Format High-Resolution Export:** Download your finished card in the exact format you need. Get a high-quality, print-ready **PDF**. Get a sharp vector **SVG** for digital use. Get a crisp **PNG** image.
- **Real-Time Live Preview:** Watch your card update instantly in the live preview panel. See changes as you type, change colors, or adjust QR code positions.

## How to Use Our Free Business Card Generator

Creating your perfect business card is fast and entirely frictionless:

1. **Select a Template:** Browse our 12 stunning templates. Pick the one that best suits your business.
2. **Enter Your Details:** Fill in your name, job title, and company information.
3. **Add Your Branding:** Upload your company logo or link an image URL. Select your brand's color palette.
4. **Customize Your QR Code:** Enable the QR code. Enter your URL, like your Shopify store link. Place it perfectly using the 5x5 position grid.
5. **Provide Contact Info:** Add your email, phone number, website, and physical address.
6. **Download:** Click to instantly download your high-resolution PNG, SVG, or print-ready PDF. It comes sized at the standard 3.5" x 2". It is completely free. No email signup is required.

## What Makes Our Tool Better?

Unlike other business card generators, we prioritize your experience and privacy:

- **100% Free, No Strings Attached:** We do not force you to create an account. You never enter your credit card. You never join an email list just to download your card.
- **Print-Ready & Digital Formats:** Get exactly what you need. You might want a PDF for a local print shop. You might need a file for your Avery business card maker templates at home. You might want a PNG to share digitally.
- **Universal Compatibility:** It runs entirely in your browser. This makes it the perfect business card maker for mac, Windows, and even mobile devices. You do not need a specific google business card maker. You do not need standalone designhill business card maker software.
- **No Local Storage Clutter:** We start you with a fresh, clean slate every time you visit. This ensures your sensitive data is not left behind on public or shared computers.
- **Complete Privacy:** All data processing and image generation happen directly in your browser. We never upload, store, or sell your personal or business information.

Need a standalone QR code for other marketing materials? Try our [Free QR Code Generator](/tools/qr-code-generator).


---

---
title: Business Card QR Code Generator
---

<!-- IMPORTANT: This ## heading must stay the first "## " heading in the file. page.tsx uses
     extractBlogContent() which slices the markdown from the first "\n## " and discards everything
     above it. Without it, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free Business Card QR Code Generator

[![Watch How It Works](https://img.youtube.com/vi/pzdGaHqFs0M/maxresdefault.jpg)](https://youtu.be/pzdGaHqFs0M)

This quick video walkthrough shows you how to fill in your contact details (name, title, company, phone, email and website), watch the QR code update live, and download a print-ready PNG or SVG for your business card in seconds.

## Put your whole card into a phone with one scan

A paper business card has one weak point: the moment it is handed over, the details still have to be typed into a phone, and most cards never make it out of the wallet. A business card QR code fixes that. Print a small code on the card, and whoever you hand it to points their phone at it and taps once to save you as a contact, with your name, title, company, phone, email and website already filled in. The card stops being something to file and becomes something to scan.

This tool builds that code entirely in your browser. Fill in the contact fields, watch the QR update live, and download it as a PNG for screens or an SVG for print. Nothing is uploaded, there is no account to create, and there is no watermark on the finished code.

## A business card QR code is a vCard

Under the hood, a business card QR code is a vCard: the standard format phones use to describe a saved contact. The code stores a small block of text that looks like this:

```
BEGIN:VCARD
VERSION:3.0
N:Doe;Jane;;;
FN:Jane Doe
TITLE:Head of Partnerships
ORG:Acme Inc.
TEL;TYPE=CELL:+1 234 567 890
EMAIL:jane@acme.com
URL:https://acme.com
END:VCARD
```

When a phone camera reads text that begins with `BEGIN:VCARD`, it recognises a contact rather than a web link, and it offers to save the details as a new contact. The code is not a link and it does not call any server: everything the phone needs to build the contact is inside the code itself. That is why it keeps working offline and never expires on its own.

You do not write any of that markup. You type your details into the fields, and the tool assembles the vCard for you, escaping any comma or semicolon in your name or company so the contact saves cleanly.

## What to put on the code

Fill in the fields a contact record actually uses:

- **Full name** is the one field worth always including, because it becomes the display name of the saved contact.
- **Job title** and **company** give context so the person remembers who you are and where you work.
- **Phone** and **email** are the details people most often want to reach you by.
- **Website** points to your company site, portfolio or booking page.

Only the fields you fill in are written into the code. A minimal card with just a name, phone and email produces a small, fast-scanning code; a complete card carries everything. There is no need to fill in every field, and leaving one blank simply leaves that line out of the contact. As you type, the preview redraws so you can confirm the code is generating before you send the card to print.

## Getting the code onto a printed card

A standard business card is roughly 85 by 55 mm, which is not a lot of room, so a few choices matter:

- **Size the code around 2 to 2.5 cm square.** Below about 2 cm a code becomes unreliable at reading distance. If the layout allows, a slightly larger code is more forgiving of a quick, off-angle scan.
- **Give it a quiet margin.** Leave a small band of blank space around the code. Scanners locate a code by its edges, and text or graphics pressed right up against it can stop a scan.
- **Keep high contrast.** A dark code on a light background is the most reliable. Reversed light-on-dark codes and codes laid over a photograph are the usual reasons a card fails to scan.
- **Use the back or a corner.** The back of the card, or a bottom corner of the front, keeps the code clear of your name and logo while staying easy to find.
- **Print from the SVG.** The SVG download is vector artwork and stays perfectly sharp at any size, so it is the right file for a professional print run. Use the PNG for a digital card, an email signature or a social profile.

Always scan your finished code with your own phone before ordering a batch. Confirm the contact saves with the right name, number and email. A thirty-second check saves a reprint.

## Beyond the paper card

A business card QR code is not only for paper. The same code works well:

- In an **email signature**, so anyone you email can save your details in a tap.
- On a **badge or lanyard** at a conference, where people are already scanning things.
- On a **shop window or counter**, so walk-in customers can save your contact for later.
- On a **slide** at the end of a talk, letting the room save your details at once.

Because the details are baked into the code rather than stored on a server, every one of these works without an app or an internet connection on either side.

## Matching codes for a whole team

If you need cards for an office, a sales team or a franchise, the CSV Upload tab builds them in a batch. Give it a file with the columns Name, Phone, Email, Organization, Job Title and Website, and it returns a zip with one code per row, named after the person. Name is the only column a row cannot do without; every other field is optional, and a blank cell is left out of that card. You type each value exactly as it is, including any comma or semicolon, because the vCard escaping is applied automatically when each code is built. That keeps a run of fifty cards consistent without hand-writing fifty codes.

If you want a fuller explanation of the vCard format itself, the [vCard QR code generator](/tools/vcard-qr-code-generator) covers it in more depth, and the [full QR code generator](/tools/qr-code-generator) makes codes for WhatsApp, SMS, WiFi, links and more.

## Frequently asked questions

### What is a business card QR code?

A business card QR code is a QR code that carries your contact details as a vCard, the standard format phones use for a saved contact. When someone scans it, their phone offers to save you as a contact with your name, title, company, phone, email and website already filled in, instead of them typing the card in by hand. Printed on or beside a business card, it means your details go into a phone in one tap and never get lost in a drawer.

### What should I put on a business card QR code?

Put the fields a contact record actually uses: full name, job title, company, phone number, email address and website. Only the fields you fill in are written into the code, so a minimal card with a name, phone and email stays small and scans fast, while a full card carries everything. There is no need to complete every field; leave out anything that does not apply to you.

### How is this different from a vCard QR code?

It is the same underlying thing. A business card QR code is a vCard QR code framed for the printed card use case: it encodes the same BEGIN:VCARD block a phone saves as a contact. This page focuses on getting that code onto a physical business card, while the vCard page covers the format in more general terms. Either tool produces a code your phone saves as a contact, so pick whichever framing fits how you are thinking about it.

### Will it work on both iPhone and Android?

Yes. iPhones have read QR codes from the Camera app since iOS 11 in 2017, and current Android phones scan them from the camera or Google Lens. On both, a code that begins with BEGIN:VCARD prompts the phone to create a contact with the fields already filled in. Very old devices may need a separate scanner app, but no app is required on a reasonably recent phone.

### What size should the QR code be on a business card?

Around 2 cm square is the practical minimum on a business card held at reading distance, and a little larger is safer if you have room. A standard business card is about 85 by 55 mm, so a 2 to 2.5 cm code fits comfortably in a corner or on the back. Download the SVG for printing because it is vector artwork and stays sharp at any size, keep a dark code on a light background, and leave a small quiet margin of blank space around it so the scanner can find its edges.

### Can I make matching cards for a whole team?

Yes. The CSV Upload tab takes a file with the columns Name, Phone, Email, Organization, Job Title and Website, and returns a zip with one code per row, named after the person. Name is the only column a row cannot do without; every other field is optional and a blank cell is left out of that card. Type each value exactly as it is, including any comma or semicolon, because the vCard escaping is applied when each code is built. This is aimed at offices, sales teams and franchises handing out matching cards.

### Can I edit the card later, and does it expire?

The code does not expire, because it is a fixed image of a fixed piece of text, and it keeps working for as long as the details on it are current. It cannot be edited after it is made, though: the contact details are baked into the code, so if your phone number or title changes you make a new one. If your details change often, point the website field at a page you control and update that page instead of reprinting cards.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free AI Buyer Persona Generator - Create Detailed Buyer Personas in Minutes

> Build data-driven buyer persona profiles for your ecommerce store using AI. Define your ideal buyer persona's demographics, shopping behavior, and motivations - then get actionable marketing recommendations tailored to your brand.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free Buyer Persona Generator

[![Watch How It Works](https://img.youtube.com/vi/U-4CdlycoQg/maxresdefault.jpg)](https://youtu.be/U-4CdlycoQg)

## What Is a Buyer Persona?

A buyer persona is a semi-fictional profile of your ideal customer, grounded in real data and informed assumptions about their demographics, behavior patterns, motivations, and goals. Sometimes called a "marketing persona" or "customer persona," it transforms a vague target audience into a specific, relatable character your team can rally around.

Instead of marketing to "everyone," creating a buyer persona lets you speak directly to the person most likely to purchase from your store. It answers the question that every marketer eventually faces: _who exactly am I trying to reach?_

Think of it this way - a buyer persona like "Eco-Conscious Emma, 28, marketing coordinator who discovers products on Instagram and values sustainability certifications" is infinitely more actionable than a demographic segment like "women aged 25–34." The more specific your buyer persona profile, the sharper your marketing becomes.

### Why Buyer Personas Matter in Marketing

Buyer persona marketing isn't just a planning exercise - it's the foundation that makes every marketing dollar work harder:

- **Sharper ad targeting**: Knowing your ideal buyer persona's age, interests, and social platforms means your Facebook, Instagram, and Pinterest ad spend goes further. You stop paying to reach people who will never convert.
- **Stronger product descriptions**: Write copy that addresses your persona's specific pain points and motivations instead of generic feature lists that blend in with competitors.
- **Smarter content strategy**: Create blog posts, pins, emails, and social content that resonates with the topics your target buyer persona actually cares about.
- **Higher conversion rates**: When your store's messaging, design, and user experience align with what your buyer persona expects, visitors are significantly more likely to become customers.
- **Focused product development**: Understand which features, price points, and packaging your ideal customer values most - so you build what sells.

## What Is a Buyer Persona in Marketing?

In marketing, a buyer persona goes beyond surface-level demographics. It captures the _why_ behind purchasing decisions - goals, frustrations, preferred discovery channels, and the objections that stand between your customer and the checkout button.

A well-researched buyer persona in marketing helps teams answer critical questions:

- Which social platforms should we prioritize for ad spend?
- What tone of voice resonates with our audience?
- What objections do we need to address in our product pages?
- Which content formats (video, blog, carousel) will drive the most engagement?

For ecommerce merchants specifically, buyer persona development should include shopping behavior - something generic persona templates miss entirely. How does your customer discover products? Do they compare prices across five browser tabs, or do they impulse-buy from Instagram stories?

## How to Create a Buyer Persona: Step-by-Step Guide

Creating a buyer persona doesn't need to take weeks. With the right framework and an AI-powered tool, you can develop a detailed buyer persona profile in minutes. Here's the best way to create a buyer persona:

### Step 1: Define Your Store Context

Start by establishing _what_ you sell. Enter your store name, product category, and price range. This context helps shape a persona that's relevant to your specific market - a luxury skincare brand attracts a fundamentally different buyer than a budget phone accessories store.

### Step 2: Set Demographics

Give your persona a memorable, descriptive name (like "Fitness-First Fiona" or "Budget-Smart Ben"). Then define their age range, gender, location, and education level. These details form the foundation of your buyer persona profile.

### Step 3: Add Professional Context

Specify their job title, industry, income range, and organization size. This information directly reveals purchasing power and decision-making authority - critical for both B2B buyer personas and high-ticket consumer products.

### Step 4: Map Shopping Behavior

This is where creating a buyer persona for ecommerce diverges from generic templates. Select how they discover products (search engines, social media, word-of-mouth), where they prefer to shop (brand websites, Amazon, social commerce), and what influences their purchase decisions (reviews, price, brand reputation, free shipping).

### Step 5: Identify Goals & Challenges

What does your persona want to achieve by using your product? What pain points or hesitations might prevent them from buying? Understanding the gap between desire and action is the core of developing buyer personas that actually drive conversions.

### Step 6: Define Media Consumption Habits

Select the social networks they frequent, how they consume content (short-form video, long-form articles, podcasts), and their preferred communication channels. This directly informs your content distribution and ad placement strategy.

### Step 7: Review & Generate

Review all your inputs, then click "Generate Persona." The AI synthesizes your structured answers with marketing best practices to produce a comprehensive buyer persona - complete with actionable recommendations.

### What You Get

Your AI-generated buyer persona includes:

- **Complete demographic profile** with age, gender, location, education, and income
- **Shopping behavior analysis** covering discovery channels, preferred platforms, and purchase influencers
- **Psychographic breakdown** including goals, challenges, objections, and core values
- **Media consumption habits** with social network preferences and content format insights
- **4–6 actionable marketing recommendations** tailored to your specific store and persona
- **Suggested brand voice and tone** for your marketing copy
- **Ready-to-use sample ad copy** for Pinterest, Instagram, or other social platforms

### Download Options

- **Markdown (.md)** - Perfect for Notion, Google Docs, or your team wiki
- **JSON** - Import into your CRM, marketing tools, or custom dashboards
- **Copy to clipboard** - Quick paste into any document or chat

## Buyer Persona Archetypes: Which One Fits Your Business?

Not all buyer personas serve the same purpose. Understanding different archetypes helps you choose the right framework for your buyer persona development:

### Goal-Directed Personas

Focus on what users want to achieve with your product. Best for stores selling tools, software, or problem-solving products. If your customers use your product to solve a specific problem - like managing inventory or tracking fitness - this archetype reveals how to position your solution.

### Role-Based Personas (B2B Buyer Persona)

Examine how job responsibilities and organizational position shape purchasing needs. Essential for B2B ecommerce - a CFO's buying criteria differ vastly from a marketing manager's, even within the same target company. B2B buyer persona examples typically include decision-making authority, budget approval processes, and organizational pain points.

### Engaging Personas

Add emotional depth through stories and aspirational scenarios. Especially useful for lifestyle brands where feeling and identity drive purchases - fashion, wellness, home décor, or any product that helps someone express who they are.

### Fictional/Exploratory Personas

Explore edge cases and future customers you haven't reached yet. These help businesses testing new markets or launching experimental products imagine possibilities beyond current data.

## Buyer Persona Examples for Ecommerce

Concrete examples of buyer personas make the concept actionable. Here are three detailed buyer persona examples across different ecommerce niches:

### Example 1: "Eco-Conscious Emma"

**Demographics:** 28-year-old marketing coordinator in Portland, OR. Bachelor's degree, \$55K income.

**Shopping behavior:** Discovers products through Instagram Reels and Pinterest. Shops directly from brand websites - avoids marketplaces. Heavily influenced by eco-certifications, transparent supply chains, and product quality over price.

**Goals:** Find products that align with her sustainability values without compromising on quality. She wants to feel good about every purchase.

**Challenges:** Skeptical of greenwashing. Needs proof of genuine sustainability claims before she'll add to cart.

**Marketing implication:** Lead with certifications and supply chain transparency. Use Instagram and Pinterest for visual storytelling. Avoid discount-heavy messaging - she'll pay a premium for values alignment.

### Example 2: "Deal-Hunting Dave"

**Demographics:** 42-year-old IT manager in Austin, TX. Master's degree, \$95K income.

**Shopping behavior:** Discovers products through Google Search and Reddit recommendations. Compares prices across Amazon, brand websites, and deal aggregators. Most influenced by customer reviews, detailed specs, and free shipping offers.

**Goals:** Get the best possible value. He researches extensively and feels satisfaction from finding the optimal price-to-quality ratio.

**Challenges:** Decision paralysis from too many options. Abandoned carts when shipping costs are added at checkout.

**Marketing implication:** Include comparison tables and detailed specifications. Highlight free shipping prominently. Retarget abandoned carts with price-match or shipping offers.

### Example 3: "Trendy Tara"

**Demographics:** 22-year-old college student in New York, NY. Currently pursuing a degree, part-time job income ~\$18K.

**Shopping behavior:** Discovers products exclusively through TikTok, influencer recommendations, and friend shares. Shops via social commerce (Instagram Shop, TikTok Shop). Most influenced by visual appeal, peer reputation, and easy return policies.

**Goals:** Stay on-trend without overspending. Wants products her friends will notice and compliment.

**Challenges:** Limited budget. Needs BNPL options or student discounts. Won't buy if the return process looks complicated.

**Marketing implication:** Invest in influencer partnerships and short-form video content. Offer BNPL at checkout. Make returns frictionless and advertise it prominently.

### Example 4: "B2B Brandon" (B2B Buyer Persona Example)

**Demographics:** 38-year-old operations director at a mid-size retail chain (200 employees). MBA, \$120K income.

**Shopping behavior:** Discovers solutions through industry publications, LinkedIn, and trade shows. Evaluates vendors through demos, case studies, and peer referrals. Purchase decisions involve 3–4 stakeholders and a 30–60 day sales cycle.

**Goals:** Streamline operations, reduce costs per unit, and implement solutions that scale across multiple locations.

**Challenges:** Needs buy-in from C-suite. Risk-averse - requires proven ROI before committing. Frustrated by vendors who can't provide enterprise-grade support.

**Marketing implication:** Create case studies with concrete ROI figures. Offer free trials or pilot programs. Build content for multiple stakeholders (technical specs for IT, ROI summaries for finance, workflow demos for operations).

## Buyer Persona vs. User Persona: What's the Difference?

While often used interchangeably, buyer personas and user personas serve different functions:

- **Buyer personas** shape marketing strategy. They help you craft messages that resonate, choose the right advertising channels, and understand what motivates a purchase decision.
- **User personas** guide product and UX design. Design teams use them to shape features, navigation flows, and interface decisions based on how someone actually _uses_ the product.

The ideal customer behind both should be consistent. You don't want your marketing team writing for one person while your product team builds for someone entirely different.

## How to Build a Buyer Persona from Real Data

The best buyer personas are built on research, not assumptions. Here are proven methods for buyer persona development:

1. **Interview existing customers** - Ask about their goals, challenges, and what almost stopped them from buying. Even 5–10 interviews reveal powerful patterns.
2. **Analyze purchase data** - Look at your best customers. What do they have in common? Which products do they buy first? How often do they return?
3. **Review support conversations** - Customer service logs reveal the real objections, confusions, and frustrations your buyers face.
4. **Study analytics** - Google Analytics demographics, social media insights, and heatmaps show you who's actually visiting and how they behave.
5. **Survey your audience** - Short, targeted surveys (5–7 questions) can validate or challenge your persona hypotheses at scale.
6. **Use AI to synthesize** - Tools like this buyer persona generator take your structured inputs and expand them with realistic, actionable detail based on marketing best practices.

## When to Update Your Buyer Persona

Your buyer persona should evolve alongside your business and market. Plan to review and refresh personas at least every 6–12 months, and watch for these triggers:

- **Channel performance shifts** - If engagement drops on platforms that used to perform well, your audience may have migrated. A persona who primarily used Facebook in 2020 might now spend their time on TikTok or Threads.
- **New customer segments emerge** - When you notice orders from demographics your persona doesn't represent, it's time to create additional personas.
- **Conversion rates decline** - If your messaging used to convert but no longer does, your persona's needs or objections may have evolved.
- **You launch new products** - A new product line may attract an entirely different buyer persona than your existing catalog.
- **Market conditions change** - Economic shifts, new competitors, or cultural trends can reshape customer priorities overnight.

## Tips for Using Your Buyer Persona Effectively

1. **Share it with every team** - Download the persona and distribute it to marketing, product, sales, and customer support. Everyone should know who they're serving.
2. **Create 2–3 personas** - Most ecommerce stores serve multiple distinct customer segments. Generate a primary persona and 1–2 secondary ones.
3. **Map it to your ad targeting** - Translate your persona's demographics, interests, and platform preferences directly into Facebook, Instagram, and Pinterest ad targeting fields.
4. **Inform your content calendar** - Plan blog posts, pins, emails, and videos around your persona's content preferences and pain points.
5. **Use it for product decisions** - When debating features, pricing, or packaging, ask "Would [persona name] value this?" It cuts through internal bias.
6. **Test and iterate** - A buyer persona is a hypothesis. Run campaigns targeting your persona's characteristics and refine based on actual performance data.

## How This Tool Compares

| Feature                    | GetPinflow | HubSpot Make My Persona | Generic Templates |
| -------------------------- | ---------- | ----------------------- | ----------------- |
| AI-powered generation      | ✅         | ✅ (new)                | ❌                |
| Ecommerce-specific fields  | ✅         | ❌                      | ❌                |
| Shopping behavior analysis | ✅         | ❌                      | ❌                |
| Marketing recommendations  | ✅         | ❌                      | ❌                |
| Sample ad copy             | ✅         | ❌                      | ❌                |
| No signup required         | ✅         | ❌ (email required)     | Varies            |
| Shopify merchant focus     | ✅         | ❌                      | ❌                |
| Download as Markdown/JSON  | ✅         | PDF only                | Varies            |

## Frequently Asked Questions

**What is a buyer persona?**

A buyer persona is a semi-fictional representation of your ideal customer based on real data and research. It includes demographics like age and income, psychographics like goals and challenges, and behavioral details like shopping preferences and content consumption habits. Businesses use buyer personas to align their marketing, product development, and customer experience around the people most likely to buy from them.

**How do I create a buyer persona?**

The best way to create a buyer persona is to combine customer research (interviews, surveys, analytics data) with structured frameworks that capture demographics, goals, challenges, and shopping behavior. This free AI buyer persona generator streamlines the process - answer guided questions about your store and ideal customer, and the tool produces a comprehensive persona profile with marketing recommendations in minutes.

**Is this tool really free?**

Yes, 100% free with no signup required. We use AI to generate your persona, with a fair-use rate limit to keep the service available for everyone.

**How accurate is the AI-generated buyer persona?**

The AI expands on the structured inputs you provide with realistic, actionable details grounded in marketing best practices. The more specific your answers, the more tailored and useful the output. Think of it as an intelligent framework that fills in gaps and surfaces insights you might not have considered.

**Can I create multiple buyer personas?**

Absolutely. Most ecommerce stores benefit from 2–3 distinct buyer personas representing their primary customer segments. Click "Start Over" after downloading your first persona and create another.

**What's the difference between a buyer persona and a target audience?**

A target audience is a broad group defined by shared demographics (e.g., "women aged 25–40 interested in fitness"). A buyer persona is a specific, named character within that audience with defined goals, challenges, shopping habits, and media preferences. Personas make your target audience actionable.

**How is this different from HubSpot's Make My Persona?**

This tool is purpose-built for ecommerce merchants. It includes shopping behavior analysis (discovery channels, purchase influencers, preferred platforms), AI-generated marketing recommendations, sample ad copy, and brand voice suggestions - features unavailable in HubSpot's generalist tool.

**Do I need a buyer persona for B2B ecommerce?**

Yes - B2B buyer personas are essential because B2B purchasing involves longer sales cycles, multiple stakeholders, and different decision-making criteria than B2C. A B2B buyer persona captures job title, organizational context, budget authority, and the internal approval process that influences purchasing decisions.

**How often should I update my buyer persona?**

Review your buyer personas every 6–12 months, or whenever you notice significant shifts in customer behavior, conversion rates, or channel performance. Markets evolve, customer preferences shift, and your personas should reflect those changes to remain useful.

**What AI model powers this tool?**

We use OpenAI's GPT-5-nano model via OpenRouter, optimized for fast, structured output generation. Your data is not stored or used for training.


---

<!--
  Writing rules for this article:
  - No em dashes anywhere. Use a hyphen.
  - Escape currency dollar signs as \$ (remark-math treats a bare $ as math).
  - Short sentences. First "## " heading is where page.tsx starts rendering.
  - The "### question" blocks must match the FAQ_ITEMS array in page.tsx.
  - Every regulatory claim must cite the section it came from. Nothing invented.
-->

---
title: Free Candle Labels Maker and Warning Label Generator
description: Design custom candle labels, size a wrap label to your jar, and print an ASTM F-2058 candle warning label carrying all three cautionary statements and all three pictograms.
---

## Free candle labels, sized to your jar, with the warning label included

[![Watch how the free Candle Label Maker works](https://img.youtube.com/vi/GR-8MxBGDaA/maxresdefault.jpg)](https://youtu.be/GR-8MxBGDaA)

Making candles is the fun part. Labelling them is where most small makers get
stuck, because a candle label is two jobs pretending to be one. The front is
marketing: your brand, your scent name, the reason someone picks your jar off the
shelf. The base is compliance: the cautionary statements and pictograms that tell
a buyer how not to set fire to their house. Most tools help with exactly one of
those and leave you to solve the other.

This free candle labels maker does both in one flow. Pick a template, measure your
jar, and the tool sizes the label for you and computes the net-weight declaration
so you are not doing conversions by hand. Then switch the label type to the base
warning label and print a candle warning label carrying all three cautionary
statements and all three matching pictograms. Everything is a print-ready PDF
at true size, a transparent PNG, or an SVG. No signup, no watermark, and nothing
leaves your browser.

### What actually has to appear on a candle label

There are two separate rule sets in play for a candle sold in the United States,
they carry different force, and they are easy to mix up.

The first is the cautionary label, and it is a **voluntary consensus standard**
rather than federal law. **ASTM F-2058**, the Standard Specification for Candle
Fire Safety Labeling, was first issued in 2000; the edition the CPSC currently
lists is **F2058-07(2021)**. The Consumer Product Safety Commission lists it for
candles under the heading "Voluntary Standard(s)", and under rulemaking it
records only "Petition CP 04-1 and HP 04-01, denied September 2014" - that is,
the petition to make candle fire-safety labelling mandatory was turned down.

Voluntary is not the same as optional. Retailers, marketplaces, insurers and
wholesale buyers routinely require a candle to carry the F-2058 cautionary label,
and a candle without one is the kind of product a liability claim is built on. So
treat it as something you should do rather than something the FTC will fine you
for skipping.

The National Candle Association, which has worked with ASTM International on the
candle standards since 1997, publishes the three cautionary statements:

1. Burn the candle within sight.
2. Keep the candle away from things that can catch fire.
3. Keep the candle out of the reach of children.

It also publishes three matching graphic icons for those statements, and
describes them as becoming standard worldwide. This tool draws all three of them
as real vector artwork on every warning label it produces, at every size, in every
template. They are never a bitmap and never a font character, so they stay sharp
whether you print at 1 inch or 2 inches.

The second rule set is federal law: the FTC's consumer-commodity labelling rules
under the Fair Packaging and Labeling Act, at **16 CFR part 500**. A retail candle
is a consumer commodity, so the front of the jar needs three things:

- **A statement of identity.** 16 CFR 500.4 says the principal display panel must
  bear a specification of the identity of the commodity, that it must be a
  principal feature of that panel, in lines generally parallel to the base the
  container rests on, and that it must not be false, misleading or deceptive.
  In plain terms: say that it is a candle. "Soy wax candle" is enough.
- **A net-quantity declaration.** 16 CFR 500.6(a) requires it on the principal
  display panel, and 16 CFR 500.8(a) requires it in both avoirdupois pounds or
  ounces and SI metric units. The regulation's own examples are "Net Wt 15 oz
  (425 g)" and "Net Mass 425 g (15 oz)".
- **A name and place of business.** 16 CFR 500.5 says the label must conspicuously
  specify the name and place of business of the manufacturer, packer or
  distributor. If you did not manufacture the candle yourself, 16 CFR 500.5(a)
  says the name must be qualified by a phrase revealing the connection, such as
  "Manufactured for" or "Distributed by". 16 CFR 500.5(b) asks for the actual
  business name, and 500.5(c) asks for the street address, city, state and zip,
  while letting you drop the street address when it is listed somewhere publicly
  available such as your website.

The tool has an input for each of those, and the checklist beside the preview
grades them in three states rather than two. Green means the element is filled in
and the label you are looking at prints it. Amber means it is filled in but this
artifact does not carry it, which is what you get on the base cautionary label or
on a template that draws no front panel, and the row tells you where to print it
instead. Red means it is genuinely missing, and the row names the specific thing
rather than just going red.

#### Candle warning label requirements, in two lists

People search for "candle warning label requirements" as though it were one list.
It is two, and keeping them apart is the whole point of this section.

**From 16 CFR part 500, which is federal law:**

1. A statement of identity on the front (16 CFR 500.4).
2. A dual-unit net-quantity declaration on the front (500.6(a), 500.8(a)).
3. That declaration inside the bottom 30 percent of the panel, unless the panel
   is 5 square inches or less (500.6(b) and 500.6(b)(1)).
4. That declaration at or above the minimum letter height for your panel area
   (500.21(b), measured per 500.21(d)).
5. Your name and place of business (500.5).

**From ASTM F-2058, which is voluntary but commonly required by the people who
sell your candle:**

6. The three cautionary statements, on the label.
7. The three matching pictograms alongside them.

Numbers 1 to 5 belong on the front label. Numbers 6 and 7 usually go on the base,
which is why this tool makes both artifacts from one set of inputs. The checklist
beside the preview keeps the same split, and it labels the ASTM group voluntary.

This is also not the whole of every rule that could touch a candle. State
labelling rules, EU and UK CLP hazard labelling, and whatever your marketplace
demands are all outside it.

#### Candle warning label text you can copy

Here is the candle warning label text this tool prints by default. It is our own
concise phrasing of the three statements the association publishes, and every
line is editable in the tool:

```
WARNING
Never leave a burning candle unattended.
Keep the flame away from anything that can catch fire.
Keep out of reach of children and pets.
```

Plenty of makers write the same three ideas differently ("Burn within sight",
"Keep away from drafts and things that catch fire", "Keep away from children and
pets"). What matters is that all three ideas are present and legible, with their
pictograms. Change the wording to suit your market and the tool re-lays the block
around it.

### ASTM F-2058 versus the other candle standards

This is worth getting right, because it is the mistake you see most often in
candle-making guides. The CPSC lists six candle-related voluntary standards, and
only one of them is about labelling. These are the four you will meet most often,
with the year each was first issued and the edition designation the CPSC lists:

- **ASTM F-2058** (first issued 2000; **F2058-07(2021)**) is the cautionary
  labelling standard. It is the one that produces the warning label.
- **ASTM F-2179** (first issued 2002; **F2179-20**) covers annealed
  soda-lime-silicate glass candle containers: scratch and temper specifications.
  It is about whether your jar survives the heat, not about what you print on it.
- **ASTM F-2417** (first issued 2004; **F2417-17**) covers fire safety for
  candles: maximum flame height, tip-over limits, secondary ignition and
  end-of-useful-life specifications. It is a design and performance standard, not
  a labelling standard.
- **ASTM F-2601** (first issued 2007; **F2601-18**) covers candle accessories
  such as rings, burners and holders.

The two the CPSC lists that are not in that group are F2326 (visible emissions
from burning candles) and F1972 (terminology), so do not read the four above as
the complete set. Note also that the year and the designation are different
things: 2000 is when F-2058 first appeared, while F2058-07(2021) is the 2007
edition reapproved in 2021.

If a guide tells you F-2417 is the warning-label standard, it has the wrong
number. F-2058 is the labelling one.

One honest limitation: the full text of ASTM F-2058 is sold by ASTM and was not
read for this build. That matters, because the standard contains its own
typography and size specifications that we cannot see. So this tool renders the
statements and the pictograms the association publishes, at a legibility floor we
chose ourselves, and it does not claim to reproduce the standard's own type
specification. There is no "ASTM compliant" badge here for exactly that reason.
The label you print is your responsibility to verify for the market you sell into.

Because that floor is ours rather than the standard's, here is exactly what it
is and exactly how it behaves. The statements are never set below **0.045 inch**
of type (about 3.2 pt) and the pictograms are never drawn below **0.16 inch**
across. Those are printed sizes in real inches on the finished label, not CSS
numbers: the preview scales, and the tool measures the scale it applies and folds
it into the floor, so what the label says it prints at is what it prints at.

When the block will not fit at those sizes, the tool gives things up in a fixed
order rather than shrinking the type: first the recommended burn practice, then
the WARNING heading (a convention, not one of the three statements). The three
statements and the three pictograms are never dropped and never shrunk past the
floor. On a front label the same rule applies to the optional cautionary strip
some templates add: it is dropped, with a note telling you so, rather than
squeezed in on top of the regulated lines. If even they will not fit, the tool says so in red under the cautionary
text and asks you to go up a size or shorten the wording. It never quietly prints
type nobody can read.

### How to size a wrap label to your jar (the pi x d worked example)

A wrap-around label is where every static template falls over, because the width
is not a size you choose. It is a size your jar decides. A wrap has to travel the
whole circumference and then overlap itself so the seam glues down:

```
wrap width = pi x diameter + overlap
```

Take a common 3.0 inch diameter jar and a 1/8 inch glue overlap:

```
3.14159265 x 3.0 = 9.42478
9.42478 + 0.125  = 9.54978
```

Rounded to the precision a label is actually cut at, that is **9.55 inches**. Not
9.5, and not 9.6. The tool computes it, shows you the working, and exports a PDF
page exactly 9.55 inches wide, which is 687.6 points. Print at 100 percent scale
and it wraps.

The height works the same way, from the other direction:

```
usable height = jar height - top clearance - bottom clearance
```

A 3.5 inch jar with 3/8 inch of blank glass above and below the label gives you
2.75 inches of usable label height. Both clearances are editable, because how much
glass you want to leave showing is a design decision. If you set clearances that
add up to more than the jar height, the tool tells you so inline instead of
producing a label with a negative height.

If you already know your label size, you can skip all of that and type the width
and height straight in. The calculator is there when you need it, not in your way.

### Where the net weight goes, and how small it can be

Two more rules from 16 CFR part 500 shape the layout, and both of them depend on
the size of your jar rather than the size of your label.

**Placement.** 16 CFR 500.6(b) puts the net-quantity declaration within the bottom
30 percent of the label panel, in lines generally parallel to the base the
container rests on, and separated from the printing above and below it by at least
the height of its own lettering. But 16 CFR 500.6(b)(1) waives that placement rule
when the principal display panel is 5 square inches or less. Which tins that
covers is a measurement, not a rule of thumb: with a 2.5 inch diameter the panel
area is 3.14 square inches per inch of height, so such a tin clears the line only
while it is under about 1.59 inches tall, and plenty of ordinary 4 oz and 6 oz
tins land above 5 square inches. Measure your tin and the tool will tell you which
side of the line you are on.

**Type size.** 16 CFR 500.21(b) sets a minimum printed height that steps with the
same panel area:

| Area of the principal display panel | Minimum type height |
| --- | --- |
| 5 sq in (32.2 cm2) or less | 1/16 in (1.5 mm) |
| More than 5 up to 25 sq in (161 cm2) | 1/8 in (3.1 mm) |
| More than 25 up to 100 sq in (6.45 dm2) | 3/16 in (4.7 mm) |
| More than 100 up to 400 sq in | 1/4 in (6.35 mm) |
| More than 400 sq in (25.8 dm2) | 1/2 in (12.7 mm) |

"Area of the principal display panel" has its own definition for a round jar. 16
CFR 500.21(a)(2) says that for a cylindrical or nearly cylindrical container it is
40 percent of the height times the circumference. So a 3.0 inch by 3.5 inch jar
works out at 0.4 x 3.5 x 9.42 = 13.19 square inches. That is more than 5, so the
bottom-30 percent rule applies and the minimum type height is 1/8 inch.

That arithmetic is done on the exact number, not on a rounded one, because the
band edges bite. A 2 inch by 1.99 inch tin - an ordinary 4 oz tin - computes to
0.4 x 1.99 x pi x 2 = 5.0014 square inches, which the tool displays as 5.001.
Round that to 5 first and you land in the 1/16 inch band
and think 500.6(b)(1) has waived the placement rule for you. It has not. The tool
picks the band from the full-precision area and only rounds the number it shows
you, adding a decimal place when rounding would otherwise put the displayed
figure on the wrong side of a boundary.

#### The minimum is a letter height, not a font size

This is the part that catches software rather than people. 16 CFR 500.21(d) is
explicit about what the number in that table measures:

> Letter heights pertain to upper case or capital letters. When upper and lower
> case or all lower case letters are used, it is the lower case letter "o" or its
> equivalent that shall meet the minimum standards.

A font size is not a letter height. Set "Net Wt 8 oz (227 g)" at a font size of
1/8 inch in Playfair Display and the capital N measures about 0.089 inch and the
lower-case o about 0.068 inch - 0.710 and 0.545 of the em in the static bold file
Google serves - both well under the 1/8 inch the table asks for. Because the
declaration mixes case, it is the "o" that has to clear the bar.

So the tool measures rather than assumes. It reads the ink box of the exact face
your browser has loaded and works backwards to the font size that prints the
governing letter at or above the floor. Those numbers move with the face: this
build ships Playfair Display as a variable font, whose bold instance draws a
slightly rounder o at about 0.5625 of the em, so on the 13.19 square inch panel
the sum is 0.125 / 0.5625 = 0.222 inch, about 16 pt. On the static file's 0.545
the same sum gives 0.229 inch, about 16.5 pt.
That is not a design choice, it is the rule doing its job. The checklist row
tells you which letter it measured, what ratio it came out at and what size that
produced, and it goes red rather than green if your label is too small to carry
that size, so you can move the declaration to a base label instead.

16 CFR 500.20 also asks for conspicuous, easily legible boldface type in distinct
contrast, so the declaration is always set bold, and 500.6(b)'s clear space above
it is set to the height of its own lettering.

The name and place of business is held to the same discipline for the same
reason. 16 CFR 500.5(a) says it has to appear **conspicuously**, so it is pinned
alongside the declaration at a size the tool controls exactly, rather than being
scaled along with the artwork. Its floor is measured the same way the regulated
declaration is: 0.045 inch of printed lower-case "o", converted through the real
glyph height of your font, not 0.045 inch of font size. The checklist row prints
both numbers so you can see which is which. On a label
where the declaration and the identity together would take more than two thirds
of the panel, the checklist says so and names the fix instead of printing the
identity at a size nobody can read.

### The net-weight declaration is computed, not typed

This is the small thing that quietly ruins a lot of otherwise lovely labels. A
dual-unit declaration is a conversion, and conversions typed by hand go wrong. In
a survey of one large template gallery for this build, one thumbnail paired "4 oz"
with "140 g" and another paired "8 oz" with "300 g". The correct answers are 113 g
and 227 g. Those were placeholder designs rather than real product labels, but
they are exactly the error hand-typing invites.

So this tool computes the declaration. One avoirdupois ounce is exactly
28.349523125 grams:

- 8 oz x 28.349523125 = 226.796, which prints as **Net Wt 8 oz (227 g)**
- 4.5 oz x 28.349523125 = 127.573, which prints as **Net Wt 4.5 oz (128 g)**

Each printed figure is rounded exactly once, from the exact mass, and the rounded
string is what flows into the preview, the PDF, the PNG and the SVG. They can
never disagree with each other. That matters most at the kilogram step: rounding
to whole grams and then rounding those grams to a kilogram is two roundings, and
it made a 35.45 oz candle print "2 lb 3.45 oz (1 kg)" when the true mass is
1004.99 g. It now prints "2 lb 3.45 oz (1.00 kg)", derived straight from the
unrounded mass.

A few more details follow the regulation rather than habit. 16 CFR 500.9(b)(1)
says a quantity below one pound is declared in ounces; 500.9(b)(2) covers one
pound up to four pounds and 500.9(b)(3) covers four pounds and over, both in
whole pounds with any remainder in ounces, so a 24 oz three-wick prints as
"Net Wt 1 lb 8 oz (680 g)" and an 84 oz pillar prints as
"Net Wt 5 lb 4 oz (2.38 kg)". Both of those are the regulation's own worked
examples. 16 CFR 500.19(b) asks for the metric figure in three digits, or two
below 100 grams, which is why grams are printed whole and kilograms to two
decimals. 16 CFR 500.23(a) keeps the metric value between 1 and 1000, so a very
large candle steps up to kilograms. And 16 CFR 500.22 lists the only
abbreviations allowed in the declaration, which is why you see "oz" and "lb" and
nothing more creative.

One judgement call worth flagging. The illustrative conversions 16 CFR 500.19(b)
and 500.8(a) print all truncate: "1 lb (453 g)", "2 oz (56 g)", "2.5 oz
(70.8 g)". This tool rounds half-up instead, so 16 oz prints as 454 g. The
regulation states a digit-count rule rather than a rounding direction, so neither
convention is mandated; rounding half-up is a deliberate choice, because it never
understates what is in the jar.

If you sell by weight in grams, flip the unit toggle. The tool prints
"Net Mass 425 g (15 oz)" instead, which is 16 CFR 500.8(a)'s own metric-first
example.

### Six label types and fourteen templates

Most searches for a candle label template end at a static image you have to
retype your own details into. Here a candle label template is a live layout: it
knows the shape it is being drawn on, it re-flows when your scent name is long,
and it carries the regulated lines with it. The label type decides the shape and
the geometry. The template decides how it looks. They are independent, so every
one of the fourteen templates works on every one of the six types.

The types are a **round front** label, a **rectangle or square** front with an
adjustable corner radius, an **oval** apothecary front, a **wrap-around** sized
from your jar, a **tin lid** label that keeps a wider centre-safe zone because a
lid has a rolled seam, and the **base warning label** in 1 inch, 1.25 inch, 1.5
inch and 2 inch rounds.

The templates run from Minimal Apothecary (a centred serif stack between
hairlines) and Modern Sans (a left-aligned block with the full spec stack) through
Kraft Botanical, Luxe Black and Gold, Monogram Seal, Vintage Label Frame,
Terracotta Arch, Botanical Watercolour, Bold Type Stack, Soy Clean and a Seasonal
band, to Wrap Two-Panel (a front panel plus a real cautionary back panel), Warning
Only (the cautionary label on its own), and Blank Outline (the die line and the
safe area, nothing else).

Switching label type never costs you anything you typed. Every field is kept, even
the ones the new type does not display, and each type remembers its own size
choice. Fill everything in once, then audition all fourteen looks, and the one you
settle on becomes your candle label template for the whole range.

### The base warning label and which jars each size fits

The market's current answer to "I need a candle warning label" is to buy
a roll of pre-printed stickers. CandleScience sells one at 1.25 inches (3.2 cm)
by the hundred, cheaply, and it works well. What it cannot do is carry your brand,
your scent or your own burn instructions. Check the current price with the
supplier rather than trusting a number in an article.

That is the form factor the base warning label type reproduces, generated instead
of bought. CandleScience publishes which containers the 1.25 inch size suits:
jelly jars, a 3 oz standard votive holder, and 2 oz, 4 oz and 6 oz candle tins.
That guidance is shown in the tool against the 1.25 inch preset. The other sizes
are offered without a fit list, because we do not have a source for them and would
rather leave the hint blank than guess.

On a small round sticker the three statements and their three pictograms take up
most of the room, so the tool sizes those first and only adds the recommended burn
practice when it genuinely fits at a legible size. When it does not fit it tells
you so, and it never shrinks or drops a required statement to make room for
optional text. If you want the burn practice on the label too, go up a size or use
the wrap-around type, which has a whole back panel for it.

Concretely, with the default wording: at 2 inches everything fits, including the
burn practice. At 1.5 inches and 1.25 inches you get the heading, the three
statements and the three pictograms, and the burn practice is left off. At 1 inch
the heading goes too, leaving the three statements and three pictograms at the
legibility floor. Shorten the statements and more fits; lengthen them and less
does. The tool tells you which case you are in as you type, so nothing about it
is a surprise when the PDF opens.

If you want to buy candle stickers rather than print them, that is a perfectly
good answer and the pre-printed rolls are cheap. Generate the label here when you
want your own wording, your own brand or your own burn times on it, and buy a
roll when the generic text is fine.

### Burn instructions are convention, not standard

The burn instructions are the part people most often assume are mandated. They are
not: no federal rule requires them, and they are not among the three cautionary
statements ASTM F-2058 is about either. They are good practice, and they vary by
supplier. The defaults here are the numbers CandleScience publishes on its
warning-label roll, written in our own words:

- Trim the wick to 1/4 inch before every lighting.
- Burn for no more than 4 hours at a time.
- Stop using the candle when 1/4 inch of wax is left.
- Burn on a level, fire-resistant surface.
- Keep the wax pool clear of matches and wick trimmings.

Some suppliers publish 1/2 inch rather than 1/4 inch for the remaining-wax rule,
so check the guidance you actually rely on. Every line is editable, which is the
point.

### Printing custom candle labels for a whole range of scents

A chandler's real problem is not one label, it is one design across a dozen
fragrances. Switch to Bulk scents, paste one scent per line, and add an optional
net weight, burn time, batch code and copy count after it:

```
Cedar & Smoke, 8, 40 to 45 hours, LOT 2607-A, 2
Amber Vanilla, 4.5, 24 to 28 hours, LOT 2607-D, 2
```

Or download the sample CSV, fill it in in a spreadsheet, and import it back. The
brand, wax, maker identity and cautionary text are shared across the whole run, so
a blank cell inherits the shared value instead of printing an empty line. Each row
recomputes its own net-weight declaration, which is how a mixed batch prints
"8 oz (227 g)" and "4.5 oz (128 g)" correctly on the same sheet.

The sheet tiles onto a true US Letter or A4 page with cut guides between the
labels. Multi-page runs export as a ZIP of PNGs or a multi-page PDF.

### Printing and cutting tips

- **Print at 100 percent scale.** Turn off "fit to page" or "shrink to fit". Every
  PDF this tool produces is already the exact physical size of the label.
- **Buy stock made for labels for candles, not for envelopes.** Fragrance oil
  creeps, and plain paper wicks it and stains. Waterproof vinyl or a polyester
  stock survives a wax pool and a warm jar; matte paper does not.
- **Print candle stickers on a full sheet and cut them yourself** if you do not
  have a die. The Blank Outline template gives you the die line and the safe area
  on their own, so you can dry-run a cut before you commit a sheet of vinyl.
- **Send the SVG, not the PNG, to a cutter.** The SVG this tool writes is real
  vector geometry with the cut outline as a path, so a Cricut or Silhouette can
  follow it. Its width and height are written in real inches, not in bare pixels,
  so it imports at true size rather than at whatever an editor assumes. Convert
  the text to outlines in your editor first.
- **Turn on the cut line and safe-area guides** while you are testing, then turn
  them off for the final print. The guides print if they are on.
- **Test the wrap on a scrap first.** Wrap it round the jar dry to check the
  overlap lands where you expect before you commit a whole sheet.
- **Keep the warning label on the base.** It is the surface nobody wants to give
  up to compliance, which is exactly why the base is the right place for it.

### What this tool does not do

Being clear about the edges is more useful than pretending to cover everything:

- It does not generate **EU or UK CLP** hazard labelling or fragrance-allergen
  declarations. That is a much larger regulatory surface and it is not here.
- It does not cover soap, cosmetic **INCI** ingredient labelling, wax melts or reed
  diffusers.
- It does not render a barcode or a QR code inside the label. A batch or lot code
  here is text. Use the barcode generator or the QR generator for a scannable
  symbol.
- It does not reproduce ASTM F-2058's own type-size specification, because that
  text is paywalled and was not read.
- It gives you no compliance guarantee and no legal advice. It renders the
  elements, computes the numbers, and shows you which ones are missing. Verifying
  the finished label for your market is your job.

## Frequently asked questions

### Is this candle labels maker free?

Yes. It is completely free, needs no signup, and adds no watermark. Design and
download as many custom candle labels as you like as a true-size PDF, a
transparent PNG, or an SVG, one at a time or tiled onto a US Letter or A4 sheet.

### What must a candle warning label say?

The National Candle Association publishes three cautionary statements for ASTM
F-2058: burn the candle within sight, keep it away from things that can catch
fire, and keep it out of the reach of children. It also publishes three matching
graphic icons, which it says are becoming standard worldwide. F-2058 is a
voluntary standard rather than US law - the CPSC lists it under voluntary
standards for candles and denied the petition to make candle labelling mandatory
in September 2014 - but retailers and marketplaces commonly require it. This tool
prints all three statements and draws all three pictograms on every warning label
it makes, at every size, in every template, and the wording is editable so you can
match your own market.

### What is ASTM F-2058?

ASTM F-2058 is the Standard Specification for Candle Fire Safety Labeling, first
issued in 2000; the edition the CPSC lists is F2058-07(2021). It sets out the
specifications for the cautionary label that tells a consumer to burn a candle
within sight, keep it away from combustibles, and keep it away from children. It
is a voluntary consensus standard, not a federal regulation: the CPSC lists it
under voluntary standards for candles and records that the petition to make
candle labelling mandatory was denied in September 2014. In practice retailers,
marketplaces and insurers expect it. It is the labelling standard, and it is not
the same as ASTM F-2179 (heat strength of annealed glass candle containers), ASTM
F-2417 (fire-safety design and performance, covering flame height, tip-over and
end of useful life) or ASTM F-2601 (candle accessories). The standard's full text
is sold by ASTM, so this tool renders the statements and pictograms the
association publishes rather than reproducing the standard's own type-size
specification.

### What size should a candle label be?

For a front label, pick a diameter or a rectangle that leaves clear margins on
your jar. For a wrap-around label the size is not a guess: the width is pi times
the jar diameter plus a glue overlap, and the height is the jar height minus the
clearance you want above and below. A 3.0 inch jar with a 1/8 inch overlap needs a
9.55 inch wide wrap. For the base warning label, CandleScience publishes 1.25 inch
as fitting jelly jars, a 3 oz standard votive holder, and 2 oz, 4 oz and 6 oz
candle tins.

### Do I need the net weight on a candle label?

In the United States a candle is a consumer commodity under the FTC rules at 16
CFR part 500, and 16 CFR 500.6(a) says the label must bear a declaration of the net
quantity of contents on the principal display panel. 16 CFR 500.8(a) says that
declaration has to be in both avoirdupois pounds or ounces and SI metric units.
This tool computes the second unit for you at exactly 1 oz = 28.349523125 g, so 8
oz prints as 8 oz (227 g) and 4.5 oz prints as 4.5 oz (128 g).

### Where does the net weight have to sit on the label?

16 CFR 500.6(b) puts the net-quantity declaration in the bottom 30 percent of the
label panel, in lines generally parallel to the base the container rests on. 16
CFR 500.6(b)(1) waives that placement rule when the principal display panel is 5
square inches or less, which covers a lot of small tins. The tool works your panel
area out from your jar measurements (40 percent of height times circumference, per
16 CFR 500.21(a)(2)), tells you which case you are in, and pins the declaration
into the bottom band when the rule applies.

### How small can the net weight type be?

16 CFR 500.21(b) sets a minimum printed height that steps with the area of the
principal display panel: 1/16 inch (1.5 mm) at 5 square inches or less, 1/8 inch
(3.1 mm) above 5 up to 25 square inches, 3/16 inch (4.7 mm) above 25 up to 100
square inches, 1/4 inch (6.35 mm) above 100 square inches, and 1/2 inch (12.7 mm)
above 400 square inches. Those are LETTER heights, not font sizes: 16 CFR
500.21(d) says the number applies to capital letters, and to the lower-case
letter "o" when the text mixes case, which a declaration like "Net Wt 8 oz (227
g)" does. A 1/8 inch font size in Playfair Display prints an "o" of about 0.07
inch, barely half of what the rule asks. So the tool measures the real
glyph height of the font you chose and sets the declaration at whatever font size
prints that letter at or above the floor, then tells you which letter it measured
and what size that came to.

### What candle warning label text should I use?

The candle warning label text this tool prints by default is: never leave a
burning candle unattended; keep the flame away from anything that can catch fire;
keep out of reach of children and pets. That is our own concise phrasing of the
three cautionary statements the National Candle Association publishes for ASTM
F-2058, and every line is editable so you can match the wording your market
expects. All three statements print with their three matching pictograms on every
warning label the tool makes, and the recommended burn practice below them is
convention rather than regulation.

### Does my business name have to be on the candle label?

Yes. 16 CFR 500.5 says the label of a consumer commodity must conspicuously
specify the name and place of business of the manufacturer, packer or distributor.
If you did not make the candle yourself, the name has to be qualified by a phrase
that reveals the connection, such as Manufactured for or Distributed by. The place
of business means street address, city, state and zip, and 16 CFR 500.5(c) lets you
drop the street address when it is listed somewhere publicly available such as your
website.

### Can I make a candle label template with a wrap-around size?

Yes, and that is where the calculator earns its keep. Enter your jar diameter and
height, adjust the glue overlap and the top and bottom clearance, and the tool
sizes the wrap for you and exports a PDF page at exactly those dimensions. The
Wrap Two-Panel template also gives you a real back panel, so the cautionary
statements and the burn instructions travel with the label instead of needing a
second sticker.

### Are the burn instructions a legal requirement?

No, and neither, strictly, is the cautionary label. The three cautionary
statements are what ASTM F-2058 is about, and F-2058 is a voluntary standard that
the CPSC has expressly declined to turn into a rule, though retailers and
marketplaces commonly require it. The genuinely mandatory US elements are the 16
CFR part 500 ones: identity, net quantity and your name and place of business.
Burn instructions such as trimming the wick to 1/4 inch, burning for no more than
four hours at a time and stopping when 1/4 inch of wax is left are neither: they
are industry convention and good practice. The default numbers here are the ones
CandleScience publishes on its warning-label roll, and every line is editable.
Some suppliers publish 1/2 inch rather than 1/4 inch for the remaining-wax rule, so
check the guidance you rely on.

### Can I print custom candle labels for a whole range of scents?

Yes. Switch to Bulk scents, paste one scent per line or import a CSV (a sample file
is provided), set a copies count per scent, and the tool tiles every label onto a
Letter or A4 sheet with cut guides. The shared brand, wax, maker identity and
cautionary text apply to the whole run, and each row recomputes its own net-weight
declaration, so a mixed 8 oz and 4.5 oz batch prints 8 oz (227 g) and 4.5 oz (128
g) correctly on the same sheet.

### Does this cover EU or UK candle labelling?

No, and it does not pretend to. The tool covers the ASTM F-2058 cautionary
statements and pictograms, which are voluntary, and the US FTC consumer-commodity
elements at 16 CFR part 500, which are not. EU and UK CLP hazard labelling and
fragrance-allergen declarations are a
separate and much larger requirement that this tool does not generate. Whatever
market you sell into, you are responsible for verifying that your label meets its
rules.

### Will the PNG have a transparent background?

Yes. The PNG export keeps genuine transparent alpha outside the cut shape, so a
round or oval label drops onto your own artwork or mockup without a white box
around it. The PDF is a true-size page for printing, and the SVG is a vector
version of the same label.

## Where to go next

- [Nutrition label generator](/tools/nutrition-label-generator) for the FDA
  Nutrition Facts panel, if you also sell something edible.
- [Hang tag generator](/tools/hang-tag-generator) for swing tags with a punch
  hole, for gift sets and bundles.
- [Price tag generator](/tools/price-tag-generator) for market stall and shelf
  pricing.
- [Address label generator](/tools/address-label-generator) for shipping your
  orders out.
- [Barcode generator](/tools/barcode-generator) for a real scannable UPC or
  CODE128 on your packaging.
- [Thank you card generator](/tools/thank-you-card-generator) for the insert that
  goes in the box.


---

<!--
Writing rules for this file:
- No em dashes anywhere. Use a regular hyphen.
- Never use the filler words "honestly", "genuinely", or "blocker".
- Escape currency dollar signs as \$ (remark-math).
- Short sentences. Plain language.
- The first "## " heading is where page.tsx starts slicing.
-->

---
title: Free Care Label Template Maker and Generator
description: How to make a clothing care label with ISO 3758-style care symbols, matching care text, fibre content and RN, size and origin fields.
---

## Make a clothing care label the right way

[![Watch how the free Care Label Generator works](https://img.youtube.com/vi/Bsg0GQxZwJU/maxresdefault.jpg)](https://youtu.be/Bsg0GQxZwJU)

A care label is a small sew-in tag that tells the buyer how to wash, dry, iron
and clean a garment, what it is made of, who made it, and where. It is easy to
get wrong. A wool sweater with a tumble-dry-high symbol is a shrunken sweater and
a refund. A fibre list that reads 40% Cotton 60% Polyester when the garment is
mostly cotton is a labelling error. This tool removes the guesswork: you pick a
fibre, suggested care symbols and matching text are filled in for you, and you
can override any part of it and download a print-ready label.

This page explains the care-symbol system, the US rules (the FTC Care Labeling
Rule and the Textile Fiber Products Identification Act), and the EU rule
(Regulation 1007/2011), so you know what each field on your label is for.

## How to use the generator

I tested this maker with a cotton and polyester t-shirt label for a made-up brand, Northwind Apparel, on the Classic Sew-In template at 40 x 60 mm. I downloaded the PDF and checked it: the page measured 40 x 60 mm, the care symbols matched the care sentences under them, and the checklist showed all five label elements present.

1. Pick a fibre preset. Cotton, Linen, Wool, Cashmere, Silk, Viscose, Polyester,
   Nylon, an Elastane / Spandex blend, Denim, Leather trim or Down. The preset fills the
   care controls with a sensible starting point. Wool and Cashmere never prefill
   tumble-dry-high, because heat shrinks them.

![The fibre preset picker with presets for cotton, linen, wool, cashmere, silk, viscose, polyester, nylon, an elastane and spandex blend, denim, leather trim, and down](/images/tools/care-label-generator/cl-step-fibre-preset.webp)

2. Adjust any care axis. Wash method and temperature, mechanical action, bleach,
   drying, ironing and professional care are all editable. Each choice updates
   its symbol and its sentence at the same time, so they always agree.

![The care controls for wash, bleach, dry, iron, and professional care, each with a Show switch, set to a 30 degree gentle machine wash, non-chlorine bleach, tumble dry low, iron medium, and do not dry clean](/images/tools/care-label-generator/cl-step-care-controls.webp)

3. Build the fibre content. Add each fibre with a percentage. The tool checks
   that the total is 100 and that the fibres are in descending order. Fibre names
   depend on the market: US labels use Spandex and Rayon, EU labels use Elastane
   and Viscose, and the dropdown shows a market note beside each name. A fibre
   under 5% gets an amber warning, because US labels group those as "other
   fiber". Picking Leather, Down or Feather shows an EU animal-origin note.

![The Fibre content builder with 60% cotton and 40% polyester](/images/tools/care-label-generator/cl-step-fibre-content.webp)

4. Add the compliance fields. Your brand, size, RN number or company name,
   country of origin and style.

![The Label details section with the brand Northwind Apparel, size M, RN 123456, the company name, Made in Portugal, and the style number](/images/tools/care-label-generator/cl-step-label-details.webp)

5. Pick a template, a size and a colour, then download a PDF, a transparent PNG
   or an SVG. Or switch to Bulk sizes and tile a whole size run onto one sheet.

![The care label preview for Northwind Apparel at 40 x 60 mm with care symbols, fibre content, care text, size, RN and origin, above the download buttons](/images/tools/care-label-generator/cl-preview.webp)

The checklist under the preview shows which of the five label elements are on your label: care instructions, fibre content, the manufacturer, the country of origin, and the size. It checks that each one is there and that the fibre percentages add up. It does not check fibre names against the legal list for your market.

![The label element checklist showing 5 of 5 present: care instructions, fibre content, manufacturer identity, country of origin, and size](/images/tools/care-label-generator/cl-compliance.webp)

The tool saves your work in your browser as you go, and the Start new button
clears it back to a blank label.

## How to design a care label

A care label is read in a few seconds, often inside a seam, so the design job is to keep it short and in a fixed order.

![Six care label designs for the same Northwind Apparel t-shirt: Classic Sew-In, Compliance Stack, Bilingual (EU), Folded Two-Panel, Brand-Led Insert, and Boutique Serif](/images/tools/care-label-generator/cl-samples.webp)

- **Pick the size for where it is sewn.** 40 x 60 mm and 30 x 50 mm suit a side-seam label. 20 x 55 mm is a loop label folded over the neck seam. 25 x 40 mm and 35 x 35 mm suit small items and a printed neck tag.
- **Put the parts in the order a shopper looks for them.** Brand, fibre content, the care symbols with their words, then size, the RN or company name, and the country of origin. Most of the templates above follow that order.
- **Keep the symbols and words together.** Each symbol sits next to the sentence that says the same thing, so a buyer who does not know the symbols can still read the instruction.
- **Give a second language its own column.** The Bilingual (EU) template splits the care text into two columns, which is how labels for more than one market are usually laid out.
- **Choose a template by how much text you have.** Classic Sew-In and Compliance Stack fit the most text. Brand-Led Insert and Boutique Serif give the brand name more room and suit a short care list.

## The care symbol reference

There are five base care symbols. Every laundry care label uses the same five,
in the same left-to-right order: wash, bleach, dry, iron, professional care. Here
is what each one means, so you can read any care instructions label as well as
make one.

### The washtub (washing)

The washtub is the washing symbol. A number inside the tub is the maximum wash
temperature in degrees Celsius: 30 is cold, 40 is warm, 50 and 60 are hot, and 95
is very hot. A hand in the tub means hand wash only. Bars under the tub set the
mechanical action: no bar is a normal cycle, one bar is a mild or permanent-press
cycle, and two bars mean a very mild, gentle or delicate cycle. A cross through
the whole tub means do not wash.

### The triangle (bleaching)

The triangle is the bleach symbol. An empty triangle means any bleach may be
used. A triangle with two diagonal lines inside means only non-chlorine, oxygen
based bleach may be used. A triangle with a cross through it means do not bleach
at all. The two-line triangle is a common source of error: it is not the same as
the empty triangle, and it is not the same as the crossed one.

### The square (drying)

Drying uses the square. A square with a circle inside is the tumble-dry symbol:
one dot in the circle is low heat, two dots are normal heat, and a cross through
it means do not tumble dry. The square on its own, with line marks, means natural
drying. One vertical line is line dry. Two vertical lines are drip dry in current
ISO 3758, though the older US convention draws three. One horizontal line is dry
flat, which is what you want for knitwear that would
stretch on a line. Diagonal lines in the top-left corner of the square add "in
the shade", to keep colours from fading in sunlight.

### The iron (ironing)

The iron symbol is an iron outline with dots for heat. One dot is a cool iron, up
to about 110 degrees Celsius, for synthetics and stretch fibres such as elastane or spandex. Two dots are a medium
iron, up to about 150 degrees, for wool, silk and polyester blends. Three dots
are a hot iron, up to about 200 degrees, for cotton and linen. A cross through the
iron means do not iron.

### The circle (professional care)

The circle is the professional-care symbol, for dry cleaners. A letter P means
the garment can be dry cleaned with the usual solvents. A letter F means only a
gentler hydrocarbon solvent. A letter W means professional wet cleaning. A bar
under the circle asks for a mild, gentle process. A crossed circle means do not
dry clean. Home users can ignore the letters; they are instructions for the
cleaner.

## What US law requires: FTC 16 CFR part 423

In the United States the care instructions themselves are set by the FTC Care
Labeling Rule at 16 CFR part 423. The rule covers textile wearing apparel (not
footwear, gloves or hats) and certain piece goods. The label must give either a
washing instruction or a dry-cleaning instruction, plus the drying, bleach and
warning details the rule lists. Some items are exempt, such as totally reversible
garments without pockets (16 CFR 423.8). The label has to stay legible for the
useful life of the garment, which is why it is sewn in rather than printed on a
hang tag that gets thrown away.

The rule lets a label use the ASTM D5489 symbols instead of words (16 CFR
423.8(g) names the D5489-96c edition; check ASTM for the current one). This tool
draws generic ISO 3758-style symbols, so print the words with them unless you
have confirmed your symbols match the ASTM D5489 set the rule names.

You do not have to list every possible way to clean the garment. You have to give
a washing or dry-cleaning method that works and will not damage it, and warn
about anything that would. If a garment can only be dry cleaned, the label has to
say so and warn against washing.

## What US law requires: fibre content, TFPIA 16 CFR part 303

The Textile Fiber Products Identification Act, at 16 CFR part 303, governs the
rest of the label. It requires three things. First, the fibre content by generic
name and percentage by weight, in descending order, totalling 100. Second, the
identity of the company responsible, shown either as the full name the business
trades under or as a Registered Identification Number (an RN) issued by the FTC.
Third, the country of origin, such as "Made in Portugal". Wool products follow
the Wool Products Labeling Act rules (16 CFR part 300) instead of part 303. They
ask for the same three things, plus rules of their own, for example on when you
can use the words cashmere and mohair (300.19).

Generic names matter. The law has a fixed list of generic fibre names. In the US
the list is in 16 CFR 303.7 and includes cotton, silk, wool (under the Wool Act),
polyester, nylon, rayon and spandex. In the EU the names are in Annex I of
Regulation 1007/2011 and include viscose and elastane. Check which list applies
where you sell. You cannot substitute a trade name for the generic name.

Fibres under 5% of the weight cannot use their own name on a US label and are
grouped as "other fiber" (16 CFR 303.3), unless they have functional
significance. The EU allows "other fibres" for up to 5% of weight, or up to 15%
in total, when they cannot easily be stated (Article 9(2)).

The composition builder in this tool checks the percentages for you, so a 60/40
cotton-polyester shirt prints "60% Cotton 40% Polyester" with cotton first, and a
total that does not add up to 100 is flagged before you print. It also warns
about fibres under 5%. It does not check each name against the legal list, so
check the names for your market.

## What EU law requires: Regulation 1007/2011

The European Union rule is Regulation (EU) No 1007/2011. It makes the fibre
composition mandatory, using the regulated generic names in Annex I, and it must
appear in the official language or languages of the Member State where it is
sold, unless that Member State provides otherwise (Article 16(3)). That is why a
garment sold across the EU often carries the fibre content in several languages.

If a product has non-textile parts of animal origin, such as leather trim, EU
labels must say "Contains non-textile parts of animal origin" (Article 12).

One difference surprises people: Regulation 1007/2011 does not require care
symbols or instructions. Individual countries may have their own rules, so check
where you sell. In practice almost every brand includes care symbols, because
buyers expect them and retailers ask for them. The bilingual template in this
tool prints the care text in English plus French, Spanish or German, so a single
label can serve more than one market.

## Tips for a clean, correct label

- Match the symbols to the fibre, not to habit. Delicate fibres such as wool,
  cashmere, silk and viscose lose out to heat and agitation, so lean toward hand
  wash or a gentle cycle, flat or line drying, and a cool iron.
- Keep the fibre list in descending order and total 100. This is a common
  care-label error, and the tool checks it for you.
- Decide RN or company name. Either is fine. An RN is compact for a small sew-in
  label; the full company name needs no registration.
- Do not overpromise cleaning methods. Listing "machine wash" on a garment that
  cannot survive it is worse than listing "dry clean only".
- Proof at true size. Set your printer to 100% scale with no fit-to-page so a
  40 x 60 mm label prints 40 x 60 mm and the symbols stay legible.

## A note on symbol licensing

The care-symbol system is standardised, but the artwork carries different terms
in different places. The FTC rule allows ASTM D5489 symbols on US care labels (16
CFR 423.8(g)); this tool makes no statement about copyright or licensing of the
ASTM artwork. The ISO / GINETEX symbols used across much of the world are
trademarked, and using them can require a licence agreement with GINETEX. This
tool draws its own generic versions of the standard glyphs so you can design and
proof a label. It makes no compliance guarantee and carries no compliance badge.
Confirm the licensing and the labelling rules that apply where you sell before
you print at scale.

## Frequently asked questions

### Is this care label maker free?

Yes. It is completely free, needs no signup, and adds no watermark. Design and download as many clothing care labels as you like as a true-size PDF, a transparent PNG, or an SVG, one at a time or tiled onto a US Letter or A4 sheet for a whole size run.

### What has to be on a clothing care label?

In the United States two rules apply. The FTC Care Labeling Rule (16 CFR part 423) covers textile wearing apparel (not footwear, gloves or hats). The label must give either a washing instruction or a dry-cleaning instruction, plus the drying, bleach and warning details the rule lists. Some items are exempt, such as totally reversible garments without pockets (16 CFR 423.8). The Textile Fiber Products Identification Act (16 CFR part 303) requires the fibre content by generic name and percentage by weight, the identity of the maker or seller (the full name the business trades under, or an RN issued by the FTC), and the country of origin. Wool products are labelled under the Wool Products Labeling Act (16 CFR part 300) instead. This tool lets you fill in all of these elements and shows a checklist of which are present.

### Are the care symbols ISO 3758 or ASTM D5489?

ISO 3758 is the international care-symbol standard, and the FTC Care Labeling Rule names ASTM D5489 for the United States (16 CFR 423.8(g) names the D5489-96c edition; check ASTM for the current one). This tool draws generic ISO 3758-style glyphs: the washtub, the bleach triangle, the tumble-dry square, the iron, and the professional-care circle. It keeps them in sync with the written care instructions, because both are generated from the same care choices. Confirm that your symbols match the set your market requires before you print.

### Do I have to write out the care instructions, or can I use symbols?

In the United States the FTC rule lets a label use the ASTM D5489 symbols instead of words. This tool draws generic ISO 3758-style symbols, so print the words with them unless you have confirmed your symbols match the ASTM D5489 set the rule names. Many markets prefer both, which is why this tool prints the symbol row and the matching sentences together. Regulation (EU) No 1007/2011 does not require care symbols or instructions, but the fibre composition it does require must appear in the official language or languages of the Member State where it is sold, unless that Member State provides otherwise (Article 16(3)). That is what the bilingual template is for.

### How do I write the fibre content correctly?

Use the generic fibre names for your market, give each a percentage by weight, list them in descending order with the largest first, and make sure the percentages total 100. So a shirt that is more cotton than polyester reads 60% Cotton 40% Polyester, not the other way round. US labels use names such as Spandex and Rayon (16 CFR 303.7), and EU labels use names such as Elastane and Viscose (Annex I of Regulation 1007/2011). Fibres under 5% of the weight cannot use their own name on a US label and are grouped as "other fiber" (16 CFR 303.3), unless they have functional significance. The EU allows "other fibres" for up to 5% of weight, or up to 15% in total, when they cannot easily be stated (Article 9(2)). The composition builder checks the total and the order, warns about fibres under 5%, and can sort the fibres into descending order for you. It does not check each name against the legal list, so check the names for your market.

### What is an RN number and do I need one?

An RN (Registered Identification Number) is a number the FTC issues to qualified businesses residing in the United States, so the business can be identified on a label instead of printing its full name. You are not required to have one: you may print the full name the business trades under instead. An RN is compact, which is useful on a small sew-in label, and there is no charge to apply on the FTC website. Businesses outside the United States cannot get one. This tool lets you print either the RN or the company name.

### Does the EU need a different care label from the US?

Yes, the rules differ. In the EU, Regulation (EU) No 1007/2011 makes the fibre composition mandatory, using the Annex I names, in the official language or languages of the Member State where the product is sold, unless that Member State provides otherwise (Article 16(3)). If a product has non-textile parts of animal origin, such as leather trim, EU labels must say "Contains non-textile parts of animal origin" (Article 12). Regulation 1007/2011 does not require care symbols or instructions, and individual countries may have their own rules, so check where you sell. In the US, the care instructions (16 CFR 423), the fibre content, the maker identity and the country of origin (16 CFR 303) are all required. The bilingual template prints the care text in English plus French, Spanish or German so one label can serve more than one market.

### Can I use these care symbols commercially?

The FTC rule allows ASTM D5489 symbols on US care labels (16 CFR 423.8(g)); this tool makes no statement about copyright or licensing of the ASTM artwork. The ISO / GINETEX symbol set is trademarked in many countries, and using those symbols can require a licence agreement with GINETEX. This tool draws its own generic versions of the standard glyphs so you can design and proof a label, but it makes no compliance guarantee and carries no compliance badge. Check the licensing that applies where you sell before you print at scale.

### Will the label print at the right size?

Yes. You pick a real sew-in size in millimetres (40 x 60 mm is the default) or set a custom size, and the PDF page and the PNG are exactly that size. Print at 100% scale with no fit-to-page and a 40 x 60 mm label comes out 40 x 60 mm. The SVG carries the real physical dimensions too, so it opens at true size in a cutter or a vector editor.

### Can I print a whole size run at once?

Yes. Switch to Bulk sizes, paste one label per line (Size, Style, Copies) or import a CSV with a sample file provided, and the tool tiles every label onto a Letter or A4 sheet with cut guides. The care symbols, care text, fibre content, RN and origin are shared across the run, while each row prints its own size and style, so an XS to XXL run comes out correctly on one sheet.

### Will the PNG have a transparent background?

Yes. The PNG export keeps real transparent alpha outside the cut, so the label drops onto your own artwork or a tech pack without a white box around it. The PDF is a true-size page for printing, and the SVG is a vector version of the same label with the care symbols as real geometry.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (-). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Cash Receipt Template & Generator - Free, Amount in Words
description: Free cash receipt template and generator. Spell the amount in words, add your logo, and download a printable money receipt as a PDF, PNG, or CSV. No signup.
---

# Free Cash Receipt Template & Generator

Fill in a free **cash receipt template** and the generator spells the amount out in words as you type. Pick a receipt type, add your business name and logo, and download a printable cash receipt or money receipt as a PDF, PNG, or CSV. It runs in your browser, with no signup and no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, video, etc.). -->

## What a cash receipt is

[![Watch How It Works](https://img.youtube.com/vi/dsNyn7tTroM/maxresdefault.jpg)](https://youtu.be/dsNyn7tTroM)

A **cash receipt** is the document you give someone to acknowledge money you received from them in person. People also call it a **money receipt** or a **cash payment receipt**. It records the payer, the amount, the purpose, the date, and how the money was paid, and it is signed by whoever took the money. For the payer it is proof of payment. For you it is the bookkeeping voucher that backs up your cash records.

A cash receipt is a formal accounting document, not a till slip. That is the difference between this tool and a [point-of-sale receipt maker](/tools/receipt-generator). A cash receipt names the payer, spells the amount in words, states the purpose, and has a signature line. This generator builds that document, so your **printable cash receipt** looks like a real voucher and not a thermal receipt roll.

## How to make a cash receipt

1. **Add your letterhead.** In the **Business** section, enter your business name, address, phone, and email, and upload a logo. The tool saves these on your device, so you only type them once.

![Business section with the business name, receipt title, address, phone, email, and logo upload filled in](/images/tools/cash-receipt-generator/business-letterhead.webp)

2. **Pick the receipt type.** Under **Receipt type**, choose General Cash Receipt, Petty Cash Voucher, Cash Sale Receipt, or Deposit / Advance. Each type sets a matching title, unless you typed your own, and turns on the blocks it needs.

![Receipt type selector showing the four types with General Cash Receipt selected](/images/tools/cash-receipt-generator/receipt-type.webp)

3. **Fill in the payment.** Under **Payer & receipt**, enter who paid, the receipt number, the date, and the currency. Under **Payment details**, enter the amount, choose cash, check, money order, card, or other, and say what the payment was for. Add a reference number for a check or money order.

![Payer and payment fields filled in for a 250 dollar cash payment for a custom flower arrangement](/images/tools/cash-receipt-generator/payer-and-payment.webp)

4. **Sign and style it.** Under **Signature**, enter the name of the person who received the money. Then pick one of 14 templates, an accent color, a font, and a single copy or an Original + Duplicate pair.

![Template gallery and style controls with Classic Voucher selected and the copy layout set to Single](/images/tools/cash-receipt-generator/template-and-style.webp)

5. **Download it.** Click **Download PDF** for a print-ready Letter or A4 page, or click **PNG** for an image or **CSV** for the receipt data as a two-column list you can open in a spreadsheet. To print, open the PDF and print it from your PDF viewer.

![Download PDF, PNG, and CSV buttons under the live cash receipt preview](/images/tools/cash-receipt-generator/download-buttons.webp)

The whole process runs in the browser. Nothing is uploaded, so your payment data stays on your computer.

## Cash receipt format: what goes where

A cash receipt follows a set format. The receipt this generator prints puts each part in the same place every time, from top to bottom:

![Finished cash receipt from Maple Street Garden Center for 250 dollars in cash, with the amount in words and a Received by signature line](/images/tools/cash-receipt-generator/cash-receipt-format.webp)

1. **Letterhead.** Your logo, business name, address, phone, and email across the top.
2. **Title.** "Cash Receipt" by default, in large type. You can change it in the Receipt title field.
3. **Receipt No. and Date.** Printed in the header, next to the letterhead. Numbers start at CR-0001 and you can edit them. The date prints in the format you choose: MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD, or Month D, YYYY.
4. **Received from and Amount received.** The payer's name on the left and the amount in figures in a box on the right.
5. **The sum of (amount in words).** The same amount spelled out, such as Two Hundred Fifty Dollars.
6. **For (payment for).** One line that says what the money was for.
7. **Payment method.** Cash, Check, Money Order, Card, or Other, with the reference number after it when you add one.
8. **Optional blocks.** A petty cash voucher adds Approved by and Account / GL code. A cash sale adds a table with Description, Qty, Unit price, and Amount, then the subtotal, tax, and total. A deposit adds Total due, Amount received, and Balance due.
9. **Received by.** A signature line with the name of the person who took the money.

With the Original + Duplicate layout, the same format prints twice on one page, labelled Original and Duplicate, with a cut line between the copies.

## Money receipt template

Many businesses call a cash receipt a money receipt. Either way, the receipt acknowledges money received, and this generator spells the amount in words and adds a signature line. To print one with that heading, type "Money Receipt" in the **Receipt title** field. The title changes on the receipt and the rest of the format stays the same.

The receipt still says how the money was paid, so a money receipt for a check or a money order is just as easy. Pick the method and add the check or money order number in the reference field.

## Cash receipt template in Word format

This generator does not make a Word (.docx) file. It downloads three formats:

- **PDF**, a true-size US Letter or A4 page, ready to print or email.
- **PNG**, an image of the receipt.
- **CSV**, the receipt data as rows you can open in Excel or Google Sheets.

The PDF holds an image of the receipt, so its text cannot be edited in Word or a PDF editor. To change a receipt, edit the fields in the generator and download it again. Your letterhead and the working receipt are saved on your device, so they are still there next time.

If you keep your paperwork in Word, download the PNG and add it to your document as a picture (in Word, **Insert > Pictures**). You get the finished receipt inside your Word file, but not editable Word fields.

## Why the amount is spelled out in words

Writing the amount twice is the oldest trick in receipt design. The figure appears once as digits, like \$1,234.56, and once as words, like One Thousand Two Hundred Thirty-Four Dollars and Fifty-Six Cents. This makes the amount hard to alter. A single pen stroke can turn a 1 into a 4, but it cannot rewrite the words. That is why cheques, promissory notes, and cash receipts all spell the amount out.

This tool does the spelling for you, live, as you type. It uses US short-scale English and Title Case, and it spells both the main unit and the cents out in full, naming the currency automatically. A few worked examples:

- \$100 becomes One Hundred Dollars.
- \$42.50 becomes Forty-Two Dollars and Fifty Cents.
- \$1,234.56 becomes One Thousand Two Hundred Thirty-Four Dollars and Fifty-Six Cents.
- \$1,000,000 becomes One Million Dollars.

The currency word at the end follows the currency you pick, so a euro receipt reads Euros and a pound receipt reads Pounds.

## Handling deposits, part payments, and balance due

Not every payment settles a bill in full. When a customer pays a deposit or an advance, switch on the partial payment block or pick the Deposit / Advance type. Enter the **Total Due** and the amount received. The receipt then shows the balance:

Balance Due = Total Due - Amount Received.

The balance never goes below zero. If someone pays more than they owe, the balance shows as zero rather than a negative number. If you leave Total Due blank, the tool treats the amount received as payment in full and the balance is zero. This keeps a deposit receipt clear and easy to read.

## Itemized cash sale receipts

When the receipt is for goods sold, pick the Cash Sale type to add a line-item table. Each row takes a description, a quantity, and a unit price, and the tool does the arithmetic:

- Subtotal = the sum of quantity times price across every row.
- Total = Subtotal + Tax, where Tax is the subtotal times the tax rate you enter.

For example, three rows that add up to a \$185.00 subtotal, taxed at 8 percent, add \$14.80 of tax for a \$199.80 total. The amount in words then spells out that total, so an itemized **cash sale receipt** reads as one clean document.

## The two-up cash receipt book layout

Paper receipt books print two copies of each receipt on a page. You keep one copy and tear the other off for the payer. This tool copies that idea. Switch the copy layout to Original + Duplicate and it prints the original plus an identical duplicate copy at full page width with a cut line between them. A standard cash receipt fits both copies on a single page. A long itemized cash sale may run to a second page. This is the printable version of a **cash receipt book**: print the page, keep the original, and hand over the duplicate. The Receipt Book and Duplicate Pair templates turn this layout on by default.

## Cash receipt vs POS or sales receipt

A point-of-sale receipt is the narrow slip a cash register prints. It leans on a barcode, a store footer, and a card approval line, and it is designed for speed at a checkout. A cash receipt is different. It is a letterhead document that names the payer, spells the amount in words, states the purpose, and carries a signature. Use a **money receipt template** like this one when you take money by hand and need a proper acknowledgment or a voucher for your books, not a till slip.

If you need a register-style slip instead, use the [receipt maker](/tools/receipt-generator). For rent payments, the [rent receipt generator](/tools/rent-receipt-generator) adds the tenant and rental period, and the [donation receipt generator](/tools/donation-receipt-generator) covers gifts to a charity.

## Tips for clean, professional receipts

- Keep a running **receipt number** so your receipts are easy to find later. CR-0001, CR-0002, and so on.
- Add your **logo** so the receipt looks like it came from your business.
- Fill in the **For** line clearly. Future you, and the payer, will thank you.
- Use the **two-up copy** layout if you hand receipts to customers in person.
- Save the PDF and a **CSV** copy of the data so your cash book stays current.

## Frequently asked questions

### What is a cash receipt?

A cash receipt, also called a money receipt or cash payment receipt, is the document a business or individual gives to acknowledge money received in person. It records who paid, how much, what the payment was for, the date, and how it was paid, and it is signed by whoever received the money. It is the payer's proof of payment and the seller's bookkeeping voucher. A cash receipt is a formal accounting document, not a thermal point-of-sale slip.

### Why does a cash receipt spell the amount in words?

Spelling the amount in words is the defining feature of a classic money receipt. Writing the figure twice, once as digits and once as words such as One Thousand Two Hundred Thirty-Four Dollars and Fifty-Six Cents, makes the amount tamper-resistant: a stray pen stroke cannot turn 100 into 1,000 when the words also say One Hundred. This generator spells the amount automatically as you type, using US short-scale English with both the currency unit and the cents written out in full.

### How does the partial payment and balance due work?

Turn on the partial payment block (or pick the Deposit / Advance type) to record a part payment. Enter the Total Due and the amount received, and the receipt shows Balance Due = Total Due minus amount received. The balance is clamped at zero, so a payment larger than the amount owed shows a zero balance rather than a negative number. If you leave Total Due blank, the amount received is treated as payment in full and the balance is zero.

### Can I make an itemized cash sale receipt?

Yes. Pick the Cash Sale type (or switch on itemized line items) to add a table of goods sold. Each row takes a description, quantity, and unit price, and the receipt computes Subtotal = the sum of quantity times price for every row, then Total = Subtotal + Tax using the tax rate you enter. For example, a subtotal of 185.00 dollars with an 8 percent tax adds 14.80 dollars of tax for a 199.80 dollar total.

### What is the two-up Original and Duplicate copy layout?

A paper cash receipt book prints two identical copies per page: you keep one and hand the other to the payer. Switch the copy layout to Original + Duplicate and the generator prints the original plus an identical duplicate copy at full page width with a cut line between them, matching that carbon-copy workflow. A standard cash receipt fits both copies on a single page; a long itemized cash sale may run to a second page. It is ideal for a printable cash receipt book you fill in and tear off. Single-copy layout is the default.

### Is this a petty cash receipt template too?

Yes. Choose the Petty Cash Voucher type and the receipt adds an Approved by line and an account or GL code field, the two things a petty cash voucher needs beyond a plain receipt so the disbursement can be posted to the right ledger account. It still spells the amount in words and prints the same clean way as every other type.

### Is the cash receipt generator really free with no watermark?

Yes. It is 100 percent free with no signup and no watermark on any export. Create and download as many receipts as you like as a print-ready PDF (true-size Letter or A4), a PNG, or a CSV of the receipt data. Your letterhead and working receipt save on your device only, and the whole tool runs in your browser, so no payment data ever leaves your computer.

### How is a cash receipt different from a POS or sales receipt?

A point-of-sale receipt is the narrow thermal slip a register prints, focused on a barcode, a store footer, and a card approval line. A cash receipt is a formal, letterhead-style document that names the payer, spells the amount in words, states the purpose, and carries a Received By signature. Use a cash receipt when you take money by hand and need a proper acknowledgment or bookkeeping voucher rather than a till slip.

### What is the format of a cash receipt?

From top to bottom: your letterhead, the title, the receipt number and date, Received from with the amount in figures, the amount in words, what the payment was for, the payment method, and a Received by signature line. Petty cash, cash sale, and deposit receipts add their own block above the signature.

### Is a money receipt the same as a cash receipt?

Usually, yes. Both names are used for a receipt that acknowledges money received, and this generator spells the amount in words on either one. To print the heading Money Receipt, type it in the Receipt title field.

### Can I download a cash receipt template in Word format?

No. The generator downloads a PDF, a PNG, and a CSV, not a Word (.docx) file. To use the receipt in Word, insert the PNG as a picture. To change the receipt, edit it in the generator and download it again.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     4. The "## Frequently asked questions" answers must match FAQ_ITEMS in page.tsx word for word. -->

# Free Commercial Invoice Template

Fill in a customs-ready **commercial invoice template** and download a print-ready PDF in about two minutes. Add your exporter and importer details, list each product with its HS tariff code and country of origin, pick an Incoterms 2020 rule, and sign the declaration. It is free, runs entirely in your browser, and needs no signup.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## What Is a Commercial Invoice?

A commercial invoice is the customs document that travels with an international shipment. It tells the customs authority in the destination country who is selling the goods, who is buying them, what the goods are, what they are made of, where they were made, and what they are worth. Customs uses it to decide how much duty and tax to charge and whether the shipment is allowed in at all.

It is not the same as your sales invoice, even though it usually repeats the same numbers. A sales invoice asks your customer for money. A commercial invoice is a declaration to a government. If the declaration is wrong or incomplete, the parcel sits in a customs warehouse until somebody fixes it, and your customer pays storage fees while they wait.

Every international carrier expects one. FedEx, UPS, DHL, and freight forwarders all ask you to attach three copies to the outside of the parcel, usually in a clear documents-enclosed pouch. Shipments of documents with no commercial value are the only common exception.

## How to Fill Out a Commercial Invoice

This **commercial invoice template for international shipping** walks through the required blocks in order. Here is what goes in each one.

[![Watch How It Works](https://img.youtube.com/vi/pMtH5qd_fCk/maxresdefault.jpg)](https://youtu.be/pMtH5qd_fCk)

1. **Exporter (shipper)**: Your legal business name, full address, and email. Add your tax registration number: an EORI number in the UK and EU, an IRS/EIN number in the US, or the equivalent for your country. Customs uses this to identify you as the exporter of record.
2. **Importer (buyer)**: The legal name and full address of the party who is buying the goods and who will be the importer of record. Add their tax or EORI number too. A missing importer tax ID is one of the most common reasons a commercial shipment is held.
3. **Ship to (consignee)**: Only fill this in if the goods physically go somewhere other than the buyer's billing address. A common case is a buyer with head office in Germany whose warehouse is in Poland. Turn the consignee block on in the Customs tab and it appears next to the buyer on the document.
4. **Invoice number and date**: Use your own numbering. The carrier and your customs broker will quote this number in every message about the shipment.
5. **Reason for export**: Sale, sample, gift, repair or return, replacement, personal effects, documents, or an intercompany transfer. This is the "nature of the transaction" and it changes how the goods are treated. A free sample and a commercial sale are not valued the same way.
6. **Incoterms 2020 rule and named place**: Pick the rule you agreed with your buyer and type the place or port it refers to, for example `FOB Shanghai`.
7. **Line items**: One row per product. Give a plain description of what the thing actually is, the HS tariff code, the country of origin, the quantity with its unit, the net weight of one unit, and the unit price.
8. **Charges**: Freight, insurance, and any other charge such as packing, each entered separately.
9. **Packages and weights**: The number of cartons, the gross weight, and the net weight. The tool computes net weight for you from the line items.
10. **Declaration and signature**: The certification statement, your name and job title, and the date. Print it and sign the line by hand.

## Write a Description Customs Will Accept

The single most common reason a parcel is held is a vague goods description. "Gift", "sample", "parts", and "clothing" are all too vague. A customs officer needs to know what the item is, what it is made of, and what it is for.

Compare these:

- Bad: `Shirts`
- Good: `Men's knitted crew neck T-shirts, 100% cotton`
- Bad: `Machine parts`
- Good: `Stainless steel ball bearings for industrial pumps`

Write the description so that somebody who has never seen your product could classify it. If you sell in a language other than English, add an English description as well.

## HS Codes Explained

The Harmonized System is a global product classification run by the World Customs Organization. Every traded good has a code, and that code decides the duty rate.

The first six digits are the same in every country that uses the system, which is almost every country in the world. Six digits is the international minimum, and it is what you should treat as the floor for any commercial invoice. Countries then extend the code for their own tariff. The US HTSUS goes to 10 digits, the EU combined nomenclature goes to 8, and the UK goes to 10.

A code reads in groups. `6109.10.0012` breaks down as chapter `61` (knitted apparel), heading `6109` (T-shirts and singlets), subheading `6109.10` (of cotton), and then the national extension `0012`. This tool formats whatever digits you type into that grouped shape automatically.

Two things worth knowing. First, this tool does not look codes up for you. It captures the code you already have from your supplier, your customs broker, or your country's tariff search tool, and prints it correctly. Second, getting the code wrong is your liability, not the carrier's. If you are unsure, ask a licensed customs broker. A wrong code can mean back-duty and penalties years later.

## Incoterms 2020: The Eleven Rules

Incoterms are published by the International Chamber of Commerce and define who pays for what and where the risk passes from seller to buyer. The current edition is Incoterms 2020 and it contains exactly eleven rules in two families.

**Any mode of transport (7 rules).** These work for air, road, rail, sea, or any mix of them:

| Rule | Name |
| --- | --- |
| EXW | Ex Works |
| FCA | Free Carrier |
| CPT | Carriage Paid To |
| CIP | Carriage and Insurance Paid To |
| DAP | Delivered at Place |
| DPU | Delivered at Place Unloaded |
| DDP | Delivered Duty Paid |

**Sea and inland waterway transport only (4 rules).** These assume the goods cross a ship's rail, so they should never be used for air freight or courier shipments:

| Rule | Name |
| --- | --- |
| FAS | Free Alongside Ship |
| FOB | Free on Board |
| CFR | Cost and Freight |
| CIF | Cost, Insurance and Freight |

Two traps to avoid. **DAT no longer exists**: it was renamed DPU in the 2020 edition, so do not copy it from an old template. **DDU and EXQ were withdrawn** back in Incoterms 2010 and 2000 respectively, and they still turn up in stale spreadsheets found online. This tool only offers the eleven current rules and labels the four sea-only ones so you cannot quietly put FOB on an air shipment.

Always write the rule with a place after it. `FOB` on its own is incomplete. `FOB Shanghai` is a term. For EXW, FCA, CPT, CIP, DAP, DPU, and DDP the place is a named place of delivery or destination. For FAS, FOB, CFR, and CIF it is a named port.

## What US Customs Requires

If you are shipping into the United States, the required contents of a commercial invoice are set out in [19 CFR 141.86](https://www.ecfr.gov/current/title-19/chapter-I/part-141/subpart-F/section-141.86). In plain terms it asks for:

- The names of the seller and the buyer, and the consignee where that is a different party.
- A detailed description of the merchandise, including the grade or quality and the marks on the packages.
- The quantities, given in weights and measures.
- The purchase price of each item, in the currency of the sale.
- The kind of currency, stated explicitly. This is why the document prints the currency code such as USD and not only a `\$` symbol.
- All charges on the goods, itemised by name and amount. Freight, insurance, packing, and commission each get their own line. Rolling them into the goods value is not acceptable.
- The country of origin of the goods.
- The name of a responsible employee of the seller or shipper who has knowledge of the transaction.

This tool has a field for every one of those. Note that 19 CFR 141.86 does not itself require a handwritten signature - it asks the invoice to identify a responsible person by name. Carriers and the destination country usually do want a signature, so signing the declaration is still good practice, and this tool gives you a signature line for it. [CBP and trade.gov](https://www.trade.gov/commercial-invoice) publish further guidance if you want the official summary. If you are shipping to another country, check that country's own requirements as well, but the US list is a good superset for most destinations.

## Commercial Invoice vs Proforma Invoice

A proforma invoice is a quote in the shape of an invoice. You send it before the sale is agreed so the buyer can arrange payment, apply for an import licence, or open a letter of credit. It is not a demand for payment and it is not a final customs value.

A commercial invoice is issued once the sale is done. It states the actual agreed price, it is the document customs assesses duty against, and it carries a signed declaration.

The practical difference: if the goods have been sold, use a commercial invoice. If you are still negotiating or the goods have no sale price, such as a free sample or a warranty replacement, a proforma invoice is usually correct. In that case customs still needs a value, so state a realistic fair market value and mark it clearly as being for customs purposes only.

## Net Weight, Gross Weight, and Packages

Customs cares about weights as much as money, because weight is how they sanity check your declaration and how the carrier bills you.

- **Net weight** is the weight of the goods alone, with no packaging. This tool computes it as the net weight of one unit multiplied by the quantity, summed across every line.
- **Gross weight** is the whole shipment on the scale, including cartons, pallets, and wrap. It must be larger than the net weight. If you type a gross weight below the computed net, the tool shows a warning so you can catch the typo before it reaches the carrier.
- **Packages** is the number of cartons or pieces the carrier will physically handle.

## FedEx and UPS Commercial Invoices

Searching for a **fedex commercial invoice template** or a **ups commercial invoice template** usually lands you on a static PDF form you have to print and fill in by hand, or open in a PDF reader that mangles the layout.

The information the carriers want is the same in every case, because it is the destination country's customs authority asking, not the carrier. Any commercial invoice that carries the exporter, importer, description, HS code, origin, quantity, value, currency, charges, Incoterm, and a signature will be accepted by FedEx, UPS, DHL, and freight forwarders alike. The PDF this tool produces carries all of that.

Print three copies. One goes to the destination customs authority, one travels with the goods, and one stays with you. Sign each copy by hand in ink. Some destinations still reject a printed signature.

## Tips That Save You Delays

- **Match the invoice to the parcel exactly.** If the box has 100 shirts, the invoice says 100 shirts. A mismatch between the declared quantity and the physical count triggers an inspection.
- **Never undervalue.** Declaring a \$500 shipment as \$50 to save your customer duty is customs fraud, and the penalties land on the exporter.
- **State the currency code.** `\$` means one thing in the US and something else in Australia, Canada, and Singapore.
- **Keep origin per line.** Country of origin means where the goods were manufactured, not where you shipped them from. A US seller can absolutely ship goods with a Chinese origin.
- **Sign it.** An unsigned commercial invoice is not a declaration. This is the most common single omission.
- **Keep copies for five years.** Most customs authorities can audit an entry years after the fact.

## Frequently asked questions

### What is a commercial invoice?

A commercial invoice is the customs document that travels with an international shipment. It states who is selling and buying the goods, what the goods are, where they were made, and what they are worth. Customs uses it to calculate duty and tax and to decide whether the shipment can enter the country.

### What is the difference between a commercial invoice and a proforma invoice?

A proforma invoice is sent before the sale is final. It is a quote used to arrange payment, an import licence, or a letter of credit. A commercial invoice is issued after the sale is agreed, states the actual price paid, is the document customs assesses duty against, and carries a signed declaration.

### What must a commercial invoice include?

Under 19 CFR 141.86, US customs requires the seller and buyer (and the consignee where different), a detailed description of the goods, quantities in weights and measures, the unit price and total in the currency of sale, the kind of currency stated explicitly, all charges itemised by name and amount, the country of origin, and the name of a responsible employee of the seller or shipper who has knowledge of the transaction. The regulation does not itself require a handwritten signature, but carriers and the destination country usually do, so signing the declaration is still good practice.

### How many digits should an HS code have?

Six digits is the international minimum set by the World Customs Organization, and the first six digits are identical in every country that uses the Harmonized System. Countries then extend the code for their own tariff: the US HTSUS uses 10 digits and the EU combined nomenclature uses 8. This tool accepts 6 to 10 digits and formats them as 6109.10.0012.

### How many Incoterms 2020 rules are there?

There are exactly eleven. Seven work for any mode of transport: EXW, FCA, CPT, CIP, DAP, DPU and DDP. Four are for sea and inland waterway transport only: FAS, FOB, CFR and CIF. DAT was renamed DPU in the 2020 edition, and DDU and EXQ were withdrawn in earlier editions, so none of those three should appear on a current commercial invoice.

### What is the difference between net weight and gross weight?

Net weight is the weight of the goods alone with no packaging. Gross weight is the whole shipment on the scale including cartons, pallets and wrap, so it is always the larger of the two. This tool computes net weight as the per-unit net weight multiplied by the quantity, summed across every line item, and warns you if the gross weight you enter is below it.

### Can I use this as a FedEx or UPS commercial invoice template?

Yes. Carriers do not have their own required fields; they pass your document to the destination country's customs authority. Any commercial invoice carrying the exporter, importer, goods description, HS code, country of origin, quantity, value, currency, itemised charges, Incoterm and a signature is accepted by FedEx, UPS, DHL and freight forwarders. Print three copies and sign each one by hand.

### Is this commercial invoice generator free?

Yes. It is completely free, needs no signup, and creates unlimited commercial invoices. Everything runs in your browser, so your exporter, importer and product data never leaves your computer. The exported PDF carries no watermark and no branding.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Pinterest Tools - PinFlow

> Collection of free Pinterest SEO tools for Shopify merchants. Free forever.

## Available Tools

### Pinterest Tools

- **[Pinterest Pin Generator](/tools/pinterest-pin-generator)**: Create thousands of product pins from your images with 36 templates and 28 color palettes. Outputs at 1000×1500px. Free, no signup.
- **[Pinterest Infographic Generator](/tools/pinterest-infographic-generator)**: Turn bullet points into listicle and step-by-step infographic pins. 15 templates, batch ZIP download. Free, no signup.
- **[Pinterest Pin Title Generator](/tools/pinterest-title-generator)**: Generate 10 click-worthy pin titles, 5 SEO descriptions, and 10 keyword ideas from your Shopify product. Free.
- **[Pinterest Board Name Generator](/tools/pinterest-board-generator)**: Generate 10 Pinterest board names and 5 SEO-optimised board descriptions for your Shopify store. Free.
- **[Pinterest Hashtag Generator](/tools/pinterest-hashtag-generator)**: Generate relevant Pinterest hashtags for your Shopify products. Customise tone, language, and count. Free.

### Utility Tools

- **[Free Image Resizer & Optimizer](/tools/image-resizer)**: Resize, compress, and convert images for Shopify, Pinterest pins (1000×1500), and social media. Batch downloads. No signup.
- **[Free QR Code Generator](/tools/qr-code-generator)**: Instantly create downloadable QR codes for links, Wi-Fi, vCards, and SMS. Custom branding. No signup.
- **[Free Business Card Maker](/tools/business-card-maker)**: Design professional business cards with 12 templates, logo upload, and built-in QR codes. PDF, PNG, or SVG export.
- **[Free Barcode Generator](/tools/barcode-generator)**: Generate barcode labels in EAN-13, UPC-A, CODE128, and more. Print sheets or bulk CSV upload.
- **[Free Invoice Generator](/tools/invoice-generator)**: Create professional invoices with your logo, line items, tax, and discounts. Instant PDF download.
- **[Free Profit Margin Calculator](/tools/profit-margin-calculator)**: Calculate selling price, gross margin, and net profit. Factor in shipping and acquisition costs.
- **[Free Reverse Sales Tax Calculator](/tools/reverse-sales-tax-calculator)**: Back the sales tax out of a gross total to find the price before tax and the tax amount. US state and Canada presets. No signup.
- **[Free Break-Even Calculator](/tools/break-even-calculator)**: Find the units and revenue you need to cover costs, plus contribution margin and the sales needed to hit a profit goal. No signup.
- **[Free ROAS Calculator](/tools/roas-calculator)**: Calculate return on ad spend, break-even ROAS, and target ROAS, plus the ad budget needed to hit your revenue goal. No signup.
- **[Ecommerce Conversion Rate Calculator](/tools/ecommerce-conversion-rate-calculator)**: Turn visitors and orders into your conversion rate, see revenue per visitor, and project the extra revenue from hitting a target rate. No signup.
- **[Free llms.txt Generator & Validator](/tools/llms-txt-generator)**: Generate and validate llms.txt files for your ecommerce store. Make your store AI-ready for ChatGPT, Gemini, and Claude.
- **[Free Shopify Email Signature Generator](/tools/email-signature-generator)**: Build professional email signatures with track-order links, returns policy, promo codes, and social links. Copy HTML for Gmail, Outlook, and Shopify Email.
- **[Free UTM Link Builder](/tools/utm-link-builder)**: Build trackable UTM campaign URLs with smart ecommerce defaults, real-time preview, and URL-length warnings. Free, no signup.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     4. Voice rules from the shopify-community answer-thread skill: first person, measured proof from
        real exports, a screenshot under each step, no teaser lines. Check with
        python3 scripts/check-blog-voice.py --tools --only coupon-template-generator -->

---
title: Free Coupon Maker
description: Free coupon maker with 12 templates. Add a QR code or barcode, print a sheet with crop marks and unique codes, and download a PDF or PNG. No signup.
---

# Free Coupon Maker

Make your own coupons with your business name, logo, discount, and promo code. Download a PNG for email and social posts, or print a whole sheet of coupons at true size with crop marks and a different code on each one.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to make your own coupons

[![Watch How to Make a Coupon](https://img.youtube.com/vi/epuS-2RFDTo/maxresdefault.jpg)](https://youtu.be/epuS-2RFDTo)

I tested this coupon maker by printing a sheet of eight 25% off coupons for a made-up shop called Willow & Thread Co. Each coupon got its own promo code and a barcode for that code. I downloaded the PDF and checked it at 300 DPI. The page came out at exactly 8.5 x 11 inches, the crop marks sat 3.5 inches apart, and all eight barcodes decoded to the codes printed under them.

The steps below follow that same run. Every setting shows in the live preview as you change it.

1. **Fill in the coupon details.** Type your business name and upload a logo if you have one. Pick a discount type: percent off, amount off, BOGO, or free shipping. Then add a short headline such as "Summer Sale" and an optional line of description. If you want to see a finished coupon first, click **Fill example**.

![The Coupon Details form filled in for Willow & Thread Co., with 25% off, the headline Summer Sale, the promo code SUMMER25, an expiry date of Dec 31, 2026, and the redemption terms](/images/tools/coupon-template-generator/step-details.webp)

2. **Add a promo code and an expiry date.** Type the code your store will accept, or click **Generate** for a random one. Set an expiry date, or turn on **No expiry** to hide the date. Edit the fine print to match your own policy.

3. **Pick a template.** There are 12 coupon templates, from a plain Modern layout to a dark Black Friday design. The preview redraws the moment you click one, so you can try a few before you settle.

![The template picker showing coupon templates such as Modern, Vintage Ticket, Minimal, and Bold Sale, each drawn with the example coupon](/images/tools/coupon-template-generator/step-template.webp)

4. **Add a QR code or a barcode.** Under **Scannable code**, choose **QR code** or **Barcode**. A barcode holds the promo code, so a till scanner can read it. A QR code can hold your store's discount link instead. On Shopify that link looks like `yourstore.com/discount/SUMMER25`, and it applies the discount at checkout when a customer scans it.

![The Scannable code section with QR code selected and the Discount URL field set to a store discount link ending in SUMMER25](/images/tools/coupon-template-generator/step-scan.webp)

5. **Choose colors and a font.** Pick one of the color themes or set your own accent and text colors. The font list shows each font in its own style.

6. **Download one coupon.** **Download PNG** gives you a sharp image for an email, a website banner, or a social post. **Download PDF** places one coupon on a US Letter page at the size printed on the button. The coupon strip comes out at 7 x 3.31 inches.

![The coupon preview for Willow & Thread Co. above the Download PNG button and the Download PDF (7 x 3.31 in) button](/images/tools/coupon-template-generator/step-preview.webp)

## Print a sheet of coupons

A single coupon on a full page wastes paper when you want a stack to hand out at the counter or drop into orders. The **Print sheet** tab at the top of the maker lays out as many coupons as fit on the page. Your design carries over from the single coupon, so you only pick the print settings.

1. **Open the Print sheet tab and pick a coupon size.** There are three sizes: 3.5 x 2 inches (business card size), 6 x 2.75 inches (an envelope insert), and 7 x 3 inches (a long strip).
2. **Pick your paper.** Choose US Letter (8.5 x 11 inches) or A4 (210 x 297 mm). The badge under the paper buttons shows how many coupons fit on a page.
3. **Set how many coupons you need.** The **1 page**, **2 pages**, and **5 pages** buttons fill the count for you, or type any number up to 500.

![The Print sheet controls with the 3.5 x 2 in size, US Letter paper, an 8 coupons per page badge, and Unique code on each coupon selected with the prefix SAVE and 6 random characters](/images/tools/coupon-template-generator/step-sheet-controls.webp)

At 3.5 x 2 inches, 8 coupons fit on a page in a 2 x 4 grid, on Letter and on A4. The 6 x 2.75 and 7 x 3 inch sizes fit 3 per page. Coupons sit 0.3 inches apart with short crop marks at each corner. The marks start 0.04 inches away from the coupon, so they never touch the design.

4. **Download the sheet PDF and print it at 100% scale.** In the print dialog, choose "Actual size" and turn off "Fit to page". Fit to page can shrink the sheet to the printer's margins, and then every coupon comes out smaller than the size you picked.
5. **Cut along the crop marks.** Line a ruler or a paper trimmer up with the marks at both ends of each edge. Most templates run their color right to the edge, so a straight cut matters more than with a white-bordered design.

![The print sheet preview showing 8 coupons on a US Letter page, each with its own SAVE code and barcode, crop marks at the corners, and the Download sheet PDF, Codes .txt, and Codes .csv buttons](/images/tools/coupon-template-generator/step-sheet-preview.webp)

A few things I noticed while testing the sheet:

- **Fine print gets very small at 3.5 x 2 inches.** The default terms line prints at about 2.5 points, which is hard to read. Keep the terms to a few words, or use the 6 x 2.75 inch size if the terms matter.
- **The barcode is wider on the sheet than in the single coupon.** On a 3.5 x 2 inch coupon the bars span about 1.35 inches, and some templates make the code panel wider to fit them. A QR code prints about 0.5 inches square, inside a 0.6 inch white box, on every sheet size. With the default 10-character codes, the thinnest bars print about 0.22 mm wide, which a handheld scanner reads. Very long codes make the bars too thin, and the maker warns you when that happens.
- **Big runs take a moment.** 500 coupons at 3.5 x 2 inches fill 63 pages, or 167 pages at the larger sizes. A progress bar shows how far along it is.

## Need a list of discount codes?

When every coupon should have its own code, choose **Unique code on each coupon** in the Print sheet tab. There are two ways to fill in the codes:

- **Generate codes**: set a prefix such as SAVE and pick 4 to 16 random characters. The maker leaves out I, O, 0, and 1, because customers mix them up when they type a code. Every code on the sheet is different.
- **Paste a list**: paste the codes you already have, one per line. Blank lines are skipped, and the coupons follow the order of your list.

Each coupon then prints its own code, and its barcode holds that same code. If you use a QR code with a discount link such as `yourstore.com/discount/SUMMER25`, each coupon's QR gets its own code in place of SUMMER25.

The **Codes .txt** and **Codes .csv** buttons download the codes in the same order as the sheet, one per line. A printed code only works at checkout once it exists in your store. The easiest order is to make the codes first in the [Bulk Discount Code Generator](/tools/bulk-discount-code-generator), which also downloads a Shopify import file for them. Then paste the same codes here with **Paste a list**, so the sheet and your store hold the same codes.

## What to put on a coupon

A coupon has to tell the customer three things at a glance: who it is from, what they get, and how to use it. These parts cover all three:

- **Business name and logo**, so customers and your staff know where the coupon is valid.
- **The discount**, such as 25% OFF or \$10 OFF. It is the largest element in every template.
- **A headline**, such as "Summer Sale" or "Welcome Offer", that says why the offer exists.
- **A promo code** that the customer types at checkout or shows at the till.
- **An expiry date**, so the offer ends when you planned and customers have a reason to use it.
- **Redemption terms**, such as one use per customer or no combining with other offers.
- **A QR code or barcode**, if customers redeem in store or you want them to land on a discount link.

## Choosing a coupon template

All 12 templates take the same details, so you can switch between them without typing anything again.

- **Modern**: a clean layout with a solid code panel. It suits almost any shop.
- **Vintage Ticket**: a ticket shape with a perforated tear-off stub for the code.
- **Minimal**: lots of white space, for premium or boutique brands.
- **Bold Sale**: an oversized discount for clearance and flash sales.
- **Gift Coupon**: a ribbon header for gift and thank-you offers.
- **Food & Dining**: a menu-card look for restaurants and cafes.
- **Holiday**: festive bands for seasonal promotions.
- **Black Friday**: a dark design with loud colors for your biggest sale.
- **Diagonal Split**: a two-tone layout split on a diagonal.
- **Gift Voucher**: a coin badge in your accent color, for vouchers you sell or give away.
- **Stamp Seal**: a round seal around the discount.
- **Ribbon Banner**: a ribbon flag in the corner.

After you pick a template, change its colors and font to match your brand.

## Coupon sizes for print, email, and social

The right size depends on where the coupon ends up.

| Where it goes | What to download | Size |
| --- | --- | --- |
| Hand-outs, order inserts, counter stacks | Print sheet PDF | 3.5 x 2 in, 8 per page |
| Envelope inserts and mailers | Print sheet PDF | 6 x 2.75 in, 3 per page |
| Long tear-off strips | Print sheet PDF | 7 x 3 in, 3 per page |
| One printed coupon | Single PDF, coupon strip | 7 x 3.31 in on US Letter |
| Email, website banner | PNG, coupon strip | Landscape |
| Instagram, Pinterest, Facebook | PNG, Square 1:1 | Square |
| A full-page flyer | Single PDF, Full page | 8.5 x 11 in |

The square size prints at 5 x 5 inches when you download it as a single PDF.

## Promo code tips

The code is what connects a printed coupon to a real discount in your store, so it is worth a few seconds of thought.

- **Keep it short and readable.** SAVE25 or WELCOME10 is easy to type from a printed card.
- **Leave out characters that look alike.** O and 0, or I and 1, cause failed codes at checkout. The Generate button and the unique codes on the print sheet both leave them out.
- **Use one code per campaign or channel.** A different code for your in-store flyer and your email shows which one brings in sales.
- **Match the code to the offer.** FREESHIP on a free shipping coupon tells the customer what it does.
- **Create the code in your store before you print.** In Shopify, add it under **Discounts** in your admin with the same spelling as the coupon.

## Add a scannable QR code or barcode

A QR code suits customers with phones. Point it at your store's discount link and the discount applies when they reach checkout. Without a link, the QR holds the promo code itself.

A barcode suits in-store tills. It uses CODE128, a format that standard handheld scanners support, and it holds the promo code. Keep the code short so the bars print thick enough to scan. On the print sheet with unique codes, every barcode holds that coupon's own code.

For a standalone code, use the [free QR Code Generator](/tools/qr-code-generator), or the [free Barcode Generator](/tools/barcode-generator) for product labels.

## Frequently Asked Questions

### Is this coupon maker free?

Yes. It is free with no signup and no watermark. You can download as many coupons as you want as PNG images or PDF files.

### How do I make a coupon?

Fill in your business name, discount, headline, and promo code, pick one of the 12 templates, and download a PNG or a PDF. The preview updates as you type.

### Can I print the coupon?

Yes. The single PDF puts one coupon on a US Letter page at the size shown on the button, so the coupon strip prints at 7 x 3.31 inches. For a stack of coupons, open the Print sheet tab. It lays out 3.5 x 2, 6 x 2.75, or 7 x 3 inch coupons on Letter or A4 pages with crop marks. Print at 100% scale.

### What discount types can I show on the coupon?

Percent off (such as 25% OFF), amount off (such as \$10 OFF), BOGO (buy one, get one), and free shipping. The big number on the coupon changes to match.

### Can I add a scannable QR code or barcode to the coupon?

Yes. Choose QR code or Barcode under Scannable code. The barcode holds your promo code, and the QR code holds either the code or your store's discount link. Both are part of the PNG and PDF files.

### Can each printed coupon have its own code?

Yes. In the Print sheet tab, choose Unique code on each coupon. Generate codes with a prefix and 4 to 16 random characters, or paste your own list. Each coupon prints its own code, and its barcode holds the same code. Download the list as a .txt or .csv file.

### What size should a printable coupon be?

For hand-out coupons, 3.5 x 2 inches (business card size) fits 8 per US Letter or A4 page. The 6 x 2.75 and 7 x 3 inch sizes fit 3 per page and leave more room for the fine print. For email and the web, use the coupon strip PNG. For social posts, use the square PNG.

### Can I use my own colors, fonts, and logo?

Yes. Upload your logo, choose a color theme or set your own accent and text colors, and pick a font. The preview and the downloaded files both show your changes.

### Does the coupon include an expiry date and terms?

You choose. Set an expiry date or turn on No expiry to hide it, and edit the fine print to match your store policy.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     4. The "## Frequently asked questions" answers must match FAQ_ITEMS in page.tsx word for word. -->

---
title: Free Credit Memo Template
description: Create a print-ready credit memo that references the original invoice, lists the credited items, and computes the credit total, then download a PDF. Free, no signup.
---

# Free Credit Memo Template

Fill in a **credit memo template** and download a print-ready PDF in about two minutes. Add your business and customer details, reference the original invoice, list the credited items with quantities and prices, and the tool computes the credit total for you. It is free, runs entirely in your browser, and needs no signup.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## What Is a Credit Memo?

[![Watch how the free Credit Memo Generator works](https://img.youtube.com/vi/oFhzp5xban8/maxresdefault.jpg)](https://youtu.be/oFhzp5xban8)

A credit memo, short for credit memorandum, is a document a seller issues to a buyer that reduces the amount the buyer owes on a previously issued invoice. It is sometimes recorded as a credit toward a future purchase instead. Whichever way it is applied, the effect is the same: the customer owes less than the original invoice asked for.

A credit memo always points back to a specific invoice. That reference matters. Without the original invoice number, neither party can tell which sale the credit adjusts, and the accounting on both sides falls out of balance. This tool has an "Original Invoice #" field that prints in the document header for exactly that reason.

In the seller's books, a credit memo reduces accounts receivable and reverses part of the recorded sale. In the buyer's books, it reduces accounts payable. Nothing physically changes hands when the memo is issued: it is a record of a credit, not a movement of money. Whether that credit is later paid out in cash or netted against the next invoice is a separate decision.

The term comes from US practice and is the wording accounting software such as QuickBooks uses. If you have seen the phrase "credit note" instead, that is the same instrument under a different name, which the next section explains.

## Credit Memo vs Credit Note

"Credit memo" and "credit note" describe the same document. The difference is regional vocabulary, not substance. US businesses and US accounting software (QuickBooks, for example) say credit memo. Businesses in the UK, the EU, and much of the Commonwealth, along with software like Xero, say credit note. Both reduce what a buyer owes on a prior invoice, both reference that invoice, and both post the same way in the ledger.

If you trade across borders you will meet both words. When a UK supplier sends you a "credit note", treat it exactly as you would a US "credit memo". This tool prints the US wording, CREDIT MEMO, on the document, because that is what US merchants and their customers expect to read.

One thing to keep in mind: the EU applies specific VAT rules to credit notes (the amount, the reference to the original invoice, and the VAT correction are all regulated). Those rules are EU-specific. The United States has no single federal credit-memo regulation of that kind, so this article keeps to general accounting practice rather than quoting a tax code.

## Credit Memo vs Debit Memo

A credit memo and a debit memo are opposites. A credit memo reduces the amount a buyer owes. A debit memo increases it.

A seller issues a credit memo when the customer should pay less than the original invoice: goods came back, an item was overcharged, or a discount was agreed after the fact. A debit memo goes the other way. It is issued when the customer owes more than the original invoice showed, for example because an undercharge is being corrected or an extra fee applies.

An easy way to keep them straight: think of the effect on the customer's balance. Credit lowers it, debit raises it. If you need to charge a customer more after an invoice has gone out, you want a debit memo, not this tool.

## When to Issue a Credit Memo

You issue a credit memo whenever a customer's balance on an already-issued invoice needs to come down. The common reasons are:

1. **Returned goods.** The customer sends back items they were invoiced for. The credit memo lists the returned items at their invoiced price and credits that amount.
2. **Damaged or defective goods.** The customer keeps the goods but is credited for the damage, or returns them for full credit.
3. **An overcharge or pricing error.** The invoice billed the wrong price or the wrong quantity. The memo credits the difference.
4. **A post-invoice discount.** You agree a discount, a rebate, or a goodwill allowance after the invoice has already gone out.
5. **Cancelled line items.** Part of an order is cancelled after invoicing but before payment. The memo removes those lines from what is owed.

In every case the credit memo references the original invoice, states the reason, lists the credited items, and shows the credit total. The worked example below follows the returned-goods case.

## How to Fill Out a Credit Memo

This **credit memo template** walks through each block in order. Here is what goes in each one.

**1. Your business.** Enter your company name, email, address, and upload a logo if you have one. This is the seller who is granting the credit. The logo appears in the live preview and in the exported PDF within about a second.

**2. Issued To.** Enter the customer who is receiving the credit. On a credit memo the party field reads "Issued To" rather than "Bill To", because a credit is owed to the customer, not billed to them.

**3. Credit memo number.** Give the memo its own number, for example CM-2026-001. Do not reuse the invoice number. The section on numbering below explains why.

**4. Original invoice number.** Enter the number of the invoice this credit adjusts. This is the single most important reference on the document. It ties the credit to the sale it reverses.

**5. Reason and line items.** State why the credit is being issued (returned, damaged, overcharged, cancelled) and list each credited item with its quantity and unit price. The tool multiplies quantity by unit price for each line and adds them into the credit total. Add or remove lines as needed.

**6. Credit total.** The tool computes this for you. The total row on a credit memo reads "Credit Total", never "Amount Due" or "Balance Due", because the customer is not being asked to pay anything.

**7. Template and color.** Pick any of the built-in templates and set an accent color to match your brand. Then download the credit memo as a print-ready PDF.

## A Worked Example

Say you sent a customer an invoice for \$1,000. They return 3 units that were billed at \$50 each. The credit memo lists those 3 units at \$50, so:

- Line: 3 x \$50 = \$150
- **Credit Total: \$150**

The memo references the original invoice number and states that the \$150 can be applied to a future order or refunded on request. Click "Fill example" in the tool to load this exact credit memo, then edit it to fit your own return.

Notice that the credit total (\$150) is smaller than the original invoice (\$1,000). A credit memo almost never credits the whole invoice. It credits only the part that is being returned, corrected, or discounted. The rest of the invoice still stands.

## Is a Credit Memo a Refund?

No, and this is the point people get wrong most often. A credit memo records a credit. A refund pays money back. They are related but they are not the same event.

When you issue a credit memo, you create a credit balance in the customer's favor. What happens to that balance next is a separate decision. You can apply it against the customer's next invoice, so they pay less on their following order. Or you can refund it, returning the money to their card or account. The credit memo itself does neither: it establishes the credit. The refund, if there is one, is the follow-up.

This is why the tool's seeded note says the credit can be applied to a future order or refunded on request. Both are valid ways to settle a credit memo.

## How to Number a Credit Memo

Give every credit memo its own unique number in its own sequence, separate from your invoice numbers. A common format is a prefix and a running number, for example CM-2026-001, CM-2026-002, and so on. The prefix (CM) makes it obvious at a glance that the document is a credit memo and not an invoice.

Keep three rules in mind. First, never reuse an invoice number for a credit memo, because that makes the two documents impossible to tell apart in your records. Second, keep the numbers sequential and do not skip or repeat, so an auditor can see the full run. Third, always record the original invoice number on the memo as a separate reference. The credit memo number identifies the memo; the invoice number identifies what it credits. You need both.

## Frequently asked questions

### What is the difference between a credit memo and an invoice?

An invoice asks a customer to pay you: it records a sale and shows an amount due. A credit memo does the opposite: it reduces what a customer owes on an invoice you already sent, for example after a return, an overcharge, or a post-sale discount. An invoice increases the customer's balance, a credit memo decreases it. A credit memo always references the original invoice it adjusts, and its total is a credit owed to the customer, so it never shows an "Amount Due" or a due date.

### What is the difference between a credit memo and a credit note?

They are the same document under two names. "Credit memo" is the US term, used by US businesses and software like QuickBooks. "Credit note" is the term used in the UK, the EU, and much of the Commonwealth, and by software like Xero. Both reduce what a buyer owes on a previously issued invoice, both reference that invoice, and both post the same way in the ledger. This tool prints the US wording, CREDIT MEMO, because that is what US merchants and their customers expect.

### Is a credit memo a refund?

No. A credit memo records a credit; a refund pays money back. Issuing a credit memo creates a credit in the customer's favor, but it does not move any money on its own. What happens next is a separate decision: you can apply the credit against the customer's next invoice so they pay less, or you can refund it to their card or account. The credit memo establishes the credit, and the refund, if there is one, is the follow-up step.

### When should I issue a credit memo?

Issue one whenever a customer's balance on an invoice you already sent needs to come down. The common reasons are returned goods, damaged or defective goods, an overcharge or pricing error, a discount or allowance agreed after the invoice went out, and line items cancelled after invoicing. In each case the credit memo references the original invoice, states the reason, lists the credited items, and shows the credit total.

### What is the difference between a credit memo and a debit memo?

They are opposites. A credit memo reduces the amount a buyer owes; a debit memo increases it. A seller issues a credit memo when the customer should pay less than the original invoice (a return, an overcharge, or a post-sale discount). A debit memo is issued when the customer owes more than the original invoice showed, for example to correct an undercharge or add a fee. Credit lowers the customer's balance, debit raises it.

### How do I number a credit memo?

Give every credit memo a unique number in its own sequence, separate from your invoice numbers, using a prefix and a running number such as CM-2026-001. Never reuse an invoice number for a credit memo, keep the numbers sequential without skips or repeats, and always record the original invoice number on the memo as a separate reference. The credit memo number identifies the memo; the invoice number identifies what it credits.

### Is this credit memo generator free?

Yes. It is completely free, needs no signup, and creates unlimited credit memos. Everything runs in your browser, so your business, customer, and product data never leaves your computer. The exported PDF carries no watermark and no branding.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Customer Acquisition Cost Calculator

Find out what it really costs to win a new customer. This free **customer acquisition cost calculator** takes your total sales and marketing spend and the new customers it brought in, then shows your CAC live. Add your average lifetime value and it grades your LTV:CAC ratio with a plain-English verdict. Switch to By channel mode and it splits blended CAC from paid CAC and ranks every channel cheapest to priciest. It is built for Shopify sellers and ecommerce merchants who want a real number, not a spreadsheet download. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## What Is Customer Acquisition Cost?

[![Watch how the free Customer Acquisition Cost Calculator works](https://img.youtube.com/vi/BneFjawLvgk/maxresdefault.jpg)](https://youtu.be/BneFjawLvgk)

**Customer acquisition cost** (CAC) is the average amount you spend on sales and marketing to win one new customer. It is one of the few metrics that decides whether growth makes you money or drains it. If you know your CAC, you know how much you can afford to pay for a customer, which channels are efficient, and whether it is safe to pour more money into ads.

CAC is a management metric, not an accounting figure. There is no GAAP or IFRS rule that defines it, so the only thing that matters is that you measure it the same way every period. The standard definition comes from marketing measurement work such as Farris, Bendle, Pfeifer, and Reibstein in *Marketing Metrics*, and it is the same version HubSpot and Shopify use in their own CAC explainers.

## The Customer Acquisition Cost Formula

The **customer acquisition cost formula** is simple:

$$
\text{CAC} = \frac{\text{total sales and marketing spend}}{\text{new customers acquired}}
$$

Two inputs, one number. The care is all in what you count.

- **Total sales and marketing spend** is every dollar you spent to win customers over the period: ad spend, marketing software and tools, the salaries of the people doing marketing and sales, and any agency, creative, or freelancer costs.
- **New customers acquired** is the count of net-new, first-time customers over that same period. Do not count repeat orders from existing customers, and make sure the spend window and the customer window line up.

**Worked example.** Say you spent \$5,000 on sales and marketing last month and won 100 new customers:

$$
\text{CAC} = \frac{\$5{,}000}{100} = \$50
$$

So it costs you \$50 to acquire a customer. On its own that number means nothing. \$50 is cheap if a customer is worth \$400 to you and ruinous if a customer is worth \$40. That is why CAC is only half the picture, and why this tool pairs it with lifetime value.

## What Is a Good LTV:CAC Ratio?

The single number a store owner should act on is the ratio of customer lifetime value (LTV, also called CLV) to customer acquisition cost. LTV is the total gross profit an average customer leaves with you over their whole life as a buyer. The ratio tells you how many dollars of value you get back for every dollar of acquisition spend.

- **LTV:CAC of 3:1 or higher (green)** is the classic sign of a healthy, scalable model. Each customer is worth at least three times what you pay to get them, leaving room for overhead and profit.
- **1:1 to 3:1 (amber)** is thin. You are profitable on acquisition but leaving money on the table. Raise LTV or cut CAC to reach 3:1.
- **Below 1:1 (red)** means you spend more to acquire a customer than they are worth. Fix this before you scale ad spend.

The 3:1 rule of thumb is widely attributed to David Skok in *SaaS Metrics 2.0*. Treat it as a rule of thumb, not a law. A store with high margins and fast payback can run a leaner ratio, while a low-margin store may need more headroom.

**Worked example.** If your CAC is \$50 and your average customer is worth \$200 in lifetime gross profit, the ratio is 200 / 50 = **4.0 : 1**, comfortably healthy, and net LTV after CAC is \$200 - \$50 = **\$150**. Enter both numbers in Simple mode and the tool shows the ratio, the verdict badge, and the net value in one view. If you do not know your LTV yet, our [customer lifetime value calculator](/tools/customer-lifetime-value-calculator) works it out from your average order value, purchase frequency, lifespan, and margin.

## What Is the CAC Payback Period?

The LTV:CAC ratio tells you if acquisition pays off eventually. The **CAC payback period** tells you how fast. It is the number of months of gross profit from a customer it takes to earn back what you spent to acquire them:

$$
\text{CAC payback} = \frac{\text{CAC}}{\text{monthly gross profit per customer}}
$$

**Worked example.** With a \$50 CAC and \$15 of gross profit per customer per month, payback is 50 / 15 = about 3.3 months. Recovering CAC within about 12 months is commonly considered healthy, again a benchmark from growth-metrics writing by David Skok rather than a hard rule. The faster you recover CAC, the less cash you tie up funding growth, which matters most for stores that are not sitting on a big cash cushion.

## Blended CAC vs Paid CAC

Here is the distinction most CAC calculators blur, and the reason two stores can report the same CAC while one is thriving and one is quietly bleeding.

**Blended CAC** divides all of your spend by all of your new customers, including the ones who found you for free through SEO, email, word of mouth, or referrals. It is the flattering number because free organic customers pull the average down.

**Paid CAC** divides only your paid spend by only the customers who came from paid channels. It is the true marginal cost of buying a customer, which is the number that actually matters when you decide whether to increase your ad budget.

**Worked example.** Suppose you run three channels in a month:

- Google Ads: \$2,000 spend, 40 new customers, so channel CAC is \$50.
- Meta Ads: \$1,000 spend, 10 new customers, so channel CAC is \$100.
- Organic and SEO: \$0 spend, 50 new customers, so channel CAC is \$0.

Your **blended CAC** is total spend over total customers: (2,000 + 1,000 + 0) / (40 + 10 + 50) = 3,000 / 100 = **\$30**. Your **paid CAC** is paid spend over paid customers only: (2,000 + 1,000) / (40 + 10) = 3,000 / 50 = **\$60**.

The blended \$30 looks great, but every extra customer you buy costs \$60, not \$30. If you plan an ad budget off the blended number you will overestimate how far it stretches. By channel mode in this tool shows both side by side and highlights the cheapest and priciest channels so you can shift budget toward what works.

## How to Lower Customer Acquisition Cost

CAC is a fraction, so you lower it by spending less per customer or winning more customers from the same spend. The levers that work best for ecommerce:

- **Lift conversion rate.** The same traffic that already costs you money turns into more customers. A store that doubles its conversion rate halves the paid CAC with no extra ad spend.
- **Grow cheaper organic channels.** SEO, email, content, and referral programs win customers at a fraction of paid CAC. The more of your mix that comes from organic, the lower your blended CAC.
- **Tighten targeting and creative.** Cutting wasted ad impressions and improving your best-performing creative lowers cost per click and cost per customer on the paid side.
- **Raise average order value.** Bundles, volume discounts, free-shipping thresholds, and post-purchase upsells make each customer worth more, which improves the LTV:CAC ratio even if CAC itself does not move.

Every one of these feeds back into the ratio and the payback period, so a small win in two or three of them compounds quickly.

## How to Use This Calculator

**Simple mode** is the fastest path to a number. Enter your total sales and marketing spend and your new customers to get CAC. Add your average customer LTV to unlock the LTV:CAC ratio and the health verdict, and add your monthly gross profit per customer to unlock the payback period. Every field recomputes live as you type.

**By channel mode** is for when you want to see where acquisition is efficient. Add a row per channel with its spend, its new customers, and whether it is paid or organic. The tool shows a per-channel CAC on every row, a blended CAC and a paid CAC side by side, a ranked table from cheapest to priciest, and a bar chart so the most efficient channel is obvious at a glance. Add your average LTV once and it grades the ratio against your blended CAC.

Everything runs in your browser. Nothing is uploaded, there is no signup, and there are no limits on how many times you calculate.

## Frequently Asked Questions

### What is customer acquisition cost (CAC)?

Customer acquisition cost is the average amount you spend on sales and marketing to win one new customer. It is total sales and marketing spend divided by the number of new customers that spend brought in over the same period.

### What is the customer acquisition cost formula?

CAC = total sales and marketing spend / number of new customers acquired. Example: \$5,000 of spend that won 100 new customers is a CAC of \$50. Sales and marketing spend includes ad spend, tools, salaries, and agency or creative costs over the same period.

### What is a good LTV:CAC ratio?

A ratio of 3:1 or higher is the common rule of thumb for a healthy, scalable store: each customer is worth at least three times what you pay to acquire them. Between 1:1 and 3:1 is thin, and below 1:1 means you lose money on acquisition.

### What is the difference between blended CAC and paid CAC?

Blended CAC divides all spend by all new customers, including free organic ones, so it looks lower and can flatter your numbers. Paid CAC divides paid spend by customers from paid channels only, which is the true marginal cost of buying a customer.

### What is the CAC payback period?

CAC payback period is how many months of gross profit from a customer it takes to earn back what you spent to acquire them: CAC / monthly gross profit per customer. Recovering CAC within about 12 months is commonly considered healthy.

### How do I lower customer acquisition cost?

Improve conversion rate so the same traffic buys more, lean on cheaper organic channels like SEO, email, and referrals, tighten ad targeting and creative, and raise average order value so each customer is worth more against the same spend.

### Is this customer acquisition cost calculator free?

Yes, it is 100% free, runs entirely in your browser, needs no signup, and has no limits on calculations.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Customer Lifetime Value Calculator

Find out what an average customer is really worth to your store. This free **customer lifetime value calculator** takes your average order value, purchase frequency, customer lifespan, and gross margin, then shows your customer lifetime value live. Add your acquisition cost and it grades your CLV:CAC ratio with a plain-English verdict. It is built for Shopify sellers and ecommerce merchants who want a real number, not a spreadsheet download. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## What Is Customer Lifetime Value?

[![Watch how the free Customer Lifetime Value Calculator works](https://img.youtube.com/vi/1TWk5LRKNXs/maxresdefault.jpg)](https://youtu.be/1TWk5LRKNXs)

**Customer lifetime value** (CLV, also written LTV or **lifetime value**) is the total gross profit you expect to earn from an average customer across the whole time they keep buying from you. It answers one question that drives almost every growth decision: how much is a customer worth?

Once you know that number, you know how much you can afford to spend to win a customer, how hard to work to keep them, and whether your ad budget is building profit or burning it. A store with a high **lifetime value of a customer** can outbid rivals on ads, offer better service, and still stay profitable.

CLV is a margin metric, not a revenue metric. A customer who spends \$1,000 with you but only leaves \$400 in gross profit has a lifetime value of \$400, not \$1,000. That is why every serious **customer lifetime value formula** multiplies by gross margin.

## The Customer Lifetime Value Formula

There are two standard ways to run a **CLV calculation**, and this tool ships both. The one you pick depends on the data you have.

### Method 1: Historic (Simple) CLV

This is the ecommerce standard and the formula most Shopify and HubSpot guides use. It multiplies four numbers you can pull straight from your analytics:

$$
\text{CLV} = \text{AOV} \times \text{Frequency} \times \text{Lifespan} \times \text{Margin}
$$

Where:

- **AOV** is your average order value (revenue divided by number of orders).
- **Purchase frequency** is how many times an average customer buys per year.
- **Customer lifespan** is how many years an average customer keeps buying before they churn.
- **Gross margin** is the percent of each sale left after product cost (COGS).

**Worked example.** Say your average order value is \$50, an average customer buys 4 times a year, stays for 5 years, and your gross margin is 40%:

- Annual customer value = \$50 x 4 = **\$200 per year**
- Lifetime revenue = \$200 x 5 = **\$1,000**
- **CLV = \$1,000 x 40% = \$400**

So each customer is worth \$400 in gross profit over their life with your store. If you leave gross margin blank, the tool shows the revenue-based figure (\$1,000) and clearly labels it "before margin" so you never mistake revenue for profit.

### Method 2: Predictive CLV With Retention and Discount Rate

The historic formula assumes a fixed lifespan. The predictive model is more realistic: customers churn a little each year, and a dollar of margin earned five years from now is worth less than a dollar today. It uses a retention rate and a discount rate instead of a fixed lifespan.

First, work out the annual gross margin per customer:

$$
m = \text{AOV} \times \text{Frequency} \times \text{Margin}
$$

Then apply the standard simplified CLV formula:

$$
\text{CLV} = m \times \frac{r}{1 + d - r}
$$

where $r$ is the retention rate and $d$ is the discount rate, both expressed as decimals.

This formula comes from Gupta and Lehmann, *Managing Customers as Investments* (2005), and also appears in Farris et al., *Marketing Metrics*. The bracket is the closed form of a geometric series that adds up every future year of margin, shrinking each year by both churn and the discount rate. It only has a finite answer when retention is below 100%, which is why the tool asks for a retention rate under 100%.

**Worked example.** Same store: AOV \$50, frequency 4, gross margin 40%, retention 90%, discount rate 10%:

- Annual gross margin m = \$50 x 4 x 40% = **\$80 per year**
- CLV = \$80 x (0.90 / (1 + 0.10 - 0.90)) = \$80 x (0.9 / 0.2) = \$80 x 4.5 = **\$360**
- Implied average lifespan = 1 / (1 - 0.90) = **10 years**

The predictive number (\$360) is a little lower than a naive 10-year historic figure because it discounts future margin back to today's value. That is the point of the model.

## CLV vs LTV: Are They the Same?

Yes. **CLV** (customer lifetime value) and **LTV** (lifetime value) are the same metric, and the terms are used interchangeably across ecommerce and SaaS. Some teams reserve LTV for a single customer and CLV for a segment average, but the **LTV formula** and the CLV formula are identical: value per period, projected across the customer's life, measured on margin. If you searched for an **ltv calculation** or an **ltv formula**, everything on this page applies.

## What Is a Good CLV:CAC Ratio?

The single number a store owner should act on is the ratio of customer lifetime value to customer acquisition cost (**CAC**). CAC is your total sales and marketing spend divided by the new customers it won.

- **CLV:CAC of 3:1 or higher (green)** is the classic sign of a healthy, scalable model. Each customer is worth at least three times what you pay to get them, leaving room for overhead and profit.
- **1:1 to 3:1 (amber)** is thin. You are profitable on acquisition but leaving money on the table. Lift CLV or cut CAC to reach 3:1.
- **Below 1:1 (red)** means you spend more to acquire a customer than they are worth. Fix this before you scale ad spend.

In the historic worked example, CLV is \$400 and CAC is \$60, so the ratio is 400 / 60 = **6.7:1**, comfortably healthy, and net CLV after CAC is \$400 - \$60 = **\$340**. The tool also shows CAC payback: with \$80 of annual gross margin, a \$60 CAC is earned back in about 9 months.

## How to Increase Customer Lifetime Value

Every lever below multiplies straight into the CLV formula, so small gains compound:

- **Raise average order value.** Bundles, volume discounts, free-shipping thresholds, and post-purchase upsells all lift AOV.
- **Increase purchase frequency.** Win-back email flows, subscriptions, loyalty points, and replenishment reminders get customers buying more often.
- **Improve gross margin.** Negotiate supplier costs, cut discounting, and shift the mix toward higher-margin products.
- **Extend customer lifespan and retention.** Great post-purchase experience, reliable delivery, and helpful support keep customers from churning, and retention is the biggest driver in the predictive model.

## Frequently Asked Questions

### What is customer lifetime value (CLV)?

Customer lifetime value is the total gross profit you expect to earn from an average customer across the whole time they buy from you. It tells you how much you can afford to spend to acquire and keep a customer.

### What is the customer lifetime value formula?

The historic ecommerce formula is CLV = average order value x purchase frequency per year x customer lifespan in years x gross margin. Example: \$50 x 4 x 5 x 40% = \$400.

### What is the difference between historic and predictive CLV?

Historic CLV multiplies AOV, purchase frequency, lifespan, and margin from your past data. Predictive CLV uses a retention rate and a discount rate to project future value in today's money: CLV = annual gross margin x retention / (1 + discount - retention).

### What is a good CLV:CAC ratio?

A ratio of 3:1 or higher is the common rule of thumb for a healthy store. Between 1:1 and 3:1 is thin, and below 1:1 means you lose money on acquisition.

### How do I increase customer lifetime value?

Raise average order value with bundles and upsells, increase purchase frequency with email and subscriptions, lift gross margin, and improve retention so customers stay longer.

### Is CLV the same as LTV?

Yes. CLV and LTV (lifetime value) are the same metric and the terms are used interchangeably. The formula is identical.

### Is this customer lifetime value calculator free?

Yes, it is 100% free, runs entirely in your browser, needs no signup, and has no limits on calculations.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Delivery Note Generator

Produce a clean **delivery note** to send with your goods in about a minute. Our free **delivery note generator** lets you add your business details, the deliver-to address, and the items in the delivery, then download a PDF with space for a signature on receipt. It is built for ecommerce sellers and trade suppliers who want a simple record that goods were handed over. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Make a Delivery Note

[![Watch How It Works](https://img.youtube.com/vi/cHiwKBGtVt4/maxresdefault.jpg)](https://youtu.be/cHiwKBGtVt4)

This **delivery note template** is built around handing over goods. Fill it in like this:

1. **Add your details**: Enter your business name, logo, and address. This is who is sending the delivery.
2. **Add the deliver-to address**: Enter the recipient and where the goods are going. On a delivery note this field is labelled Deliver To.
3. **Add a reference and date**: Use a delivery number and the date the goods are sent, so the note can be matched to the order.
4. **List the items delivered**: Add one line per product with a description and the quantity. Prices are left off a delivery note, so you record only what is being handed over.
5. **Download and print**: Click Download PDF and print two copies. One stays with the receiver, and one is signed and returned to you as proof of delivery.

## What Is a Delivery Note?

A delivery note is a document that goes with a shipment and lists the goods being delivered. The key feature is that the person receiving the goods signs it. That signature turns the note into a record of proof of delivery, confirming that the items listed actually arrived and were accepted.

A delivery note is a familiar document in trade and wholesale, and the term is especially common in the UK and across Europe. The driver or courier hands over the goods, the receiver checks the items against the note, and then signs. Both sides keep a copy, so if a question comes up later about whether a delivery happened, there is a signed answer.

## Delivery Note vs Invoice

A delivery note and an invoice are easy to tell apart once you know what each is for.

- A **delivery note** confirms that goods were delivered. It lists items and quantities, shows no prices, and is signed when the goods arrive.
- An **invoice** asks for payment. It shows unit prices, tax, and a total due, and it is sent to whoever settles the bill.

The two are linked, because you usually deliver the goods first and invoice for them afterwards. The signed delivery note is your evidence that the goods went out, which supports the invoice you then send. If you need that priced document, our [invoice generator](/tools/invoice-generator) uses the same engine as this tool.

## Delivery Note vs Packing Slip

A delivery note and a [packing slip](/tools/packing-slip-generator) look similar, since both list contents and show no prices. The difference is emphasis.

- A **packing slip** is mainly a contents check. It is dropped inside a retail parcel so the customer can confirm their items.
- A **delivery note** is mainly a proof-of-delivery record. It is built to be signed on receipt, which is why it suits courier and trade handovers.

For many small parcels, a single document does both jobs. The distinction matters most when a signature on delivery is something you want to keep.

## What to Include on a Delivery Note

A clear delivery note covers a few essentials:

- **Your business** name, logo, and address as the sender.
- **The deliver-to** name and address.
- **A delivery number** and date for tracking.
- **A line for each item**: description and quantity delivered.
- **A space to record receipt**: the receiver's name, the date, and a signature line.
- **Notes**, such as where the goods were left or any items missing or damaged on arrival.

## Tips for Better Delivery Notes

- **Always keep the signed copy.** The value of a delivery note is the signature. File it so you can find it if a delivery is ever questioned.
- **Note any shortfalls at handover.** If a box is missing or an item is damaged, write it on the note before signing. That record is far stronger than a memory later.
- **Match the note to the order.** Use the same item names and reference numbers as your [purchase order](/tools/purchase-order-generator) and invoice, so everything reconciles.
- **Send it with the goods.** A delivery note only works if it travels with the shipment, ready to be checked and signed on arrival.
- **Use one for collections too.** A signed note works just as well when the customer collects in person. On Shopify, local pickup is a free per-location setting you can switch on and off whenever you offer it: [how to add local pickup on Shopify and turn it off](/blog/shopify-local-pickup-on-off).

## Frequently Asked Questions

### What is a delivery note?

A delivery note is a document sent with a shipment that lists the goods being delivered. The person who receives the goods signs it to confirm what arrived, which makes it a record of proof of delivery.

### What is the difference between a delivery note and an invoice?

A delivery note confirms that goods were delivered and is signed on receipt. An invoice requests payment and shows prices and totals. The delivery note travels with the goods; the invoice is sent to be paid.

### Does a delivery note show prices?

Usually not. A delivery note focuses on the items and quantities delivered and leaves prices off. This tool hides prices for the delivery note document type and includes space to record receipt.

### Who signs the delivery note?

The person receiving the goods signs the delivery note to confirm the delivery. One signed copy stays with the receiver and one is returned to or kept by the sender as proof of delivery.

### Is this delivery note generator free?

Yes, it is 100% free, needs no signup, and lets you create unlimited delivery notes.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Depop Fee Calculator
description: Work out what you keep on a Depop sale under the 2024 US structure - no seller selling fee, just Depop Payments processing - add cost for profit, or reverse-solve the price.
---

# Free Depop Fee Calculator

Know what you actually keep before you list. Our free **Depop fee calculator** uses Depop's 2024 US structure: there is no seller selling fee, so you pay only Depop Payments processing of 3.3% + \$0.45. Enter your price and it shows the fee and your exact net payout. Add your item cost and it also shows profit and margin. The same engine covers Poshmark, Mercari, Etsy, and more, so you can compare marketplaces in seconds. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Depop Fee Calculator

[![Watch how the free Depop Fee Calculator works](https://img.youtube.com/vi/gbN1mcMZb04/maxresdefault.jpg)](https://youtu.be/gbN1mcMZb04)

This quick walkthrough shows the calculator in action. For Depop, it applies the 3.3% + \$0.45 payment fee with no seller fee and shows your exact payout, or reverse-solves the list price for a target take-home.

The tool has two modes:

1. **Price to payout**: Enter your item price and, if you charge it, shipping. The calculator shows the processing fee and your net payout. Add your item cost to see profit and margin too.
2. **Net to price**: Enter the payout you want to keep, and the calculator solves for the listing price that leaves you exactly that after fees.

The tool opens on Depop, and the platform dropdown lets you compare the same item against Poshmark, Mercari, or Etsy. Depop's help center is linked with the date we checked it.

## How Depop Fees Work in the US

In 2024 Depop changed how it charges US sellers. The old 10% seller selling fee is gone. Now the only seller cost is **Depop Payments processing of 3.3% + \$0.45** per transaction. That single change made Depop noticeably cheaper for sellers than it used to be.

There is a separate **marketplace fee** that buyers pay at checkout. It is charged to the buyer, not to you, so it does not reduce your payout. This calculator models the seller side, which is the processing fee.

## A Worked Example

Sell a **\$25** item:

- Depop Payments processing: 3.3% of \$25 + \$0.45 = **\$1.28**
- Net payout: **\$23.72** (before your own item cost)

If you charge shipping that the buyer pays, processing applies to the total collected. Add your item cost in the tool and it also shows profit and margin, so you see the real money left after what the item cost you to make or buy.

## Did Depop Really Drop the Selling Fee?

Yes. For US sellers, the 10% selling fee was removed in 2024, leaving only the 3.3% + \$0.45 processing fee. The buyer-side marketplace fee was introduced around the same time, which is a separate charge on the buyer. It is easy to read about "new Depop fees" and assume sellers pay more, but for the seller the net effect of the change was lower fees. Always confirm the current structure on Depop's help center, since marketplace fees move often.

## Fees the Calculator Does Not Include

The tool models the seller's Depop Payments processing fee, which is the core seller cost. It does not add optional boosts or promotions, refunds, or the buyer-paid marketplace fee, since that last one does not come out of your payout. If you use paid promotion, add its cost separately.

## Using the Reverse Mode

Switch to the **Net to price** tab, type the payout you want to keep, and the calculator solves for the listing price that leaves you exactly that after Depop's processing fee. It is the quickest way to price an item so you walk away with a specific amount, without trial and error.

## Depop vs Poshmark vs Mercari

The three resale apps price sellers very differently, which is why comparing them matters. Depop now charges only processing. Poshmark takes a flat \$2.95 under \$15 or 20% above it. Mercari charges a flat 10% selling fee. Switch the platform dropdown to run the same item through each, and the calculator shows which one leaves you the most. For many mid-priced items, Depop's processing-only structure is the cheapest of the three.

## Frequently Asked Questions

The FAQ section on this page answers the common questions in full and is marked up as structured data. In short: under Depop's 2024 US structure sellers pay no selling fee and only 3.3% + \$0.45 processing, the buyer-paid marketplace fee does not reduce your payout, and the reverse mode solves the price you need to net a target. Always confirm the live figure on Depop's help center before you rely on it.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (-). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Donation Receipt Template Generator
description: Create an IRS-compliant donation receipt free. Cash, in-kind, year-end, quid pro quo, and church tithe types with your EIN and logo. Download a print-ready PDF, PNG, or CSV. No signup, no watermark.
---

# Free Donation Receipt Template Generator

Create an IRS-compliant **donation receipt template** for your nonprofit, church, or charity in minutes. Pick the donation type, add your organization name, EIN, and logo, enter the gift, and download a print-ready PDF, PNG, or CSV. The tool fills in the correct required tax statement for each type of gift, so your donors get a receipt that actually holds up. It is 100% free, runs entirely in your browser, and there is no signup and no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, video, etc.). -->

## What a donation receipt is

[![Watch How It Works](https://img.youtube.com/vi/NI3l9dTrKvI/maxresdefault.jpg)](https://youtu.be/NI3l9dTrKvI)

A donation receipt is a written acknowledgment that a 501(c)(3) organization gives a donor to confirm a charitable contribution. Donors need it to claim a tax deduction. The IRS calls it a contemporaneous written acknowledgment, and it sets out the rules in **Publication 1771, Charitable Contributions - Substantiation and Disclosure Requirements**. This generator follows that publication so your **charitable donation receipt template** includes the elements the IRS looks for.

A good receipt does two jobs. It thanks the donor, and it gives them the paperwork they need at tax time. A receipt that leaves out a required element can cost the donor their deduction, so getting the details right matters.

## When the IRS requires a written receipt

A donor must have a written acknowledgment from your organization to deduct any single contribution of **\$250 or more**. The rule is per gift, not per year, so a donor who gives \$250 once needs a receipt for that gift. The acknowledgment also has to be contemporaneous. That means the donor must get it by the earlier of two dates: the day they file their tax return for the year, or the due date of that return including extensions.

Many nonprofits issue a receipt for every gift, large or small. It is good donor relations and it saves you from fielding requests later. This **501c3 donation receipt** tool lets you produce one for any amount.

## What a valid donation receipt must include

Publication 1771 lists the pieces a written acknowledgment needs:

- The **name of the organization**.
- The **amount of cash** the donor contributed.
- A **description of any non-cash contribution**, but not a dollar value for it.
- A statement that **no goods or services were provided** in exchange for the gift, if that is the case.
- If goods or services were provided, a **description and a good-faith estimate of their value**.
- For a religious organization, a statement that any goods or services provided were **intangible religious benefits**.

This tool adds your EIN and a tax-exempt status line to the letterhead as well. None of those are required by Publication 1771, but donors and auditors expect to see them on a professional **tax deductible donation receipt**.

## The five donation types

The donation type is the most important choice on the form. It reshapes the fields and swaps in the correct required statement.

### Cash

Use this for a straightforward monetary gift by cash, check, card, or transfer. Enter the amount and the payment method. The receipt shows the amount, for example \$500.00 paid by Check #1234, and the statement that no goods or services were provided. Because nothing was given in return, the full amount qualifies as a charitable contribution (the donor's actual deduction still depends on the usual limits on their tax return).

### In-kind (non-cash)

Use this for donated goods or property, like a **in kind donation receipt** for canned food or clothing. You describe the property, for example 12 boxes of canned food and 3 winter coats. The receipt shows the description and **no dollar amount at all**. This is the single most common mistake in do-it-yourself receipts. The IRS makes valuing donated property the donor's job, not the charity's, so your receipt must not state a value for it.

### Year-end statement

Use this to build an annual giving statement that lists every gift a donor made during the year. Add a row for each gift with its date and amount, or paste them in or import a CSV. The tool sums the total for you. Three gifts of \$50, \$50, and \$100 add up to a total of \$200.00. You can export the gift list back out as a CSV for your records.

### Quid pro quo

Use this when the donor received something in return, such as a **church donation receipt** for a fundraising dinner or an event ticket. When the payment is more than \$75, the IRS requires you to tell the donor that only part of their payment is deductible, and to give a good-faith estimate of the value they received. The tool computes it for you. If a donor pays \$100 and receives a dinner worth \$40, the deductible portion is \$60. The receipt never shows a deductible larger than the contribution, and if the value received is more than the payment, the deductible is \$0, not a negative number.

### Faith / tithe

Use this for a church tithe or offering. It uses giving-focused wording and adds the required line that the only thing provided in return was intangible religious benefits. That phrase matters: it is the specific language Publication 1771 calls for when a religious organization gives nothing of commercial value in return for a gift.

## How to make a donation receipt

1. Enter your organization name, address, EIN, and tax-exempt status line. This saves on your device so you only type it once.
2. Add the donor name, an optional donor address, a receipt number, and the contribution date.
3. Pick the donation type. The fields and the required statement change to match.
4. Enter the gift details for that type.
5. Review the required tax statement. It is pre-filled correctly, and you can edit it if your situation differs.
6. Add an authorized signature name and title.
7. Pick one of the 10 templates, set an accent color and font, then download a PDF, PNG, or CSV.

The preview updates as you type, so you always see exactly what the donor will receive.

## Worked examples you can check

- **Cash:** a \$500 gift with no goods or services shows \$500.00, the no-goods-or-services statement, and your name and EIN. The full amount qualifies as a charitable contribution.
- **Quid pro quo:** \$100 paid for a dinner worth \$40 shows a \$100 contribution, a \$40 fair market value, and a \$60 deductible portion, plus the required disclosure sentence.
- **In-kind:** a gift of 12 boxes of canned food shows the description only, with no dollar amount, and the no-goods-or-services statement.
- **Year-end:** gifts of \$50 in March, \$50 in June, and \$100 in November list as three rows and total \$200.00.

## Print-ready PDF, PNG, and CSV

Download your receipt as a PDF sized for US Letter paper, so it prints at 100% with no scaling. You can also download a PNG that matches the preview, or a CSV of the year-end gift list for your bookkeeping. There is no watermark on any file. Everything runs client-side, so your donor data and EIN never leave your browser.

## A note on tax advice

This tool helps you produce a receipt in the format described in IRS Publication 1771. It is not legal or tax advice. Confirm your organization's tax-exempt status, and point donors to a qualified tax professional or to the IRS for questions about their own returns. When in doubt, read Publication 1771 directly at irs.gov.

## Frequently Asked Questions

### What is a donation receipt?

A donation receipt, also called a written contribution acknowledgment, is the document a 501(c)(3) nonprofit or church sends a donor so the donor can substantiate a charitable-contribution deduction. It names the organization, states the amount of a cash gift or describes a non-cash gift, and states whether the donor received any goods or services in return. The IRS explains the requirements in Publication 1771.

### When does the IRS require a written donation receipt?

Under IRS rules, a donor must have a written acknowledgment from the organization to claim a deduction for any single contribution of 250 dollars or more. The acknowledgment must be contemporaneous, meaning the donor must obtain it by the earlier of the date they file their tax return or the due date (including extensions) for that return. Many nonprofits issue a receipt for every gift regardless of size as good practice.

### What must a valid donation receipt include?

Per IRS Publication 1771, a valid acknowledgment includes the organization's name, the amount of any cash contribution, and a description (but not the value) of any non-cash contribution. It must also state whether the organization provided any goods or services in exchange for the gift. If none were provided it says so; if some were provided it must describe them and give a good-faith estimate of their value. This tool fills in the correct statement automatically for each donation type.

### Why does an in-kind donation receipt not show a dollar value?

For non-cash (in-kind) gifts, the organization describes the donated property but does not assign it a dollar value. The IRS makes valuing donated property the donor's responsibility, not the charity's. So this tool's In-Kind receipt shows a description such as 12 boxes of canned food and no currency amount anywhere. The donor determines fair market value and reports it on their own return.

### How is a quid pro quo donation handled?

A quid pro quo contribution is one where the donor receives goods or services in return, such as a gala dinner or event ticket. When the payment exceeds 75 dollars, the receipt must tell the donor that the deductible amount is limited to the excess of what they paid over the value of what they received, and give a good-faith estimate of that value. This tool computes deductible = contribution minus fair market value and never shows a deductible larger than the contribution. For example, a 100 dollar payment for a 40 dollar dinner leaves a 60 dollar deductible.

### Can I use this for a church tithe or a year-end giving statement?

Yes. The Faith / Tithe type uses church offering wording and adds the required statement that only intangible religious benefits were provided in return. The Year-End Statement type builds an itemized annual summary of every gift a donor made during the tax year, with a summed total, and lets you import the gift list from a CSV or spreadsheet and export it back. Both produce a print-ready PDF.

### Is this donation receipt template really free with no watermark?

Yes. It is 100% free with no signup and no watermark on any export. You can create and download as many receipts as you like as a print-ready PDF, a PNG, or a CSV of the year-end gift list. Your organization profile and EIN save on your device only, and the whole tool runs in your browser, so no donor data ever leaves your computer.

### Is this tax advice?

No. This tool helps you produce a receipt that follows the format described in IRS Publication 1771, but it is not legal or tax advice. Rules change and situations differ, so confirm your organization's tax-exempt status and consult a qualified tax professional or the IRS directly for guidance specific to your nonprofit or your donors.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Dropshipping Profit Calculator
description: Work out your real dropshipping profit and margin per order. Enter product cost, markup, ad spend per sale, and shipping to see your selling price, gross margin, and net profit.
---

# Free Dropshipping Profit Calculator

Dropshipping looks simple on the surface: a supplier ships the product, you keep the difference. The problem is that the difference is thinner than most new sellers expect. Ad spend, supplier shipping, and payment fees quietly eat the gap between the price you charge and the money you keep. This free **dropshipping profit calculator** does that math for you. Enter your product cost, your markup, what you pay to win a customer, and your shipping cost, and it shows your selling price, gross margin, and true net profit per order. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Dropshipping Profit Calculator

[![Watch how the free Dropshipping Profit Calculator works](https://img.youtube.com/vi/wku1g4m3C3Y/maxresdefault.jpg)](https://youtu.be/wku1g4m3C3Y)

The calculator has four inputs. Each one maps to a real cost in a dropshipping order, so fill them in the way your store actually works.

- **Cost of item**: what your supplier charges you for the product. On AliExpress, CJdropshipping, Zendrop, or a private agent, this is the wholesale unit price you pay when an order comes in.
- **Markup %**: how much you add on top of the product cost to set your selling price. A 100% markup doubles the cost; a 150% markup means your price is 2.5x the cost. The calculator turns your markup into the selling price and the gross margin automatically.
- **Customer acquisition cost (CAC)**: what you spend on ads to get one sale. If you spend \$300 on Facebook or TikTok ads and get 10 orders, your CAC is \$30 per order. This is the number that makes or breaks a dropshipping store, so be honest about it. Not sure what yours is? Work it out by channel with our free [customer acquisition cost calculator](/tools/customer-acquisition-cost-calculator).
- **Shipping cost**: what you pay the supplier to ship, if you do not fully pass it to the customer. Enter \$0 if the buyer covers shipping in full.

Press calculate and you get your selling price, gross profit, gross margin, and net profit after ads and shipping. If the net profit is red or close to zero, your markup is too low for the ad cost you are paying.

## The Dropshipping Profit Formula

Want to check the numbers by hand? The calculator runs four formulas in order.

First, your selling price comes from the product cost and your markup:

$$
\text{Selling Price} = \text{Product Cost} \times \left(1 + \frac{\text{Markup \%}}{100}\right)
$$

Gross profit is the selling price minus what the product cost you:

$$
\text{Gross Profit} = \text{Selling Price} - \text{Product Cost}
$$

Gross margin turns that into a percentage of the selling price:

$$
\text{Gross Margin \%} = \frac{\text{Gross Profit}}{\text{Selling Price}} \times 100
$$

Net profit is the number that decides whether the product is worth running. It takes your ad spend and shipping out of the gross profit:

$$
\text{Net Profit} = \text{Selling Price} - \left(\text{Product Cost} + \text{CAC} + \text{Shipping}\right)
$$

For example, an \$8 product at a 175% markup sells for \$22. Subtract the \$8 product cost, a \$9 customer acquisition cost, and \$2 shipping, and your net profit is \$3 per order.

## Why Dropshipping Margins Are Tighter Than They Look

The headline appeal of dropshipping is zero inventory. You do not buy stock up front, so cash is not tied up on a shelf. But that same model removes the volume discounts and low unit costs that a stocking retailer enjoys. You pay near retail wholesale on every single unit, one order at a time.

Then there is the traffic problem. A dropshipping store rarely has an existing audience, so almost every early sale is bought with paid ads. Customer acquisition cost is the largest and least predictable line in the whole model. A product with a healthy 60% gross margin can still lose money if it costs \$35 in ads to sell a \$40 item. That is why a **dropshipping profit calculator** has to include ad spend, not just cost and price. A tool that only subtracts product cost from selling price will tell you that you are profitable when you are quietly bleeding cash.

Payment processing takes another 2.9% plus \$0.30 or so per transaction, and refunds, chargebacks, and the occasional lost package chip away further. None of these are large on their own. Together they decide whether a store scales or stalls.

## What Is a Good Profit Margin for Dropshipping?

A sustainable dropshipping store usually aims for a **net profit margin of 15% to 20%** after ads and fees, with a gross margin (before ads) of 50% or more to leave room for that ad spend. Those are guidelines, not rules. A high-ticket store selling \$300 items can thrive on a lower percentage because the dollar profit per order is large. A low-ticket store selling \$15 impulse products needs a much higher margin percentage because a \$4 net profit disappears the moment one ad campaign underperforms.

The practical test is simple: your gross margin has to be big enough to absorb your customer acquisition cost and still leave a net profit you are happy with. If your product costs \$12 and you sell it for \$30, your \$18 gross margin has to cover a \$10 to \$15 ad cost before you see a cent. Run your real numbers through the calculator before you launch a product, not after.

## How to Improve Your Dropshipping Profit

- **Raise your average order value**: bundles, volume discounts, and post-purchase upsells spread a single ad cost across more revenue. If your CAC is fixed per order, selling two items instead of one nearly doubles your margin on that order.
- **Cut your product cost**: as order volume grows, move off open marketplaces to a sourcing agent or a private supplier who can lower your unit price and shipping. A \$2 saving per unit flows straight to net profit.
- **Lower your CAC**: tighten ad targeting, improve your product page conversion rate, and build organic channels such as short-form video and email so not every sale is paid for. Retention and repeat orders cost far less than the first sale.
- **Price with intent**: many new sellers underprice out of fear. Test a higher price. A modest increase often barely dents conversion while transforming the margin, because the ad cost stays the same while the profit per order rises.

## Dropshipping Profit: A Worked Example

Say you sell a phone accessory. Your supplier charges \$8 per unit. You apply a 175% markup, so your selling price is \$22. Your gross profit is \$14, a gross margin of about 64%. Then reality arrives: ads cost you \$9 to make that sale, and you pay \$2 in supplier shipping that you did not pass on. Your net profit is \$14 minus \$9 minus \$2, which is \$3 per order. On 500 orders a month that is \$1,500 net, before payment fees and refunds.

Now change one thing. You add a \$6 upsell that costs you \$2, and you nudge the price to \$24. The ad cost stays at \$9 because it is the same customer. Your net profit per order jumps well above \$3. That is the entire game of dropshipping profitability in one example, and it is exactly what this calculator is built to show you before you spend a dollar on ads.

## Frequently Asked Questions

### What is a good profit margin for dropshipping?

Most sustainable dropshipping stores target a net profit margin of 15% to 20% after ad spend and payment fees, backed by a gross margin of 50% or more before ads. Lower-priced impulse products need a higher margin percentage to survive, while high-ticket stores can work on a lower percentage because the dollar profit per order is larger. The right target is whatever leaves a net profit you are happy with after your real customer acquisition cost.

### How do I calculate dropshipping profit?

Start with your selling price, then subtract every cost of that order: the product cost your supplier charges, the ad spend it took to get the sale, shipping you did not pass to the buyer, and payment processing fees. What is left is your net profit. This calculator does it for you: enter product cost, markup, customer acquisition cost, and shipping, and it returns your selling price, gross margin, and net profit per order.

### What costs should I include in a dropshipping margin?

Include the supplier product cost, supplier shipping, customer acquisition cost (your ad spend divided by orders won), payment processing fees, and any app or platform subscriptions. Refunds, chargebacks, and lost-package replacements are easy to forget but real, so build a small buffer for them. Leaving ad cost out is the single most common mistake, because it makes a losing product look profitable.

### How much do dropshippers make per sale?

It varies widely, but net profit per order commonly lands between \$3 and \$15 for low and mid-ticket products after ads and fees. The percentage matters less than the dollar amount multiplied by your order volume. A \$4 net profit on 1,000 orders a month is stronger than a \$20 net profit on 50 orders. Use the calculator to find your real per-order figure, then multiply by realistic monthly volume.

### Is dropshipping still profitable in 2026?

Yes, but the easy-money era is over. Rising ad costs mean thin margins punish sellers who do not know their numbers. The stores that profit are the ones with a real product edge, a strong offer that lifts average order value, and disciplined pricing that keeps gross margin well above customer acquisition cost. Running every product through a profit calculator before launch, rather than guessing, is now the difference between scaling and stalling.

### How do I use this dropshipping profit calculator?

Enter your supplier product cost, the markup percentage you want to add, your customer acquisition cost per order (ad spend divided by orders), and any shipping cost you absorb. The tool calculates your selling price, gross profit, gross margin, and net profit after ads and shipping. If the net profit comes out low or negative, raise your markup, lower your ad cost, or increase your average order value, then recalculate until the numbers work.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Ecommerce Conversion Rate Calculator

Find your store's conversion rate in seconds. Our free **ecommerce conversion rate calculator** turns visitors and orders into a clean conversion rate, then shows your revenue per visitor and the extra revenue you would earn at a target rate. It is built for Shopify and DTC sellers who want a fast, honest read on how well their traffic turns into sales. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Conversion Rate Calculator

[![Watch How It Works](https://img.youtube.com/vi/XGaD8SgmC5o/maxresdefault.jpg)](https://youtu.be/XGaD8SgmC5o)

This **sales conversion rate calculator** needs just two numbers to start. Here is how to use it:

1. **Enter your visitors**: Type the total visitors or sessions for the period you are measuring. Most ecommerce teams use sessions.
2. **Enter your conversions**: Type the number of orders (or goal completions) in that same period.
3. **Read your conversion rate**: The tool instantly shows your rate as a percent and as a decimal, with a benchmark verdict for ecommerce.
4. **Add average order value (optional)**: This unlocks your revenue and your revenue per visitor.
5. **Add a target conversion rate (optional)**: This shows the orders and the extra revenue you would earn at that rate from the same traffic.
6. **Break down your funnel (optional)**: Open the funnel section to enter your four stage rates and find the leakiest step to fix first.

![Ecommerce conversion rate calculator showing a 2.50% conversion rate from 2000 visitors and 50 orders, plus revenue, revenue per visitor, and the extra orders and revenue earned at a 4% target conversion rate](/images/tools/ecommerce-conversion-rate-calculator/conversion-rate-calculator-results.webp)

## How to Calculate Conversion Rate by Hand

You do not need a tool to get the number. Here is **how to calculate conversion rate** in three steps:

1. **Count your conversions**: This is your orders for the period.
2. **Count your visitors**: This is your total sessions for the same period.
3. **Divide and multiply by 100**: Divide conversions by visitors, then multiply by 100 to get a percent.

For example, 50 orders from 2,000 sessions is `50 / 2000 = 0.025`, and `0.025 x 100 = 2.5%`. The calculator above runs this for you and shows the decimal form too.

## The Conversion Rate Formula

The **conversion rate formula** is short. This is the math behind every result on this page:

$$
\text{Conversion rate (\%)} = \frac{\text{Conversions}}{\text{Visitors}} \times 100
$$

For ecommerce, conversions are orders and visitors are sessions. The same formula works for any goal, like email signups or add-to-carts, as long as you keep the numerator and denominator consistent.

In a spreadsheet, the formula is simple too. If orders are in cell A1 and visitors are in B1, your conversion rate is `=A1/B1*100`. This **website conversion rate calculator** saves you the spreadsheet step and adds revenue and benchmark context.

### Worked Example

Say a DTC store had **2,000 sessions** and **50 orders** last month.

First find the conversion rate:

$$
\text{Conversion rate} = \frac{50}{2000} \times 100 = 2.5\%
$$

Now add an average order value of **\$80**. Revenue is `50 x \$80 = \$4,000`, and revenue per visitor is `\$4,000 / 2,000 = \$2.00`.

Set a target conversion rate of **4%**. At that rate the store would get `2,000 x 0.04 = 80` orders. That is 30 extra orders, or `30 x \$80 = \$2,400` in extra revenue from the same traffic.

## What Is a Good Ecommerce Conversion Rate?

There is no single answer, but there are useful benchmarks. Here is a simple scale for **how to calculate ecommerce conversion rate** performance:

- **Below 1%**: Weak. Usually a sign of poor traffic quality, a slow site, or a leaky checkout.
- **1% to 2.5%**: Average. Most stores live here at some point.
- **2.5% to 5%**: Good. You are converting better than the typical store.
- **5% and above**: Top tier. Strong product-market fit and a smooth checkout.

Rates also vary by store type. Here is a rough by-vertical guide that matches the store-type selector in the tool:

| Store type           | Typical conversion rate |
| -------------------- | ----------------------- |
| General ecommerce    | 2.5%                    |
| Apparel & fashion    | 2.0%                    |
| Health & beauty      | 3.0%                    |
| Electronics          | 1.4%                    |
| Home & garden        | 1.8%                    |
| Food & beverage      | 3.7%                    |
| Gifts & collectibles | 2.4%                    |

These are illustrative averages, not hard targets. Real rates shift with your traffic source, price point, and season. Mobile usually converts lower than desktop, so a mobile-heavy store often sees a lower blended rate. Compare your store to its own trend first, and use the **retail conversion rate calculator** benchmarks as a sanity check, not a goal.

## The Advanced Funnel Formula

Your conversion rate is really the product of every step a shopper takes. The funnel breakdown in the tool uses four stages: Visits to product page, Product page to add to cart, Add to cart to checkout, and Checkout to purchase. The full conversion rate is each stage multiplied together:

$$
\text{CR} = r_1 \times r_2 \times r_3 \times r_4
$$

Say your four stages are 80%, 10%, 50%, and 75%. The math is `0.80 x 0.10 x 0.50 x 0.75 = 0.03`, which is a 3% conversion rate. The lowest stage is the bottleneck. Here it is the 10% add-to-cart step. Fixing the weakest stage lifts the whole funnel the most, because every later step multiplies on top of it. The on-screen funnel card flags this leak for you.

## Revenue Per Visitor and Why It Matters

Revenue per visitor (RPV) is one of the most useful numbers in ecommerce. The formula is simple:

$$
\text{RPV} = \frac{\text{Revenue}}{\text{Visitors}}
$$

RPV blends your conversion rate and your average order value into one figure. A store can lift RPV by converting more shoppers or by raising order value, so it rewards both levers at once. That makes it a better north-star than conversion rate alone, because a higher conversion rate at a lower order value can still mean less money per visit.

## How a Small Conversion Lift Compounds

Small conversion gains are worth more than they look. The reason is that you earn the lift on every visitor, with no extra ad spend.

Take a store at 2% that lifts to 3% on the same traffic. That is a 50% increase in orders and revenue, even though the rate only moved one point. The target conversion rate field above projects exactly this. Enter your goal rate and it shows the extra orders and extra revenue from the lift. This is why conversion rate optimization often beats buying more traffic.

## How to Improve Your Conversion Rate

Most conversion gains come from removing friction. Here is a short list of high-impact fixes:

- **Speed up the site**: Slow pages lose shoppers before they ever see the product.
- **Simplify checkout**: Cut steps, offer guest checkout, and reduce form fields.
- **Add trust signals**: Show reviews, ratings, and clear return policies.
- **Use clear product photos**: Multiple angles and zoom help shoppers decide.
- **Remove surprise shipping costs**: Show shipping early so the total at checkout is not a shock.

Test one change at a time so you know what moved the number.

## Why Conversion Rate Matters for Shopify Sellers

Your conversion rate sits at the center of your store's economics. It decides how far each visitor goes, which in turn sets how much you can afford to pay for traffic.

Once you know your conversion rate, the rest of your numbers fall into place. Use the [ROAS calculator](/tools/roas-calculator) to size your ad spend against the revenue your traffic returns. Use the [break-even calculator](/tools/break-even-calculator) to find the sales you need to cover costs. Use the [profit margin calculator](/tools/profit-margin-calculator) to price for profit. And if you run paid social, the [Facebook ads calculator](/tools/facebook-ads-calculator) and [Instagram ads calculator](/tools/instagram-ads-calculator) help you turn a conversion rate into a workable budget. A higher conversion rate makes every one of those numbers easier.

## Frequently Asked Questions

### What is a conversion rate?

The share of visitors who complete an action, usually an order. Conversion rate = conversions / visitors x 100. 50 orders from 2,000 visitors is a 2.5% rate.

### How do I calculate conversion rate?

Divide conversions by total visitors, then multiply by 100. Example: 50 / 2,000 = 0.025 = 2.5%.

### What is a good ecommerce conversion rate?

Most ecommerce stores convert about 2-3%. Above 2.5% is good and 5% or more is top tier. Below 1% usually signals a problem with traffic quality, pricing, or the checkout.

### What is the conversion rate formula?

Conversion rate (%) = (conversions / visitors) x 100. For ecommerce, conversions are orders and visitors are sessions.

### How do I increase my conversion rate?

Speed up the site, simplify checkout, add trust signals and reviews, use clear product photos, and remove surprise shipping costs. Small lifts compound: going from 2% to 3% is a 50% revenue increase from the same traffic.

### What is revenue per visitor?

Revenue divided by visitors. It blends conversion rate and average order value into one number, so it is a good north-star metric for store growth.

### Should I use sessions or users for visitors?

Be consistent. Most ecommerce teams use sessions because a shopper often visits more than once before buying. Pick one and stick with it.

### Is this conversion rate calculator free?

Yes, 100% free, no signup, unlimited calculations.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---

title: "Free Shopify Email Signature Generator"
description: "Create a professional email signature for your Shopify store. Add track-order links, returns policy, promo codes, and social links. Copy HTML for Gmail, Outlook, Thunderbird, and Shopify Email."

---

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Create a Free Email Signature

[![Watch How It Works](https://img.youtube.com/vi/72HK0YW8vW0/maxresdefault.jpg)](https://youtu.be/72HK0YW8vW0)

## What is an Email Signature?

An **email signature** is the branded block at the bottom of every message you send. It includes your name, title, contact details, logo, and social links. It also includes optional calls to action. It appears automatically on new emails and replies. This means customers, suppliers, and partners always know who they are talking to. They always know how to reach your store.

![Email signature example in Gmail showing name, photos, social icons, and a shop CTA](/images/tools/email-signature-generator/email-signature-gmail-example.webp)

A good Shopify email signature turns routine support replies into mini marketing touchpoints. You can add track-order links, returns info, promo codes, and social proof. You do this without typing the same details every time.

## Why Shopify Merchants Need a Professional Email Signature

Every email you send is a branding opportunity. You might be replying to a customer asking "Where is my order?". You might be negotiating with a supplier. You might be following up with a wholesale buyer. A polished email signature builds trust. It keeps your store top of mind.

Generic signature generators miss what ecommerce merchants actually need. You need quick access to order tracking, returns policies, and promotional offers. These must be embedded directly in every reply.

Our **Free Shopify Email Signature Generator** is built specifically for store owners and support teams. Fill in your details. Preview the signature live. Copy the email-safe HTML in one click. You need no account. You need no credit card. You need no design skills.

### Key Benefits for Shopify Stores

- **Reduce WISMO tickets:** Add "Track My Order" and "Easy Returns" buttons. Customers can self-serve before they reply.
- **Consistent branding:** Include your store logo, accent color, and store URL on every email.
- **Drive repeat sales:** Add a promo line like "Get 15% off with code SHOP15" to every customer interaction.
- **Social proof:** Link to your Instagram, Pinterest, TikTok, and Facebook profiles from every message.

## Features

- **Live preview:** See your signature update in real time as you type.
- **Copy signature:** Get one-click rich HTML copy for Gmail and Outlook.
- **Copy HTML:** Get raw table-based HTML. Use it for Shopify notification templates, Thunderbird, or advanced editing.
- **Copy plain text:** Get a fallback for clients that strip HTML formatting.
- **Shopify-specific fields:** Include your store name, support email, track-order URL, returns policy URL, and promo line.
- **Auto-filled URLs:** Enter your store URL. We suggest `/apps/trackorder` and `/pages/returns` paths automatically.
- **Three layout styles:** Choose from Classic, Compact, and With CTAs (track order + returns buttons).
- **Custom accent color:** Match your Shopify theme or brand palette perfectly.
- **100% free, no signup:** All processing happens directly in your browser. We never store your data.

## How to Use Your Email Signature

1. Fill in your store and contact details in the form on the left.
2. Choose a layout style and accent color.
3. Click **Copy signature** for Gmail and Outlook. Click **Copy HTML** for Shopify notifications, Thunderbird, and raw HTML.
4. Paste the result into your email client:
   - **Gmail:** [Settings → See all settings → General → Signature](https://mail.google.com/mail/u/0/#settings/general) (steps below)
   - **Outlook:** [Settings → Account → Signatures](https://outlook.live.com/mail/options/accounts-category/signatures-subcategory?msalAuthRedirect=true) (steps below)
   - **Thunderbird:** [Account Settings → Signature](https://support.mozilla.org/en-US/kb/signatures) (steps below) - use **Copy HTML**
   - **Shopify:** Settings → Notifications → Customer notifications (steps below) - use **Copy HTML**

### Gmail: [Settings → General → Signature](https://mail.google.com/mail/u/0/#settings/general)

Steps:

2. In the top right corner, click the gear icon (**Settings**).
   ![Gmail quick settings panel with See all settings button](/images/tools/email-signature-generator/gmail-quick-settings.webp)
3. Click the **See all settings** button.
4. Make sure you are on the **General** tab. This is usually the default. ![Gmail General tab with Signature section](/images/tools/email-signature-generator/gmail-general-signature-section.webp)
5. **Scroll down almost to the bottom** of that long page. You will eventually see a section labeled **Signature**.
6. Click the **+ Create new** button.
7. Give your signature a name (like "Shopify Store"). Click **Create**.
8. A text box will appear. Click **Copy signature** on the generator. Then **paste** it into this box. Formatting, links, and images stay intact.
9. **Important:** Just below the text box, look for **Signature defaults**. Use the dropdown menus to choose your new signature for "FOR NEW EMAILS USE" and "ON REPLY/FORWARD USE".
10. Scroll to the very bottom of the page and click **Save Changes**.

> **Note:** CSS animations (e.g., rotating logo frames on the Meet template) preview in the browser only. Gmail does not support animated signatures. Use an animated GIF for motion in an email.

### Outlook: [Settings → Account → Signatures](https://outlook.live.com/mail/options/accounts-category/signatures-subcategory?msalAuthRedirect=true)

1. Click **Copy signature** on the generator (same as Gmail).
2. In Outlook, open [Settings → Account → Signatures](https://outlook.live.com/mail/options/accounts-category/signatures-subcategory?msalAuthRedirect=true).
   ![Outlook web settings with Account and Signatures selected](/images/tools/email-signature-generator/outlook-settings-signatures.webp)
3. Click **Add signature**.
4. Give it a name. Paste your signature. Check **Set default for new messages** and **Set default for replies and forwards**. Click **Save**.
   ![Outlook signature editor with pasted signature and default options](/images/tools/email-signature-generator/outlook-signature-editor.webp)

> **Note:** Outlook sometimes wraps text poorly. For a tighter layout, try Thunderbird or **Copy HTML** in another client.

### Thunderbird: [Account Settings → Signature](https://support.mozilla.org/en-US/kb/signatures)

Thunderbird pastes **raw HTML** directly into its signature field. Use **Copy HTML**, not Copy signature.

1. Click **Copy HTML** on the generator.
2. In Thunderbird, open the menu (☰) → **Account Settings**.
3. In the left panel, select the email account you want.
   ![Thunderbird Account Settings with Signature text, Use HTML, and attach-from-file options - source: Thunderbird](/images/tools/email-signature-generator/thunderbird-account-settings-signature.webp)
4. In **Signature text**, check **Use HTML**. Then paste your signature HTML.
5. Click **OK** to save. On some versions, closing the Account Settings tab saves automatically.
6. Compose a new message to preview. Your signature appears below a `--` divider.

**Replies and forwards:** With the same account selected, open **Composition & Addressing** in the left panel. Check **Compose messages in HTML format** and **Include signature for replies**. To ensure your signature appears correctly, change the reply style to **"Start my reply above the quote"**. Set the signature to place **"below my reply (above the quote)"**.

> **Tip:** Thunderbird handles table layouts well. This is a good choice when Outlook wraps lines poorly. Logo and photo URLs must be public `https://` links.

### Shopify: Customer notification templates

Add your signature to order emails, invoices, and other Shopify notifications.

1. Open a template to edit. The fastest route is to go to `https://admin.shopify.com/store/YOUR_STORE_HANDLE/email_templates/order_confirmation/edit` (replace `YOUR_STORE_HANDLE` with your store slug).
   ![Shopify order confirmation email template editor](/images/tools/email-signature-generator/shopify-order-confirmation-template.webp)
2. Or open **Settings → Notifications → Customer notifications**. Then click each template you want to update (order confirmation, order invoice, and so on).
   ![Shopify customer notifications list in admin](/images/tools/email-signature-generator/shopify-customer-notifications.webp)
3. Click **Copy HTML** on the generator.
4. In the template editor, press **Ctrl+F** (Mac: **Cmd+F**) and search for `</body>`.
5. Paste your signature HTML just above the `</body>` tag. Click **Save**.
6. Click **Preview** or **Send test email** to check the result.
   ![Shopify email template preview modal](/images/tools/email-signature-generator/shopify-email-preview.webp)

Don't like the result? Click **Revert to default** on the template to undo your changes.
![Revert to default button on a Shopify email template](/images/tools/email-signature-generator/shopify-revert-to-default.webp)

> **Klaviyo:** If Klaviyo sends your store emails, follow [Klaviyo's template docs](https://help.klaviyo.com/hc/en-us) instead.
> **Stuck in admin?** Ask **Sidekick** (Shopify's AI assistant) for help finding notification templates.

## Tips for Best Results

- **Host images on a CDN:** Use Shopify Files or another public `https://` URL for your logo and profile photo.
- **Use absolute URLs:** Both **Copy signature** and **Copy HTML** rewrite PinFlow-hosted icons and example assets to full `https://` URLs. Your own photos must already be on a public HTTPS host.
- **Use the "With CTAs" style for support teams:** Track Order and Returns buttons cut down on repetitive customer inquiries.
- **Keep promo lines short:** One line with a clear discount code works best in email footers.
- **Test before rolling out:** Send yourself a test email. Confirm the signature renders correctly in your client.

## Frequently Asked Questions

### Will Gmail strip my signature styles?

Our HTML uses table layouts and inline styles. This is the standard approach for email signatures. Gmail preserves most inline styling. If something looks off, try the plain-text copy as a fallback.

### Why aren't my logo or images showing in Gmail?

Gmail treats signature images differently in the editor versus sent mail:

1. **Use hosted HTTPS URLs** - paste a Shopify Files or CDN link for logos and photos.
2. **Avoid relative paths** - images must load from a public domain (e.g. `https://yourstore.com/...`)
3. **Social icons are self-hosted** - PinFlow serves PNG icons from our domain. They appear after you copy on a deployed site.

Always send yourself a test email to confirm.

### Can I use this for my whole support team?

Yes. Fill in the example. Customize it for each team member (name, title, email). Then share the copied HTML. The store-level fields (logo, track order URL, returns URL) stay the same.

### Is my data stored anywhere?

No. Everything runs directly in your browser. We do not upload, store, or sell your information.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Estimate Generator
description: Create a professional job estimate in minutes. Add your logo, client details, and line items with prices, then download a clean PDF. Free, no signup.
---

# Free Estimate Generator

Create a professional **job estimate** in a couple of minutes. Our free estimate generator replaces the usual **estimate template** download. Add your logo, the client, the expected products or services with prices, and a valid-until date, then download a tidy PDF with a clearly labelled Estimated Total. No signup is required, and there is no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Write an Estimate

[![Watch How It Works](https://img.youtube.com/vi/cHiwKBGtVt4/maxresdefault.jpg)](https://youtu.be/cHiwKBGtVt4)

A quick walkthrough of the generator: pick a template, add your business name and logo, enter the client, list the expected items with quantities and prices, set a valid-until date, then download a print-ready PDF. It is completely free and needs no sign-up.

![Free estimate generator preview showing an ESTIMATE document with the business name, estimate number, Valid Until date, line items with prices, and a clearly labelled Estimated Total, next to the editor template options](/images/tools/estimate-generator/og.webp)

An estimate sets a client's price expectations before the scope is fully nailed down. Contractors, cleaners, landscapers, repair shops, freelancers, and custom-product makers all live on them. Here is how to fill one in with this tool:

1. **Add your business details**: Enter your business name, logo, and address. The header is the first thing the client sees, so it should look professional.
2. **Add the client**: Enter who the estimate is for. On the estimate document type, this section is labelled Estimate For.
3. **Set the estimate number and dates**: Use a unique number such as EST-2026-001, add the issue date, and set the Valid Until date so the pricing has a shelf life.
4. **List your line items**: Add one line per expected product, service, or phase of work with a quantity and a unit price. The tool totals each line, the subtotal, tax, any discount, and the Estimated Total live as you type.
5. **Write your assumptions in the notes**: Say what the estimate covers, what it excludes, and what could change the final price. This is the single most important part of a good estimate.
6. **Style it**: Pick a template and set your brand color.
7. **Download the PDF**: Click Download PDF and send it to the client.

Your business details and default notes are saved in your browser, so your next estimate takes seconds.

## What to Include on an Estimate Template

A useful estimate answers who, what, roughly how much, and until when:

- **Your business name, logo, and contact details** in the header.
- **The client's name and details** under an Estimate For heading.
- **A unique estimate number** and the issue date for your records.
- **A valid-until date**. Material and labor costs move, so cap how long the numbers stand.
- **Line items**: each expected product, service, or work phase with a quantity and unit price.
- **Subtotal, tax, and an Estimated Total** so the client sees the likely number, framed as an estimate.
- **Notes and assumptions**: what is included, what is excluded, and what would change the price.

Itemising matters. An estimate that reads Materials \$600, Labor: 16 hours at \$45, Site cleanup \$120 is easier to trust and approve than one line that says Job, \$1,440.

## Estimate vs Quote vs Invoice

These documents sit at different points in a sale, and the difference is mostly about how fixed the price is.

- An **estimate** is an approximation. The final cost can move as the job takes shape, which is why this tool labels the bottom line Estimated Total.
- A **quote** is a fixed price offer. Once accepted, you are expected to honor it. When your scope firms up, our [free quote generator](/tools/quote-generator) produces one on this same engine, with a QUOTE title and a firm Total.
- An **invoice** requests payment after the work is delivered. Our [free invoice generator](/tools/invoice-generator) turns the same line items into a bill when the job is done.

A common flow: estimate early to win interest, quote once the scope is fixed, invoice when the work is delivered. Inside this tool you can switch the document type at any point and keep everything you typed, so an accepted estimate becomes an invoice in two clicks instead of a retype.

## Why a Generator Beats a Word or Excel Estimate Template

Search results for estimate templates are full of static Word and Excel downloads. They work until they do not:

- **Broken math.** Excel estimate templates depend on formulas that break the moment a row is added carelessly. This tool recalculates everything on every keystroke.
- **Messy layouts.** Word templates shift around when descriptions wrap or logos are resized. The PDF export here is consistent every time.
- **No estimate-specific framing.** A generic template usually says Total, which reads like a fixed price. This document says Estimated Total, which protects you when the final number moves.
- **Starting from scratch each time.** The generator remembers your business details in the browser, so estimate number two is nearly instant.

If your estimates lead to physical orders, the same engine covers the rest of the paper trail: an [order form](/tools/order-form-generator) when the customer commits, a [purchase order](/tools/purchase-order-generator) when you order materials, and a [delivery note](/tools/delivery-note-generator) when the goods go out.

## Tips for Estimates That Turn Into Jobs

- **Respond fast.** The first professional estimate a client receives anchors their budget. Speed is a real advantage.
- **Estimate in ranges mentally, but present line items.** Break the job into parts and price each one. It looks rigorous and gives you room to adjust individual lines later.
- **Pad for the unknowns explicitly.** A contingency line is more honest than silently inflating every price.
- **Set a short validity window.** 14 to 30 days keeps you safe from material price swings.
- **Spell out exclusions.** Most estimate disputes are about work the client assumed was included.
- **Follow up before the valid-until date.** A short check-in message converts a surprising share of quiet estimates.

## Frequently Asked Questions

### What is an estimate?

An estimate is a document that gives a client an approximate price for a job before the work starts. It lists the expected products, services, and quantities with prices, and it makes clear the final cost can change as the scope becomes firmer. This tool labels the bottom line Estimated Total for exactly that reason.

### What should an estimate template include?

Your business name and logo, the client's details, a unique estimate number, the issue date, a valid-until date, a line for each expected product or service with quantity and unit price, the subtotal, tax, and estimated total, plus notes explaining assumptions and what could change the price.

### What is the difference between an estimate and a quote?

An estimate is an approximation and the final price can move. A quote is a fixed price offer that you are expected to honor once the client accepts. Use an estimate early, when the scope is fuzzy, and a quote when you know exactly what the job involves.

### What is the difference between an estimate and an invoice?

An estimate is sent before the job to set price expectations. An invoice is sent after the job to collect payment for what was actually delivered. Many businesses send an estimate, refine it into a quote, do the work, then invoice. You can switch this tool between all three document types.

### How do I estimate a job accurately?

Break the job into line items instead of one lump sum: materials, labor, and any fixed fees. Price each line separately, add a sensible margin for the unknowns, and write your assumptions in the notes. Itemised estimates are easier to defend and easier for the client to approve.

### Is an estimate legally binding?

Generally no. An estimate is an approximation, not a fixed offer, and the final invoice can differ. That said, a wildly inaccurate estimate damages trust and can cause disputes, so keep estimates honest and flag anything likely to change the price in the notes.

### Is this estimate generator free?

Yes, it is 100% free with no signup and no watermark. Build unlimited estimates, preview them live, and download each one as a PDF. Your business details are saved in your browser so repeat estimates take seconds.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Etsy Fee Calculator
description: Work out every Etsy fee and your net payout, switch to eight other platforms, add item cost for profit and margin, or reverse-solve the list price for a target payout.
---

# Free Etsy Fee Calculator

Know exactly what lands in your account before you list. Our free **Etsy fee calculator** takes your item sale price and shipping, then shows every Etsy fee line by line, the total fees, and your exact net payout. Add your item cost and it also shows profit and margin. The same engine covers Stripe, Shopify, Square, Depop, Mercari, Poshmark, Reverb, and PayPal, so you can price the same product across platforms in seconds. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Etsy Fee Calculator

[![Watch how the free Etsy Fee Calculator works](https://img.youtube.com/vi/gbN1mcMZb04/maxresdefault.jpg)](https://youtu.be/gbN1mcMZb04)

The tool has two modes. Pick the one that matches what you already know:

1. **Price to payout**: Enter your item sale price and, if you charge it, your shipping. The calculator lists each fee, totals them, and shows your net payout. Add your item cost to see profit and profit margin too.
2. **Net to list price**: Enter the payout you want to keep. The calculator solves for the list price that leaves you exactly that much after fees, then shows the breakdown so you can confirm it reconciles.

Use the **platform** dropdown to switch from Etsy to another marketplace or payment provider. The fee lines re-label and re-compute for that platform's real US fee schedule, so nothing from the previous platform leaks through. Where fees depend on context, a small sub-selector appears: your Shopify plan, whether Square is taking the card in person or online, or whether Stripe is online or in-person.

Every platform links to its official fee page with the date we checked it. Rates change often and vary by country and plan, so treat the numbers as a fast, accurate starting point and confirm anything critical against the source.

## How Etsy Fees Work in the US

Etsy charges US sellers three fees on a normal sale, plus optional ad fees:

- **Listing fee**: A flat \$0.20 to publish or renew a listing. It applies per listing, and a listing lasts four months or until the item sells.
- **Transaction fee**: 6.5% of the item price plus the shipping and gift wrap you charge. This is Etsy's marketplace cut.
- **Payment processing fee**: 3% plus \$0.25 per order for US sellers using Etsy Payments. This covers the card processing.
- **Regulatory operating fee**: A small percentage in some countries, such as the UK and parts of the EU. It is 0% for US sellers. The tool includes an editable field so sellers outside the US can enter their rate.

Take an item at \$30 with \$5 shipping. The listing fee is \$0.20. The transaction fee is 6.5% of \$35, which is \$2.28. Payment processing is 3% of \$35 plus \$0.25, which is \$1.30. The regulatory fee is \$0.00 in the US. Total fees are \$3.78, so your net payout is \$31.22. Etsy Ads and Offsite Ads are separate and are not included by default.

## How the Other Platforms Charge

The calculator models each platform's real structure, not a single blended rate.

- **Stripe**: A pure payment processor. Online card charges are 2.9% plus \$0.30 with no marketplace fee. In-person Terminal payments are 2.7% plus \$0.05. A \$100 online charge costs \$3.20, leaving \$96.80.
- **Shopify**: Shopify Payments charges a card rate that depends on your plan (2.9% plus \$0.30 on Basic, 2.7% plus \$0.30 on Grow, 2.5% plus \$0.30 on Advanced online) and there is a 0% transaction fee. If you use a third-party gateway instead, Shopify adds a plan-based transaction fee (2% on Basic, 1% on Grow, 0.6% on Advanced) and your outside processor charges its own card fees on top.
- **Square**: The rate depends on how the card is taken. In-person tap, dip, or swipe is 2.6% plus \$0.15. Standard online checkout is 3.3% plus \$0.30, while in-app payments through Square's API are 2.9% plus \$0.30. Square Invoices are 3.3% plus \$0.30. Manually keyed or card-on-file is 3.5% plus \$0.15.
- **Depop**: In 2024 Depop removed the seller selling fee in the US. Sellers now pay only Depop Payments processing of 3.3% plus \$0.45, and buyers pay a separate Buyer Protection fee that does not reduce your payout.
- **Mercari**: In January 2025 Mercari brought back a seller fee. US sellers now pay a flat 10% selling fee on the item price plus shipping, and the separate seller payment-processing fee was removed. Buyers pay a separate 3.6% Buyer Protection fee at checkout that does not reduce your payout.
- **Poshmark**: A two-tier fee. A sale under \$15 costs a flat \$2.95. A sale of \$15 or more costs 20% of the listing price. Buyers pay shipping separately, so it does not affect your payout.
- **Reverb**: A 5% selling fee on the item plus shipping, capped at \$500, plus payment processing of 3.19% plus \$0.49 (Preferred sellers pay 2.99% plus \$0.49).
- **PayPal**: Online checkout is 3.49% plus \$0.49. Standard card payments are 2.99% plus \$0.49. PayPal is offered as an in-page option because many sellers accept it alongside a marketplace.

## Reading the Fee Breakdown

The results panel shows the money the buyer pays that you collect at the top, then each fee as a negative line, then total fees and net payout. Because we round every line to whole cents and derive the total and net from those rounded lines, the breakdown always reconciles: the item and shipping minus the total fees equals the net payout to the cent. A small badge shows fees as a share of what you collect, which is the number to watch when comparing platforms.

## Working Out Profit and Margin

Fees tell you what you keep, not what you earn. Enter your item cost and the tool subtracts it from your net payout to show profit, then divides that profit by your revenue to show profit margin. Leave item cost blank and those two figures stay hidden rather than showing a misleading zero. If your margin looks thin after fees, that is the signal to raise your price, cut your cost, or move a product to a lower-fee channel.

## Reverse Mode: Price for a Target Payout

Sometimes you know the number you need to walk away with. Switch to the net-to-price tab, type your target payout, and the calculator solves for the list price that nets exactly that after fees. It handles Poshmark's jump from a flat \$2.95 to 20% at the \$15 threshold, and the breakdown below confirms the solved price really does hit your target. This is the fastest way to set a price that covers your costs and the platform's cut in one step.

## Tips for Lowering Your Fees

- Compare the effective fee rate, not the headline percentage. A fixed \$0.25 or \$0.30 fee hurts small orders far more than large ones.
- On Shopify, using Shopify Payments avoids the extra transaction fee that a third-party gateway adds.
- On Square, taking the card in person is cheaper than keying it in by hand.
- Bundle small items so a single fixed processing fee is spread across a larger order.
- Build the platform's cut into your price from the start using the reverse mode, rather than discovering it after the sale.

## Frequently asked questions

### How does the Etsy fee calculator work?

Enter your item sale price and, if you charge it, your shipping. The calculator adds Etsy's US fees line by line: a \$0.20 listing fee, a 6.5% transaction fee on the item plus shipping, and payment processing of 3% plus \$0.25. It sums those into total fees and subtracts them from what the buyer pays to show your exact net payout. Add your item cost to also see profit and profit margin.

### What are Etsy's seller fees in the US?

For US sellers Etsy charges a \$0.20 listing fee per listing, a 6.5% transaction fee on the item price plus the shipping you charge, and payment processing of 3% plus \$0.25 per order. A regulatory operating fee applies in some countries (for example the UK and parts of the EU) but is 0% for US sellers. Optional Etsy Ads and Offsite Ads are extra and are not included by default.

### Are these fee rates current and are they US rates?

Yes. Every rate is US and USD by default, and each platform in the calculator links to its official fee page with the date we last checked it. Fees change often and vary by country and plan, so we expose sub-selectors for things like your Shopify plan, Square card-present versus online, and Stripe online versus in-person. Always confirm against the linked source before you rely on a number.

### How do the other platforms' fees differ from Etsy?

Stripe and PayPal are pure payment processors, so they charge one percentage plus a fixed fee with no marketplace cut. Square changes its rate by how the card is taken. Shopify charges 0% transaction fee on Shopify Payments but a plan-based fee on third-party gateways. Poshmark charges a flat \$2.95 under \$15 or 20% above it. Reverb charges a 5% selling fee plus processing. Depop dropped its US seller selling fee in 2024, and Mercari now charges US sellers a flat 10% selling fee (after briefly going buyer-paid in 2024).

### How is Poshmark's fee calculated?

Poshmark uses a two-tier fee in the US. On a sale under \$15 you pay a flat \$2.95. On a sale of \$15 or more you pay 20% of the listing price. So a \$14.99 sale costs \$2.95 and a \$15.00 sale costs \$3.00. Buyers pay shipping separately, so it does not reduce your payout.

### What is the reverse net-to-price mode?

Switch to the reverse tab, type the payout you want to keep, and the calculator solves for the list price that leaves you exactly that much after fees. It works on every platform, including Poshmark's flat-to-percentage threshold, and the breakdown below shows that the solved price really does net your target.

### Does the calculator show profit and margin?

Add your item cost and the results panel shows your profit (net payout minus cost) and your profit margin as a percentage of revenue. Leave item cost blank and those two figures stay hidden rather than showing a misleading zero.

### Is this fee calculator free?

Yes. It is 100% free, runs entirely in your browser, needs no signup, and supports unlimited calculations across Etsy and eight other platforms.


---

<!--
Writing rules for this file:
- First "## " heading is the article start (page.tsx slices from there).
- Escape currency $ as \$ (remark-math).
- No em dashes. Use a regular hyphen.
- No filler words: honestly, genuinely, blocker.
- Keep sentences short. The "## Frequently asked questions" ### blocks must
  match the FAQ_ITEMS array in page.tsx word for word.
-->

---
title: Free Event Ticket Maker
description: Design and print event tickets for concerts, galas, sports, conferences, fundraisers, and parties. Add a tear-off stub with a matching number, then download a true-size PNG, PDF, or SVG, or a numbered sheet.
---

## Make a printable event ticket in minutes

[![Watch how the free Event Ticket Maker works](https://img.youtube.com/vi/K1zntmOW5MA/maxresdefault.jpg)](https://youtu.be/K1zntmOW5MA)

An event ticket does two jobs at once. It is the pass the attendee shows at the door, and it is the record the gate keeps to reconcile who came in. This free event ticket maker builds both halves in one design: a main body the attendee keeps and a tear-off stub the gate keeps, joined by a dashed perforation line. You pick a template, type your event details, choose a size, and download a print-ready file. There is no signup and no watermark.

Most "event ticket template" results are static files you open in Word or a design app and fight with. This is a real generator. The live preview updates as you type, the perforation and cut guides are drawn for you, and the export is sized so a printed ticket comes out at its true finished size.

## What goes on an event ticket

A good ticket answers the door staff's questions at a glance and reads clearly from a phone photo. The tool gives you a field for each part, and every template shows only the fields that style needs, so nothing on the form is dead.

- **Event name.** The headliner, the matchup, the film, or the party title. This is the biggest line on the ticket.
- **Date and time.** Doors, kick-off, showtime, or start. Keep it in the format your guests expect.
- **Venue or location.** The building, gate, or address.
- **Section, row, and seat.** Reserved-seating events need these; general-admission events can leave them blank and they hide.
- **Ticket type or tier.** General Admission, VIP, Day Pass, Patron, Runner Entry, and so on.
- **Price.** Shown with your chosen currency symbol, or left blank for invite-only events.
- **Admission line.** The classic "ADMIT ONE" (or "Admit One Little Guest" for a kids party).
- **Fine print.** Non-refundable terms, a dress code, or a sponsor line.
- **Serial number.** The unique ticket number, printed on both the body and the stub.

You do not have to fill every field. Any field you leave empty is hidden from the ticket, so a stripped-down general-admission pass and a full reserved-seat ticket both come out clean.

## The tear-off stub and the perforation

The stub, also called a counterfoil, is the net-new part of this tool compared with a plain flyer. It is a fixed slice of the ticket, about 28 percent of the long side, separated by a dashed perforation line with two punch notches. At the gate, staff tear the stub off along the perforation and keep it. The attendee keeps the body.

For the stub to be useful, it has to reconcile back to its ticket. That is why the stub repeats the event name, the date, and, most important, the same serial number as the body. If ticket A-0042 is torn, stub A-0042 is what the gate holds. The tool guarantees this: the body and the stub read the same number from one source, so they can never disagree.

You control the stub. Turn it on or off with a switch. Move it to either end of the ticket. On a landscape ticket the stub sits on the left or the right; on a portrait ticket it sits on the top or the bottom, and the control relabels itself to match what you see. The perforation line and its notches are drawn as part of the image, so they survive the export and print on the real ticket.

## Sequential numbering for a whole run

A single ticket is fine for a poster mockup, but real events need a numbered run. Switch to the Numbered sheet tab, set a start value and a count, and the tool builds the full sequence.

The start value is smart about prefixes. Type a plain number like `100` and you get 100, 101, 102, and so on. Type `A-0001` and the tool keeps the `A-` prefix and the four-digit zero padding, so you get A-0001, A-0002, A-0003, up through the count you set. This is how raffle books and admission runs are numbered, and it means you can hand out tickets in order and match a returned stub to its record.

Every ticket on the sheet is the same design with its own number, printed on both the body and the stub. You can number a run of up to five hundred in one export.

## Real print-shop sizes

Ticket stock is a real physical size, so the presets here match what print shops actually cut. The finished sizes are drawn from vendor product pages at UPrinting and GotPrint.

| Preset | Size (inches) | Best for |
| --- | --- | --- |
| Classic event ticket | 2 x 5.5 | Portrait raffle and event tickets |
| Wide event ticket | 5.5 x 2 | Landscape general admission |
| Large concert ticket | 8.5 x 3.5 | A big stub-on-the-side concert look |
| Compact event ticket | 2.75 x 5.5 | A slightly wider portrait ticket |
| Custom | Your inches | Any size that fits the sheet |

The single-ticket PDF is sized to the exact finished inches, where 1 inch equals 72 points. A 2 by 5.5 inch ticket exports a 2 by 5.5 inch PDF page (144 by 396 points). Print at 100 percent scale with no fit-to-page and the ticket comes out at its true size, ready to trim.

## The numbered sheet closes to the page

When you print a run, you want a full sheet of tickets you can cut apart, not one ticket per page. The Numbered sheet tab tiles your tickets edge-to-edge on a US Letter or A4 page and centers the grid, so the layout closes to the paper by construction and never spills off the edge. If you pick a custom size too big to fit even once, the tool warns you instead of clipping.

Dashed cut guides are drawn on the sheet as part of the image, so they survive the export. Run a paper cutter or scissors along the guides to separate the tickets, and each ticket already shows its own perforation line for the stub. A multi-page run exports as a ZIP of PNGs or a single multi-page PDF.

## Eight ticket templates

One page serves a whole family of ticket searches because the gallery has eight styles, and each one fills the fields that style needs.

- **Concert.** Bold display type, an accent bar, a big headliner, and a QR code for check-in.
- **Gala.** An elegant serif, centered layout, gold rule lines, and a dress-code note.
- **Sports.** Strong bands and a prominent section, row, and seat block for a match ticket.
- **Conference.** A clean sans layout with an ADMIT ONE line, a pass-type pill, and a QR check-in code.
- **Fundraiser.** A warm theme with a suggested-donation line and a sponsor footer.
- **Cinema.** The classic movie-stub look with screen, row, seat, and showtime.
- **Kids party.** A playful rounded card with a big friendly title and an "Admit One Little Guest" line.
- **Blank.** A structure-only layout that shows every field, as a neutral starting point.

Each template comes with a signature color theme and font, and every one renders both a body and a matching stub. Click Fill example to load realistic sample data for the selected style, or Reset to clear back to a blank ticket.

## QR codes that actually scan

Some templates include a QR field. When you enter a check-in or event URL, the tool renders a real QR code that decodes to exactly that link, and bakes it into the PNG, PDF, and SVG export. This is a working code, not a decorative pattern, so a guest can scan the printed ticket to open your check-in page. The serial number is also printed as plain text next to it, so staff can reconcile a ticket by hand when a scanner is not available.

## Colors, fonts, and exports

Every template has a look you can change. Switch between the built-in color themes, set a custom accent and text color, and pick from a large font list. Your choices apply to the live preview and to every export, single or bulk.

You get three export formats. PNG is the everyday raster file for sharing or printing. PDF is sized to the true finished dimensions for a clean print. SVG is the vector file for a design tool or a professional printer. None of them carry a watermark.

## Tips for a clean print run

- Print a single test ticket first and measure it with a ruler to confirm your printer is at 100 percent scale.
- Use a slightly heavier cardstock (around 200 to 250 gsm) so the stub tears cleanly along the perforation.
- Keep the fine print short. Long paragraphs shrink the rest of the ticket to fit.
- For reserved seating, fill section, row, and seat; for general admission, leave them blank and use the tier field instead.
- Number your run in the Numbered sheet tab rather than editing the number by hand, so the body and stub always match.

## Frequently asked questions

### Is this event ticket maker free?

Yes, it is 100% free with no signup and no watermark. Design and download as many event tickets as you want as PNG, PDF, or SVG files, one at a time or as a numbered printable sheet.

### What is the tear-off stub on an event ticket?

The stub, also called a counterfoil, is the small section separated by a dashed perforation line that the gate keeps when the attendee tears it off. It repeats the event name, date, and the same ticket number as the main body so a torn stub always reconciles back to its ticket. You can turn the stub on or off and move it to either end.

### Can I make a whole set of numbered tickets at once?

Yes. Switch to the Numbered sheet tab, set a start number and a count, and every ticket tiles onto a US Letter or A4 sheet with its own sequential number on both the body and the stub. A start value like A-0001 keeps the prefix and increments the digits (A-0001, A-0002, and so on), so you can number a full run in one export.

### What size is an event ticket?

Common finished event and raffle ticket sizes are 2 by 5.5 inches, 5.5 by 2 inches, 8.5 by 3.5 inches, and 2.75 by 5.5 inches. These match real print-shop stock from vendors like UPrinting and GotPrint, and all are built-in presets alongside a custom size in inches. The single-ticket PDF is sized to the exact finished inches so it prints at 100% scale.

### Do the tickets have a real, scannable QR code?

Yes. On the templates with a QR field you enter a check-in or event URL, and the tool renders a real QR code that decodes to exactly that link. It is baked into the PNG, PDF, and SVG export, so guests can scan the printed ticket. The ticket number is also shown as clear text for manual reconciliation.

### Which ticket styles can I make?

The gallery has eight templates: concert, gala, sports, conference, fundraiser, cinema, kids party, and a blank structure-only layout. Each fills the fields that style needs, from section, row, and seat for sports to a suggested-donation line for fundraisers, and every one renders both a body and a matching stub.

### Will the printed sheet line up when I cut it?

Yes. The bulk sheet tiles tickets edge-to-edge and centers the grid on the page, so it closes to the paper by construction and never overflows. Dashed cut guides are drawn as part of the image, so they survive the export and give you a line to run a paper cutter or scissors along. The perforation line prints on each ticket so you know where to tear the stub.

### Can I use my own colors and fonts?

Yes. Each template comes with a signature color theme and font, and you can switch to any of the built-in themes, set a custom accent and text color, and choose from a large font list. Your choices apply to the live preview and to every export, single or bulk.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (-). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Expense Report Template Generator
description: Build a professional expense report free. Add line items, mileage, and a cash advance, pick a template, and download a print-ready PDF, PNG, or CSV. Free, no signup, no watermark.
---

# Free Expense Report Template Generator

Create a clean, professional **expense report** for work travel and business costs in minutes. Add each expense as a line item, log mileage, subtract any cash advance, pick one of 20 polished templates, and download a print-ready PDF, PNG, or CSV. It is data-first and design-second, so you enter your numbers once and the template does the styling. The tool is 100% free, runs entirely in your browser, and there is no signup and no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, video, etc.). -->

## How to make an expense report

[![Watch how the free Expense Report Generator works](https://img.youtube.com/vi/bExKw0G7ogQ/maxresdefault.jpg)](https://youtu.be/bExKw0G7ogQ)

Making an expense report with this **expense report template** takes five short steps.

1. **Add your header and branding.** Upload a logo, add your company name and address, and set the report title. A short business purpose line, like "Client kickoff trip", tells the approver why the costs were incurred.
2. **Fill in the report details.** Enter who submitted the report, the manager it goes to, an optional employee ID and department, the reporting period, and the currency. The report number auto-fills as ER-10001 and stays fully editable.
3. **Add your expenses.** For each cost, add a row with the date, category, description, merchant, and amount. Use the Mileage category to log miles and let the tool calculate the amount for you.
4. **Pick a template and style.** Choose from 20 templates, spanning clean, corporate, elegant serif, ledger, dark, and vibrant looks. Then set an accent color, a font, and your date format.
5. **Download.** Export a print-ready PDF for US Letter, a crisp PNG, or a CSV that opens in Excel and Google Sheets.

The live preview updates as you type, so the report you see is the report you download.

## What to include on an expense report

A good expense report is easy to scan and quick to approve. Include these parts.

- **Company name and logo.** Put your employer at the top so the report is clearly tied to the business.
- **Who submitted it and their manager.** The approver needs to know whose costs these are and who signs off.
- **A report number and reporting period.** These make the report easy to file and match to a trip or month.
- **Line items with a category.** Each expense needs a date, a category, a description, a merchant, and an amount. Categories let you total by type.
- **Mileage, if you drove.** Log the miles and let the rate do the math instead of adding up receipts by hand.
- **A subtotal, cash advance, and reimbursement due.** These three figures tell the approver exactly what to pay.
- **An approval and signature line.** A place to sign turns the sheet into an official reimbursement record.

## Expense categories that cover most trips

The generator ships with the categories most companies use: Airfare, Lodging, Meals & Entertainment, Ground Transport, Mileage, Fuel, Office Supplies, Client/Marketing, and Other. Each category rolls up into a summary so you and your approver can see, for example, that lodging was \$324.00 and meals were \$126.40 at a glance. Grouping by category also makes the report easier to code into your accounting software later.

## How mileage reimbursement is calculated

Mileage is one of the most common expense claims, and it is easy to get wrong by hand. Pick the Mileage category on a row and enter the miles you drove. The tool multiplies the miles by the mileage rate you set at the top of the report. So 48 miles at a rate of \$0.67 per mile becomes \$32.16, added straight into your subtotal. You can change the rate to match your company policy or the current IRS business rate. Nothing is rounded away, so the numbers always add up.

## How the totals work

The math is simple and always visible.

- **Subtotal** is the sum of every line item, including mileage.
- **Cash advance** is any money the company paid you before the trip.
- **Reimbursement due** is the subtotal minus the cash advance.

If you were given a \$150 advance and spent \$1,050, the reimbursement due is \$900. If the advance was larger than what you spent, the figure goes negative, which means you owe the balance back to the company. Blank amounts never break the total, so a half-finished report still shows a clean number.

## Expense report vs invoice vs receipt

These three documents get mixed up often, but they do different jobs.

- An **expense report** is internal. An employee or contractor uses it to claim back money they already spent for the company, grouped by category with an approval line.
- An **invoice** is external. A seller sends it to a customer to request payment for goods or services.
- A **receipt** is proof of a single payment. You attach receipts to an expense report as evidence for each line.

Use the expense report to get reimbursed, an invoice to get paid by a client, and a receipt to prove a purchase happened.

## Expense report template for Excel and printing

Many people search for an **expense report template excel** file or a **printable expense report template**. This tool covers both without the fragile formulas of a spreadsheet. Export the CSV to open your line items in Excel, Google Sheets, or Numbers, where you can sort and filter them. Export the PDF for a printable version that fits US Letter paper, ready to sign and file. Because the report is generated fresh each time, you never fight with a broken template or a stray formula.

## Tips for a report that gets approved fast

- **Be specific in the description.** "Client dinner, 3 people" is easier to approve than "food".
- **Match the merchant to the receipt.** Approvers cross-check merchant names against attached receipts.
- **Keep the period tight.** One trip or one month per report is easier to review than a mixed pile.
- **Round nothing yourself.** Enter the exact amount from the receipt and let the tool total it.
- **Use mileage instead of fuel when you drove your own car.** Most policies reimburse mileage, not gas, for personal vehicles.

## Frequently asked questions

### What is an expense report?

An expense report is a document that lists the business costs an employee or contractor paid out of pocket, so the company can review and reimburse them. Each line shows the date, category, description, merchant, and amount. Totals roll up by category and end in a reimbursement due figure. Companies keep expense reports for bookkeeping, budgeting, and tax records.

### How do I make an expense report with this generator?

Add your company name and logo, fill in who submitted the report and their manager, then add a line for each expense with its date, category, description, merchant, and amount. Add a Mileage row and the tool multiplies your miles by the rate. Pick one of the 20 templates, set an accent color, font, and date format, then download a PDF, PNG, or CSV. The preview updates as you type.

### Is this expense report template really free with no watermark?

Yes. It is 100% free with no signup and no watermark on any export. You can create and download as many expense reports as you like as a print-ready PDF, a PNG, or a CSV. Your data never leaves your browser because the whole tool runs client-side.

### How does the mileage reimbursement work?

Choose the Mileage category on any row and enter the miles you drove. The tool multiplies the miles by the mileage rate, which you can edit at the top of the report details. The default rate follows the common IRS-style business rate, but you can set any rate your company uses. The computed amount flows into the subtotal and the category summary automatically.

### Can I import expenses from a spreadsheet or Excel?

Yes. Use the CSV import to upload a file with Date, Category, Description, Merchant, and Amount columns, and the rows populate the table instantly. Download the sample CSV first to see the exact format. You can also paste tabular lines straight from Excel or Google Sheets, and the Export CSV button gives you a spreadsheet-ready copy back.

### What is the difference between an expense report and an invoice?

An expense report is an internal reimbursement document. An employee or contractor uses it to claim back money they already spent on the company's behalf, grouped by category with an approval line. An invoice is an external billing document that a seller sends a customer to request payment for goods or services. Use the expense report to get reimbursed and an invoice to get paid by a client.

### How is the reimbursement due calculated?

The tool adds every line item to get a subtotal, including any mileage rows. It then subtracts the cash advance you enter, which is money the company already paid you before the trip. The result is the reimbursement due, the net amount the company still owes you. If the advance is larger than the subtotal, the figure goes negative, meaning you owe money back.

### Can I use this for a non-profit or a printable expense report?

Yes. The tool works for any organization, including non-profits, freelancers, and small businesses. Add your categories, fill in the line items, and pick a clean template. The PDF prints cleanly on US Letter paper, so you get a printable expense report you can sign, scan, or file with your accounting records.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Facebook Ads Profit Calculator & ROAS Forecaster

Forecast your ad performance with our free **Facebook ads cost calculator**. Use real industry benchmarks, interactive sliders, and our built-in **Facebook ads budget calculator** to see your ROAS, CPA, and net profit instantly. Free, no signup.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Use This Facebook Ads Calculator

[![Watch How It Works](https://img.youtube.com/vi/VeRDHcIqg1U/maxresdefault.jpg)](https://youtu.be/VeRDHcIqg1U)

This quick video walkthrough shows how to forecast your ad performance. You will learn to set your budget and adjust the sliders. You will instantly see your ROAS, CPA, and net profit using our free calculator.

Understanding your ad funnel is key to calculating profitability. The journey starts with Impressions and Clicks, leads to Conversions, generates Gross Revenue, and finally results in Net Profit.

1. **Clicks**: The number of people who visit your website from the ad.
2. **Conversions**: The number of visitors who make a purchase or become a lead.
3. **Gross Revenue**: The total money generated before any costs.
4. **Net Profit**: The final amount left after deducting ad spend and product costs.

## The Formulas Behind the Calculator

Here is exactly how this tool calculates each metric. You can follow along step by step.

### Clicks and Conversions

- **Total Clicks ($TC$)**: How many people visit the website.

$$
TC = \frac{\text{Budget}}{\text{CPC}}
$$

- **Total Conversions ($TCon$)**: How many customers actually buy.

$$
TCon = TC \times \frac{\text{Conversion Rate}}{100}
$$

- **Cost Per Acquisition ($CPA$)**: How much it costs in ad spend to get one customer.

$$
CPA = \frac{\text{Budget}}{TCon}
$$

### Revenue and Profit

- **Gross Revenue ($GR$)**: Total money generated before any costs.

$$
GR = TCon \times \text{AOV}
$$

- **Return on Ad Spend ($ROAS$)**: The efficiency of the ad spend. How many dollars you earn for every dollar spent on ads.

$$
ROAS = \frac{GR}{\text{Budget}}
$$

- **Total Product Costs ($TPC$)**: The cost to produce and ship the sold inventory.

$$
TPC = GR \times \frac{\text{COGS}}{100}
$$

- **Net Profit ($NP$)**: The final money left in your pocket.

$$
NP = GR - \text{Budget} - TPC - \text{Agency Fees}
$$

- **True Net ROI ($Net ROI$)**: The true percentage return on your total investment, including ad spend, product costs, and agency fees.

$$
Net ROI = \left( \frac{NP}{\text{Budget} + TPC + \text{Agency Fees}} \right) \times 100
$$

- **Gross Profit Per Sale ($GPPS$)**: How much profit you keep from each individual sale, after subtracting product costs and your cost to acquire that customer.

$$
GPPS = \text{AOV} - \left(\text{AOV} \times \frac{\text{COGS}}{100}\right) - CPA
$$

## What is ROAS and Why Does It Matter?

Return on Ad Spend (ROAS) is the core profit signal for any Facebook campaign. It tells you how many dollars of revenue each dollar in Meta Ads Manager brings back, so it is the fastest way to judge whether a campaign is carrying its weight before you scale the budget.

On Facebook, ROAS swings with auction competition, audience size, and creative fatigue. A broad prospecting campaign on the Facebook feed usually returns a lower ROAS than a tight retargeting campaign, so judge each campaign against its own job, not a single store-wide number.

- **Break-Even ROAS ($ROAS_{BE}$)**: The minimum ROAS where a Facebook campaign stops losing money. If your product margin is 50%, your break-even ROAS is 2.0x. Below it, more Facebook spend means more loss; above it, scaling adds profit.

$$
ROAS_{BE} = \frac{1}{1 - \frac{\text{COGS}}{100}}
$$

- **Good ROAS on Facebook**: Anything above your break-even is profitable. Many ecommerce brands treat 2.5x to 4.0x as the healthy range on Meta prospecting, with retargeting often higher. To model break-even and target ROAS on their own, away from a budget, use our dedicated [ROAS Calculator](/tools/roas-calculator).

## What is Break-Even CPA?

Break-Even CPA ($CPA_{BE}$) is the most you can pay Facebook to acquire one customer before the sale turns unprofitable. It is your hard ceiling for cost per result when you set bid caps or read your Meta Ads Manager reports. If your Average Order Value is \$80 and your Cost of Goods is 30%, your Break-Even CPA is \$80 x (1 - 0.30) = \$56. Keep Facebook's cost per purchase under \$56 and each sale profits; let it drift above and you lose money on every order.

$$
CPA_{BE} = \text{AOV} \times \left(1 - \frac{\text{COGS}}{100}\right)
$$

This tool calculates your Break-Even CPA automatically, so you know the exact cost-per-result ceiling to watch in your Facebook campaigns.

## Facebook Ads Benchmarks by Industry (2026)

Our tool uses real-world industry averages to help you forecast performance. Here are some baseline metrics:

| Industry            | Cost Per Click (CPC) | Conversion Rate (CR) | Average Order Value (AOV) | Cost of Goods (COGS) |
| ------------------- | -------------------- | -------------------- | ------------------------- | -------------------- |
| Fashion & Apparel   | \$0.45 - \$1.07      | 1.57% - 4.11%        | \$75.00                   | 30%                  |
| B2B SaaS / Software | \$1.92 - \$2.50      | 2.31% - 7.72%        | \$120.00                  | 15%                  |
| Real Estate         | \$0.65 - \$1.88      | 8.78% - 10.68%       | \$3,000.00                | 5%                   |
| General E-commerce  | \$0.70               | 1.57% - 3.26%        | \$50.00                   | 40%                  |
| Health & Wellness   | \$0.81 - \$1.90      | 7.10% - 14.29%       | \$90.00                   | 25%                  |

Select your industry from the dropdown and the tool fills in a typical baseline from these ranges for you. You can always override them with your own numbers.

## Example: \$5,000 E-commerce Ad Budget

Let's walk through a real scenario using standard e-commerce numbers.

- **Inputs**: Budget = \$5,000 | CPC = \$1.25 | Conversion Rate = 2.5% | AOV = \$80 | COGS = 30%
- **Step 1**: Clicks = \$5,000 / \$1.25 = 4,000 clicks.
- **Step 2**: Conversions = 4,000 x 0.025 = 100 sales.
- **Step 3**: CPA = \$5,000 / 100 = \$50 per sale.
- **Step 4**: Gross Revenue = 100 x \$80 = \$8,000.
- **Step 5**: ROAS = \$8,000 / \$5,000 = 1.6x.
- **Step 6**: Product Costs = \$8,000 x 0.30 = \$2,400.
- **Step 7**: Net Profit = \$8,000 - \$5,000 - \$2,400 = **\$600**.
- **Step 8**: Profit Per Sale = \$80 - (\$80 x 0.30) - \$50 = **\$6.00**.

With a \$5,000 monthly ad budget, this store would earn \$600 in net profit and a 1.6x ROAS. Try changing the conversion rate from 2.5% to 3.5% and watch the profit jump significantly.

## How to Use Reverse Budgeting for Facebook Ads

Most calculators ask for your budget first. Reverse budgeting takes a "Goal-First" approach.

1. Set your **Net Profit Goal**.
2. The tool works backward using industry benchmarks.
3. It shows exactly how much ad spend, clicks, and sales you need to hit that goal.

If the result is negative, your product margins are too low for current ad costs. You may need to increase prices or improve conversion rates.

![Reverse budgeting results in Profit to Budget mode showing required ad spend, required clicks, required sales, expected ROAS, and net profit goal](/images/tools/facebook-ads-calculator/reverse-budgeting-results.webp)

### The Reverse Budgeting Formula

The tool calculates how much net profit each sale generates after ad costs and product costs. Then it figures out how many sales you need to reach your goal. Finally, it works backward to find the total ad spend required.

1. **Profit Per Sale**:

$$
\text{Profit Per Sale} = \text{AOV} \times \left(1 - \frac{\text{COGS}}{100}\right)
$$

2. **Ad Cost Per Sale**:

$$
\text{Ad Cost Per Sale} = \frac{\text{CPC}}{\text{Conversion Rate} / 100}
$$

3. **Net Margin Per Sale**:

$$
\text{Net Margin Per Sale} = \text{Profit Per Sale} - \text{Ad Cost Per Sale}
$$

4. **Sales Needed**:

$$
\text{Sales Needed} = \frac{\text{Profit Goal}}{\text{Net Margin Per Sale}}
$$

5. **Required Ad Spend**:

$$
\text{Required Ad Spend} = \text{Sales Needed} \times \text{Ad Cost Per Sale}
$$

If the Net Margin Per Sale is zero or negative, it means each sale costs more in ads than it earns in profit. The tool will show a warning and suggest increasing your price or conversion rate.

## The "What-If" Slider: Test Scenarios in Real Time

Instead of typing numbers into a form and hitting a submit button, this tool uses interactive sliders. Drag your Conversion Rate from 1% to 5% and watch your profit change instantly on the chart.

![Facebook ads calculator results dashboard showing key metrics, a spend vs revenue vs profit chart, break-even ROAS, and max CPA](/images/tools/facebook-ads-calculator/results-dashboard.webp)

This makes it easy to answer questions like:

- "What happens if I double my conversion rate?"
- "How much more profit do I make if I raise my AOV by \$20?"
- "At what CPC do my ads stop being profitable?"

Every time you move a slider, the tool recalculates all metrics and updates the visual chart in real time. No page reloads, no waiting.

## How This Tool Is Different

Most Facebook ads calculators on the market are static forms. Tools from HubSpot, Elementor, Convoboss, and AdEspresso require you to already know your CPC, conversion rate, and other metrics. If you are a beginner or small business owner who does not know those numbers, those tools are useless.

This tool solves that problem in three ways:

1. **Pre-loaded benchmarks**: Select your industry and the tool fills in realistic CPC, conversion rate, AOV, and COGS values based on real-world Meta advertising data. No guessing required.
2. **Reverse budgeting**: Instead of asking "What is your budget?", this tool asks "How much profit do you want?" and works backward to find the exact ad spend you need.
3. **Interactive sliders**: Drag any metric up or down and watch your profit forecast change in real time on a visual chart. No submit buttons, no page reloads.

## FAQ

### How much should I spend on Facebook ads?

Your budget depends on your profit goals and Cost Per Acquisition (CPA). Use the reverse budgeting feature in our **Facebook ads budget calculator** to find the exact spend required to hit your desired net profit.

### What is a good ROAS for Facebook ads?

A good ROAS depends on your margins, not an industry average. With a 50% margin, 2.0x breaks even and anything higher profits. On Facebook, broad prospecting campaigns often run 2.0x to 3.0x while retargeting can clear 5x or more, so blend them when you judge account-wide performance. Compare each campaign to your own break-even ROAS, which our [ROAS Calculator](/tools/roas-calculator) works out from your margin.

### How do I calculate my Facebook ads ROI?

While ROAS only looks at ad spend, ROI includes all business expenses. Calculate ROI by subtracting total costs from total revenue, then dividing by total costs. Using a dedicated **Facebook ads roi calculator** like ours gives you a clear picture of your true net earnings.

### What is Cost Per Acquisition (CPA)?

CPA is how much it costs in ad spend to get one new customer. You calculate it by dividing your total ad spend by the total number of conversions.

### How do I reduce my Facebook ad costs?

You can lower ad costs by improving your ad creative to get a higher Click-Through Rate (CTR). You can also optimize your landing page to boost your Conversion Rate. Targeting the right audience and testing different ad formats also helps reduce your Cost Per Click (CPC).

### What is the difference between ROAS and Net ROI?

ROAS only compares revenue to ad spend, so a 3.0x ROAS means you earned \$3 for every \$1 of ads. Net ROI is the true percentage return on your total investment, including ad spend, product costs, and agency fees. ROAS can look healthy while your Net ROI is negative if your margins or fees eat the profit. This calculator shows both so you see the full picture.

### How do agency or management fees affect my profit?

Agency and management fees are fixed monthly costs that come out of your profit before anything else. The calculator subtracts them after ad spend and product costs, so your Net Profit and Net ROI reflect the real money you keep. Even a strong ROAS can turn unprofitable once a large retainer is added, which is why it pays to model the fee directly.

### What is gross profit per sale?

Gross profit per sale is how much money you keep from a single order after product costs and the ad cost to acquire that customer. The formula is AOV minus product cost minus Cost Per Acquisition (CPA). It is the clearest way to check your unit economics, because a sale that looks profitable on revenue can lose money once acquisition costs are included.

### How many sales do I need to break even on Facebook ads?

You break even when your gross profit per sale covers your ad cost per sale. Use the reverse budgeting mode to set a profit goal of \$0, and the tool shows the exact number of sales, clicks, and ad spend needed to break even with your current margins and CPC.

### What is a good Cost Per Acquisition (CPA) for Facebook ads?

A good CPA is any amount below your Break-Even CPA, which equals your AOV times your profit margin. For example, an \$80 order with a 30% product cost has a Break-Even CPA of \$56, so a CPA under \$56 is profitable. Lower is always better, but the right target depends on your margins, not an industry average.

### What is the minimum budget to start with Facebook ads?

There is no hard minimum, but most small businesses start between \$10 and \$50 per day to gather enough data for Meta to optimize delivery. Use the calculator to enter a small daily budget and see how many clicks and sales it should produce before committing more. The reverse mode also tells you the minimum spend needed to hit a specific profit goal.

### Is this Facebook ads calculator accurate?

The calculator uses the same math agencies use, so the formulas are exact for the numbers you enter. Real campaign results vary because CPC, conversion rate, and AOV change over time. Start with the industry benchmarks built into the tool, then replace them with your own ad account data for the most accurate forecast.

### Can I use this as a Facebook in-stream ads earning calculator?

Yes! While built for general campaigns, you can easily adapt it as a **Facebook in-stream ads earning calculator** or a **Facebook in-stream ads roi calculator** by inputting your specific video CPMs and conversion data to forecast your true return on video ad investments.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (-). Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Gas Receipt Generator - Create Fuel & Gas Station Receipts

Need a gas receipt for a mileage claim or an expense report? PinFlow's **free gas receipt generator** creates a realistic fuel station receipt in seconds. Add the gallons, price per gallon, pump number, and card details, then download a PDF or PNG. No signup required.

## How to Make a Gas Receipt

[![Watch How It Works](https://img.youtube.com/vi/NXLugEEy7fk/maxresdefault.jpg)](https://youtu.be/NXLugEEy7fk)

![Example thermal receipt made with the free gas receipt generator](/images/tools/gas-receipt-generator/gas-receipt-example.webp)

1. **Add the station**: Enter the fuel station name, address, and phone.
2. **Add the fuel line**: Write the grade, gallons, and price per gallon on one item line.
3. **Set the price**: Enter the total fuel cost as the line amount.
4. **Add card details**: Pick Credit Card and enter the last 4 digits.
5. **Add a pump or transaction note**: Use the footer for the pump number or station ID.
6. **Download**: Save the gas receipt as a PDF or PNG, or print it.

## What a Gas Station Receipt Includes

A real fuel receipt usually lists:

- **Station name and location**: The brand and the street address.
- **Date and time**: When you filled up.
- **Fuel grade and gallons**: For example, Unleaded 87 at 10.45 gallons.
- **Price per gallon and total**: The pump rate and the final fuel cost.
- **Payment method**: Cash or card, often with the last 4 digits.
- **Pump and transaction numbers**: Printed at the bottom of most receipts.

## Why Use a Fuel Receipt Maker?

- **Mileage claims**: Reimburse fuel costs for work travel.
- **Fleet and delivery drivers**: Keep clean fuel records.
- **Tax records**: Track deductible vehicle expenses.
- **Lost receipts**: Recreate a fuel receipt you misplaced at the pump.

## Gas Receipt Generator FAQ

**Is the gas receipt generator free?**
Yes. Create and download fuel receipts for free, with no signup and no watermark.

**Can I show gallons and price per gallon?**
Yes. Put the grade, gallons, and price per gallon in the item name, and the total fuel cost as the amount.

**Can I add transaction codes?**
Yes. Turn on transaction codes in the template options to print TRANS, MCC, and AUTH numbers like a real pump receipt.

**What formats can I download?**
You can download a PDF or a PNG, or print the gas receipt from your browser.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Gift Certificate Template Maker
description: Make a printable gift certificate free. Pick a template, add your logo, amount, and a unique code, then download a PDF, PNG, or SVG.
---

# Free Gift Certificate Template Maker

Create a polished, printable **gift certificate template** in minutes. Add your business name, your logo, the gift amount, a recipient, and a unique code, then download a free PNG, SVG, or print-ready PDF. It is built for small businesses, Shopify stores, salons, restaurants, and anyone who wants to sell or gift store credit. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Make a Gift Certificate

[![Watch How to Make a Gift Certificate](https://img.youtube.com/vi/PHHLem8Ye1o/maxresdefault.jpg)](https://youtu.be/PHHLem8Ye1o)

A quick walkthrough showing how to pick a template. Add your business name and logo. Set the gift amount and a unique code. Download a print-ready PNG, SVG, or PDF. It is completely free. No sign-up is required.

![Free gift certificate maker editor with a navy and gold \$50 gift certificate preview, showing the recipient, sender, unique code, expiry date, and PNG, PDF, and SVG download buttons](/images/tools/gift-certificate-generator/gift-certificate-example.webp)

Making a **free gift certificate template** takes about a minute. Here is how to use the maker above:

1. **Enter your business name**: This sits at the top of the certificate. Add your logo too if you have one.
2. **Add the recipient and sender**: Fill in the "To" and "From" fields so it reads like a real gift.
3. **Set the gift amount and currency**: Type the value, then pick your currency. The symbol updates in the preview.
4. **Generate a unique code**: Click Generate to create a code like GIFT-AB12-CD34. You can edit it or type your own.
5. **Choose an expiry date**: Set a date, or switch on "No expiry" to hide it.
6. **Add a personal message**: A short note makes the gift feel thoughtful. This is optional.
7. **Pick a template, colors, and font**: Choose from 12 occasion designs, set a color theme, and select a font.
8. **Download**: Export a PNG, an SVG, or a print-ready PDF. Print it at home or email it to the recipient.

The live preview updates as you type, so you always see the final result before you download.

## What to Include on a Gift Certificate

A clear **printable gift certificate template** has a few standard parts. Include these so the certificate is easy to read and easy to redeem:

- **Business name and logo**: So the recipient and your staff know where it is valid.
- **The words "Gift Certificate"**: Make the purpose obvious at a glance.
- **The gift amount**: Show the value clearly, for example \$50. This is the largest element on most designs.
- **Recipient and sender**: The "To" and "From" lines personalise the gift.
- **A unique code**: This is how you track and validate redemptions. One code per certificate.
- **An expiry date**: Optional, but it protects your cash flow. Check your local rules first, since some places limit or ban expiry on gift cards.
- **Terms and conditions**: A short line like "not redeemable for cash, one-time use only" sets expectations.

The tool prefills sensible terms for you, and you can edit every field.

## Gift Certificate vs Gift Voucher

People use these terms in different ways, so it helps to know the difference. A **gift certificate** usually carries a set cash value that the recipient can spend on anything in your store. A **gift voucher template** often refers to a specific product, service, or discount, such as "one free haircut" or "20% off your next order".

In practice the two overlap, and many businesses use the words to mean the same thing. This maker can produce either. For a cash-value gift, fill in the amount field. For a service or product gift, put the offer in the personal message and leave the amount blank or set it to the service value.

## Sizes and Printing Tips

The certificate is a landscape design sized to fill a **US Letter** page, which is 11 by 8.5 inches. That makes it easy to print at home or at any print shop. Here are a few tips for clean prints:

- **Use the PDF for printing**: The PDF places the certificate full-page in landscape, ready to print without resizing.
- **Use the PNG for email and screens**: The PNG is high resolution, so it stays crisp on phones and in email.
- **Print on heavier paper**: Card stock around 200 to 300 gsm feels more like a real gift card than plain printer paper.
- **Trim to a half-sheet**: If you want a smaller card, print two per page or trim the printed page in half.
- **Check your margins**: Set your printer to "fit to page" or "actual size" and turn off any extra scaling so the design is not cut off.

The SVG export is a vector file. It scales to any size without blur, which is handy if a printer asks for a vector format.

## Christmas and Holiday Gift Certificate Ideas

A **christmas gift certificate template** is one of the easiest ways to capture last-minute holiday shoppers. Pick the Festive template, choose a red or green color theme, and add a short holiday message. A few ideas:

- **Sell them in-store and online**: A printable certificate is instant, so it works even on December 24th.
- **Bundle with a product**: Add a small gift certificate to an order as a thank-you that brings the customer back in January.
- **Offer a bonus**: For example, "Spend \$50, get a \$10 gift certificate". This lifts your average order value.
- **Match your branding**: Upload your logo and set custom colors so it looks like part of your shop, not a generic template.

## Gift Certificate Ideas by Industry

Different businesses use gift certificates in different ways. The maker includes templates tuned for these niches.

### Restaurants and Cafes

Use the Restaurant template for a dining gift certificate. Set a cash value, like \$25 or \$50, that covers a meal for one or two. Add a line such as "valid for dine-in and takeout" in the terms. Restaurant gift certificates are popular for birthdays, anniversaries, and corporate thank-you gifts.

### Spa and Salon

The Spa & Salon template uses a calm, airy layout. You can sell a cash-value certificate, or use the message field to gift a specific service such as "one 60-minute massage". Salon and spa gifts sell strongly around Mother's Day, Valentine's Day, and the holidays.

### Fitness, Studios, and Coaches

Gyms, yoga studios, and personal trainers can gift a number of classes or a block of sessions. Put the offer in the message, for example "5-class pass", and add an expiry so unused passes do not sit on your books forever. A unique code lets you track who redeems what.

## Gift Certificate Ideas for Shopify Merchants

If you run a Shopify store, a printable gift certificate is a quick win that you can launch today without an app. A few ways to use it:

- **Sell store credit**: Offer set amounts like \$25, \$50, and \$100, and email the buyer a PDF after checkout.
- **Run a promo**: Pair a gift certificate with a campaign, such as a giveaway prize or a loyalty reward.
- **Drive repeat purchases**: A gift certificate gives the recipient a reason to visit your store, and many spend more than the certificate value.
- **Keep your branding consistent**: Add your logo, brand colors, and font so the certificate matches the rest of your store.

When you are ready to scale, you can move to native Shopify gift cards for automatic balance tracking. The codes you generate here help you keep things organised until then.

## Frequently asked questions

### Is this gift certificate generator free?

Yes, it is 100% free with no signup. Make and download as many gift certificates as you want as PNG, SVG, or PDF files.

### How do I make a gift certificate?

Pick a template, add your business name, logo, the gift amount, a recipient, and a unique code, then download it as a PDF or PNG. The live preview updates as you type.

### Can I print the gift certificate?

Yes. Download the PDF for a print-ready landscape US Letter page, or download a high-resolution PNG. Both fit a standard 8.5 by 11 inch sheet.

### What size is the gift certificate?

The certificate is a landscape design sized to fill a US Letter page (11 by 8.5 inches). It also prints cleanly trimmed to a half-sheet if you prefer a smaller card.

### Do I need to add a unique code?

It is recommended. Click Generate to create a code like GIFT-AB12-CD34, then track redemptions against it. You can edit the code or type your own.

### What is the difference between a gift certificate and a gift voucher?

They are mostly the same thing. A gift certificate usually carries a set cash value to spend in your store, while a gift voucher often refers to a specific product, service, or discount. This tool can make either.

### Can I add my own logo and colors?

Yes. Upload your logo, choose a color theme or set custom accent and text colors, and pick a font. Everything you change appears in the preview and the exported file.

### Does the gift certificate have an expiry date?

You choose. Set an expiry date, or switch on No expiry to hide the date from the certificate entirely.


---

<!--
Writing rules for this article:
- No em dashes anywhere. Use a regular hyphen.
- Short, plain sentences.
- Escape any literal dollar sign as \$ (remark-math).
- The first "## " heading is where page.tsx starts slicing the blog body.
- Keep everything gift-tag specific: making, printing, cutting, occasions, sizes.
-->

---
title: How to Make and Print Gift Tags (Free Template Maker)
description: A step-by-step guide to designing, printing, and cutting your own gift tags for any occasion, plus sizes, shapes, and bulk mail-merge tips.
---

## Make your own gift tags in minutes

[![Watch how the free Gift Tag Maker works](https://img.youtube.com/vi/H1-1Ym2_a0Q/maxresdefault.jpg)](https://youtu.be/H1-1Ym2_a0Q)

A gift tag is the small decorative label you tie or stick onto a wrapped
present. It carries an occasion greeting like Merry Christmas or Happy Birthday,
a To and From line, and sometimes a short message. This free gift tag maker lets
you design one and download it as a PNG, PDF, or SVG, or print a whole sheet of
personalized tags at once. There is no signup and no watermark.

Everything runs in your browser. Your names, photos, and logos never leave your
computer.

## How to make a gift tag

1. Type the occasion heading. This is the big greeting on the tag, such as
   Merry Christmas, Happy Birthday, Thank You, or Congratulations.
2. Add the To and From names. Leave either one blank and it simply disappears
   from the tag, so there is never an empty gap.
3. Write an optional short message, like With all our love or Enjoy.
4. Pick one of the 20 templates. Each one applies its own color theme, so you
   get a finished look with one click.
5. Choose a tag shape and a real-unit size, then download.

The live preview updates as you type, so you always see the finished tag before
you print it.

## Choose a tag shape

Gift tags come in more than one shape, and the shape you pick changes the whole
feel of the tag. This maker offers six cuts:

- Rectangle: the simple, classic label.
- Rounded: soft corners for a friendly look.
- Classic swing tag: the traditional shape with chamfered top corners and a real
  punch hole near the top. Thread twine or ribbon through the hole and tie it to
  the gift.
- Scalloped: a decorative bumpy edge that suits boutique and wedding tags.
- Circle: a round tag, great for stickers and seals.
- Heart: a sweet shape for Valentine's Day, weddings, and thank-you notes.

The punch hole on the classic swing tag shows in the preview and in every
exported file, so you know exactly where to make the hole with a hole punch.

## Gift tag sizes

Printing at the right size matters, especially if you plan to buy pre-cut tag
blanks or matching envelopes. The size presets use real inches:

- Classic swing tag: 2 by 3.5 inches. The most common gift tag size.
- Square: 2.5 inches or 2 inches. Modern and tidy.
- Mini tag: 2.75 by 1.5 inches. Good when you want many small tags on one page.
- Circle: 2.5 inches across.

You can also set a custom width and height in inches. When you download the PDF,
the page is sized to the tag's true dimensions, so it prints one to one as long
as you set the printer scale to 100% and turn off fit to page.

## Print and cut your gift tags

1. Download the PDF for the crispest print, or the PNG if you prefer an image.
2. Open the file and print at 100% scale on card stock. Card stock holds up
   better than plain paper and is easier to tie onto a gift.
3. Cut along the edge of each tag. For the classic swing tag, punch the hole
   with a standard hole punch where the printed hole sits.
4. Thread twine, baker's string, or thin ribbon through the hole and knot it.

Card stock between 200 and 300 gsm works well. If your printer struggles with
thick stock, print on regular paper and glue it to a cereal-box backing.

## Bulk print a whole sheet of tags

The bulk mode is the fastest way to make gift tags for a long list, like a
class party, a wedding, or a holiday gift haul. Instead of designing each tag by
hand, you design once and mail-merge the names.

1. Switch to Bulk mode.
2. Paste your recipient list, one name per line, or import a CSV with To, From,
   Message, and Occasion columns.
3. The shared occasion, From, and message you set in the form apply to every
   tag. Only the recipient name changes per tag.
4. Pick your paper (A4 or US Letter) and the tag size on the sheet.
5. Download the sheet as a PDF, with one page per sheet and dashed cut guides,
   or as PNG files.

A CSV lets you give each person a different message or occasion too. Any row
missing a required name is skipped, so a stray blank line will not break the
sheet. You can download a sample CSV template from inside the tool.

## Ideas for every occasion

- Christmas and the holidays: kraft and twine, red holly, winter snowflakes,
  buffalo plaid, or black and gold Noel.
- Birthdays: bright confetti and bold type.
- New baby: soft pastel blue and pink tags for showers and welcome gifts.
- Weddings: ivory and gold with an elegant monogram or interlocking rings.
  For destination weddings, the [luggage tag maker](/tools/luggage-tag-generator)
  has a Wedding Favor template.
- Thank you and congrats: blush script and celebratory coral bursts.
- Everyday and boho: minimal, watercolor, eucalyptus greenery, rustic burlap,
  and terracotta arches.

## For shops: branded thank-you tags

Store owners can use the Branded Thank You template to tuck a small logo tag into
every order. Add your logo, keep the thank you for your order line, and print a
sheet in bulk. It is a low-cost way to make a shipment feel personal and to
remind customers who you are. Pair it with a packing slip and a discount code
for the next order.

## Tips for better gift tags

- Keep the message short. One line reads best on a small tag.
- Match the tag font and color to your wrapping paper or ribbon.
- Round or scallop the corners for a softer, more finished look.
- Print a test tag first to check the size and colors before you print the whole
  sheet.
- Save the SVG if you want to tweak the tag later in a vector editor.

## Frequently asked questions

### Is this gift tag maker free?

Yes, it is 100% free with no signup and no watermark. Design and download as
many gift tags as you want as PNG, PDF, or SVG files.

### How do I make a gift tag?

Pick a template, type the occasion (like Merry Christmas or Happy Birthday), a To
and From name, and an optional short message. Choose a tag shape and size, then
download. The live preview updates as you type.

### What size are gift tags and can I print them?

Yes. The tool uses real-unit sizes including the classic 2 by 3.5 inch swing tag,
2.5 inch and 2 inch squares, a 2.75 by 1.5 inch mini tag, and a 2.5 inch circle.
Download the PDF and print at 100% scale (no fit-to-page) so tags come out at
their true size, then cut them out.

### Can I make a classic swing tag with a punch hole for string?

Yes. The tag shape picker includes a classic swing tag shape with a real punch
hole near the top, plus rectangle, rounded, scalloped, circle, and heart shapes.
The punch hole shows in the preview and in every export so you know exactly where
to thread twine or ribbon.

### Can I print a whole sheet of personalized gift tags at once?

Yes. Switch to Bulk mode, paste a recipient list (one name per line) or import a
CSV with To, From, Message, and Occasion columns, and the tool tiles a
personalized tag for each recipient onto an A4 or US Letter sheet with dashed cut
guides. Download it as a PDF (one page per sheet) or PNG.

### What occasions do the gift tag templates cover?

There are 20 templates across holidays (Christmas, winter, plaid, gold Noel,
kraft), occasions (birthday, baby shower, wedding, thank you, congrats), styles
(minimal, monogram, bold, watercolor, eucalyptus, burlap, boho), and a branded
thank-you tag for shipments plus a blank canvas.

### Can I add my own logo, photo, or colors?

Yes. You can upload a logo or photo, pick from 15 color themes or set a custom
accent and text color, and change the font. The Branded Thank You template is
built for store owners who want to tuck a logo gift tag into every order.

### Do the gift tags have a price or a redeem code?

No. A gift tag is purely decorative: an occasion greeting plus To and From names
and an optional message. There is no price, no barcode, and no monetary value. If
you need a dollar-value voucher, use the gift certificate generator instead.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (-). Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Grocery Receipt Generator - Itemized Supermarket Receipts

Make an itemized grocery receipt for your shop, market stall, or household records. Add each item, set the tax and payment, pick a till-roll or A4 template, and download a PDF or PNG. It is free, with no signup and no watermark.

<!-- IMPORTANT: The page shows content from the first "## " heading down. Everything above is dropped. -->

## How to make a grocery receipt

[![Watch How It Works](https://img.youtube.com/vi/NXLugEEy7fk/maxresdefault.jpg)](https://youtu.be/NXLugEEy7fk)

![Sample grocery receipt for a store called Fresh Market, with bananas, milk, eggs, and bread in capitals on an 80 mm till roll](/images/tools/grocery-receipt-generator/grocery-receipt-sample.webp)

The tool opens with a sample grocery receipt already filled in, so you can see the layout before you type. Replace the sample with your own details in five steps.

1. **Pick a template and paper width.** The Classic Sales template is selected, with all-caps text on an 80 mm roll. You can switch to In-Store POS, Branded Logo, or Online Order, and change the paper to 58 mm, 80 mm, or an A4 page. Clicking a template also sets its usual paper width and font.

![Template picker with Classic Sales selected and the paper width set to 80 mm](/images/tools/grocery-receipt-generator/template-and-paper.webp)

2. **Enter the store.** In the **Store** tab, type the store name, street address, city, state, zip code, phone, and website. You can also upload a logo. The tool remembers these details in your browser, so they are filled in next time.

![Store tab with the store name, address, phone, and logo upload fields filled in](/images/tools/grocery-receipt-generator/store-details.webp)

3. **List each item.** In the **Items** tab, add a line for every product with its name, quantity, and unit price. The amount for each line and the subtotal update as you type. Add a percentage or flat discount at the bottom if the shopper used a coupon.

![Items tab with four grocery lines, each with a quantity and unit price, and the running subtotal](/images/tools/grocery-receipt-generator/items-list.webp)

4. **Add the date, tax, and payment.** In the **Details** tab, set the date and time, a receipt number, and the cashier name. Choose a tax label such as Sales Tax and enter the rate. Then pick the payment method, add the card's last 4 digits, or enter the cash handed over to show the change.

![Details tab with the date, sales tax rate, payment method, and amount paid fields](/images/tools/grocery-receipt-generator/details-tax-payment.webp)

5. **Download or print.** Check the live preview, choose PDF or PNG, and click **Download**. The **Print** button opens the PDF in a new tab and starts your browser's print dialog.

![Live preview of the finished grocery receipt with the PDF and PNG options and the Download and Print buttons](/images/tools/grocery-receipt-generator/download-print.webp)

## What a grocery store receipt shows

A grocery or supermarket receipt reads from top to bottom in a fixed order. The receipt this tool makes follows the same order, and each part comes from a field you fill in.

- **Store header.** Your logo, the store name, the street address, the city line, the phone number, and the website. These come from the Store tab.
- **Date and time.** The first line under the header shows the date on the left and the time on the right.
- **Receipt and order numbers.** A receipt number such as R-0001 and an order number such as #1001. Add only the ones you use. Empty fields do not print.
- **Cashier and customer.** The Staff / Cashier field prints as "Staff", and the customer name prints if you add one.
- **Item lines.** Three columns: QTY, ITEM, and AMT. The amount is the quantity times the unit price, so a line of 3 yogurts at \$1.25 shows \$3.75.
- **Subtotal, discount, and tax.** The subtotal of all lines comes first. A discount line follows if you set one. The tax line shows its label and rate, for example Sales Tax (8%).
- **Total.** The grand total in bold, after discount and tax.
- **Payment.** The payment method, with the card's last 4 digits for card payments. For cash, the receipt adds Amount Paid and Change.
- **Barcode.** An optional barcode at the bottom that encodes the order number, or the receipt number if there is no order number.
- **Footer message.** A closing line such as "Thank you for shopping with us!" or your returns policy.

The page opens with a sample grocery receipt for a made-up store called Fresh Market, with bananas, milk, eggs, and bread. Use it as a reference for what goes where, then replace it with your own store.

## Items sold by weight, multi-buys, and coupons

Grocery baskets have a few line types that a plain receipt does not. The tool handles them with the fields it has.

- **Items sold by weight.** To show the weight and the price per pound on the receipt for loose produce or deli items, put them and the price per pound in the item name, such as "Apples 2.4 lb @ 1.49/lb". Then set the quantity to 1 and the unit price to the line total.
- **Multi-buys.** For 6 cans of the same soup, enter one line with a quantity of 6 and the price of one can. The receipt prints 6 in the QTY column and the full amount in AMT.
- **Coupons and store discounts.** The Discount field takes a percentage or a flat amount. It comes off the subtotal, and tax is worked out on the discounted amount, the same order a till uses.
- **Bottle deposits or bag fees.** Add them as their own line, for example "Bag fee" with a quantity of 2.

## Sales tax on a grocery receipt

The tool applies one tax rate to the whole subtotal after any discount. Choose the label that matches your area: Tax, Sales Tax, VAT, GST, HST, PST, Service, or IVA. Then enter the rate as a percentage. If you leave the rate at 0, the tax line does not print.

Food is often taxed differently from other goods, and the rules depend on where you sell. Check the rate your local tax office sets before you print receipts for customers.

If only part of the basket is taxable, the tool cannot tax some lines and skip others. Work out the tax on the taxable items yourself, set the tax rate to 0, and add a line called "Tax on taxable items" with that amount.

## Till roll or A4 page: 58 mm, 80 mm, and A4

The paper width setting controls both the preview and the size of the PDF.

- **80 mm** is the wider thermal till roll (a roll of heat-sensitive paper that a receipt printer marks without ink). It suits a full grocery receipt with many lines. The grocery preset starts here.
- **58 mm** is the narrower roll. Pick it if your receipt printer takes 58 mm paper. Long item names wrap onto a second line.
- **A4** gives a full-page receipt with the Online Order layout. Use it when you email a receipt to a customer or file it with your paperwork.

The downloaded PDF is as wide as the paper you pick, 58 mm, 80 mm, or 210 mm for A4, and as long as the receipt needs. A receipt with 30 items makes a longer PDF, not a smaller font.

Pick a font to suit the look: Courier, Modern, Space, Typewriter, or Dot Matrix. The page opens on Classic Sales in Courier. When you click a template card, it switches to that template's font. Classic Sales switches to Dot Matrix in capitals, which looks like an older supermarket printer. In-Store POS uses Courier in normal case.

## Add your logo and footer

Upload a logo in the Store tab and it prints at the top of every template. The Branded Logo template also adds a colored strip across the top, and you can pick the accent color. Use the footer message for the line you want every customer to see, such as your opening hours or "Returns within 14 days with receipt".

The other switches under the template picker are optional:

- **Show barcode** prints a barcode of the order or receipt number.
- **Signature line** adds a line to sign, with the cardholder name above it if you enter one.
- **Transaction codes** prints sample TRANS, MCC, AUTH, and REF codes made up from the order number (or the receipt number if there is no order number). They are not real card approval codes, so leave this off on a receipt you give to a customer.

## Who uses a grocery receipt maker

This tool makes receipts for your own business and your own records. It does not copy any real chain's receipt.

- **Small food shops and market stalls.** A corner shop, farm stand, or bakery without a till system can hand out a clean itemized receipt.
- **Grocery delivery and personal shoppers.** Give the customer a receipt that lists what you bought for them and what they owe.
- **Household budgeting.** Turn a week of shopping into one tidy record you can file with your budget.
- **Shared kitchens and offices.** Show what was bought for a team pantry or an event, so the cost can be paid back.

## How to make an itemized receipt for other purchases

An itemized receipt lists every item with its quantity and price, instead of one total. The steps above work for any shop. PinFlow also has makers set up for other kinds of purchase:

- The [itemized receipt generator](/tools/itemized-receipt-generator) for general itemized receipts.
- The [gas receipt generator](/tools/gas-receipt-generator) for fuel, with gallons and price per gallon.
- The [pharmacy receipt generator](/tools/pharmacy-receipt-generator) for medicines and health items.
- The [receipt maker](/tools/receipt-generator) for cafes, shops, and online orders.

To split a shared grocery bill between people, use the [order bill splitter](/tools/order-bill-splitter).

## Frequently asked questions

### Is the grocery receipt generator free?

Yes. You can make and download as many grocery receipts as you like for free. There is no signup and no watermark.

### Can I add many items to a grocery receipt?

Yes. Click Add item for each product. There is no item limit. The subtotal, tax, and total update as you type, and the PDF grows longer to fit every line.

### What paper sizes can I use?

You can pick a 58 mm or 80 mm till roll, or an A4 page. The PDF you download is the same width as the paper you pick.

### How do I show produce sold by weight?

To show the weight and the price per pound on the receipt, put them in the item name, such as "Apples 2.4 lb @ 1.49/lb". Set the quantity to 1 and the unit price to the line total.

### Can I add a coupon or discount?

Yes. The Discount field takes a percentage or a flat amount. It comes off the subtotal before tax is added.

### Can the receipt show change for a cash payment?

Yes. Choose Cash as the payment method and enter the amount the customer handed over in the Amount paid field. The receipt prints Amount Paid and Change under the total.

### Can I add my store logo?

Yes. Upload a logo in the Store tab. It prints at the top of every template, and the Branded Logo template adds an accent color strip as well.

### What formats can I download?

You can download a PDF or a PNG, or click Print to open the PDF and print it from your browser.

### Does the tool save my store details?

Yes. Your store name, address, and logo are saved in your browser on this device, so they are filled in the next time you open the page. Nothing is sent to a server.


---

<!--
Writing rules for this file:
- No em dashes anywhere. Use a regular hyphen.
- Escape every currency dollar sign as \$ (remark-math treats a bare $ as math).
- Short, clear sentences. The first `## ` heading is where page.tsx starts slicing.
- The `## Frequently asked questions` answers must match FAQ_ITEMS in page.tsx word for word.
-->

---
title: "Free Hang Tag Template Maker"
description: "Design and print branded hang tags (swing tags) with a real punch hole, barcode or QR code, real-unit sizing, and bulk sheet printing. Free, no signup, no watermark."
---

## Make a hang tag template that looks like it came from a print shop

[![Watch how the free Hang Tag Template Maker works](https://img.youtube.com/vi/Vqk4y2hOXls/maxresdefault.jpg)](https://youtu.be/Vqk4y2hOXls)

A hang tag is the small printed card that swings from a piece of clothing or a
product by a string looped through a punch hole. Shoppers see it before they
ever try the item on. It is your brand handshake, your price, and your care
label all at once. This free hang tag generator lets you design that tag in the
browser, drop in a real scannable barcode or QR code, size it to true printing
dimensions, and download a print-ready file. There is no signup, no watermark,
and no limit on how many tags you make. For the sewn-in label with fibre
content and wash symbols, use the [care label maker](/tools/care-label-generator).
For a shelf or sticker price, use the [price tag maker](/tools/price-tag-generator).

Most hang tag results online are static image galleries or paid template packs
that open in software you may not own. This tool is different. It is a live
editor. You type, the preview updates, and what you see is exactly what prints.
When you are done you can export a single tag or tile dozens of tags onto one
Letter or A4 sheet for a home printer or a local print shop.

## What goes on a hang tag

A good hang tag is small, so every element has to earn its place. The generator
gives you a superset of fields and hides any block you leave empty, so a minimal
boutique tag and a detailed apparel spec tag both look intentional.

- **Brand or store name.** The eyebrow line that anchors the tag to your label.
- **Product name.** The headline. It auto-shrinks so a long name never spills
  outside the cut shape.
- **Price and compare-at price.** Enter a current price and an optional old
  price. The old price is struck through and the tag can show the percent saved.
- **Size, color, and variant.** Quick attributes for apparel and accessories.
- **Material and care.** The fabric composition and washing instructions that
  many apparel tags are legally expected to carry.
- **Country of origin.** A short "Made in" line.
- **SKU and scannable code.** A real barcode or QR code, built from your SKU,
  that scans from the printed tag.
- **Logo and product image.** Upload a brand mark or a product photo.

Specialty templates swap in their own fields. The parking permit template asks
for a permit number, zone, and valid dates. The event pass template asks for a
holder name, role, and date. The monogram template asks for a single initial.
The form only ever shows the fields the selected template actually prints, so no
control is wasted.

## A worked example you can reproduce

Say you run a knitwear label called NORTH LABEL and you are tagging a sweater.

1. Keep the default **Classic Kraft Swing** template.
2. Set the brand to NORTH LABEL and the product to Merino Crew.
3. Enter a price of \$68.00 and a compare-at price of \$85.00.
4. Set the size to M.
5. In the scannable code panel, choose Barcode, pick EAN-13, and enter the SKU
   0123456789012.

The preview now shows the struck \$85.00 next to the current \$68.00, a 20%
saving derived automatically from the two prices, the size, and an EAN-13
barcode that scans back to 0123456789012. Because 0123456789012 already carries
a valid EAN-13 check digit, the barcode renders cleanly and decodes to the exact
value you typed. Export the PDF, print it at 100% scale, and the tag measures a
true 2 by 3.5 inches with the barcode intact.

## Pick the right template

The gallery is grouped into families so you can find a starting point fast.

**Apparel and boutique.** Classic Kraft Swing is the default: a warm kraft tag
with a dashed inner frame and a real punch hole. Minimal Boutique is clean and
type-only. Bold Brand puts an oversized logo or brand lockup at the top.
Clothing and Care lays out size, material, care, and origin as a proper apparel
spec. Jewelry Fold-Over is a tiny narrow tag for a metal and weight line. Luxe
Black is a dark premium look with a gold foil-style accent. Eco Natural adds a
sustainability line for organic or recycled goods. Modern Minimal is a centered
sans layout with a hairline border. Monogram centers a single initial.

**Price and sale.** Price Focus is a big price-forward ticket. Sale Burst puts
the price inside a starburst seal. Was / Now Split contrasts the old and new
price in two stacked cells. Barcode Retail makes the barcode and SKU dominant
for a shelf-ready look. QR Product features a large QR code to your product page
with a short call to action.

**Specialty passes.** Parking Permit is a portrait car hang tag with a mirror
slot. Event / VIP Pass is a lanyard-style pass. **Blank** is a near-empty start
where every block appears only when you fill it.

Every template is fully built with sensible example data, so you can walk the
whole gallery and see exactly what each one prints before you commit.

## Real barcodes and QR codes that actually scan

The scannable code is the feature that turns a pretty card into a working retail
tag. Switch the toggle to Barcode or QR. For barcodes you can choose Code 128
for any text, EAN-13 for international retail, UPC-A for North America, Code 39,
or ITF-14 for cartons. The human-readable digits print under the bars, the way
they do on a real shelf tag. If you enter a value that does not fit the chosen
symbology, the tool tells you instead of rendering a broken code.

The code is generated as a crisp image and baked directly into the PNG, PDF, and
SVG export, so it survives printing and scans from paper. A QR code can point at
a product page, a care guide, or a reorder link, which is a natural way to bridge
a physical tag to your online store.

## Real-unit sizing so the print is true to size

A tag that looks right on screen is useless if it prints at the wrong size. Every
preset here is defined in real inches, and the PDF export is sized to those exact
dimensions. Choose 2 by 3.5 inches for a business-card swing tag, 2 by 3 inches
for a standard tag, 1.5 by 2.5 inches for a mini tag, 1 by 2 inches for a jewelry
fold-over, or 3 by 8.5 inches for a car parking permit. You can also set a fully
custom size. Print the PDF at 100% scale with no fit-to-page and the tag comes
out at its true real-world size, ready to punch and string.

## The punch hole and the mirror slot

A hang tag without a punch hole is just a card. Every classic swing tag in this
tool renders a real round punch hole near the top, drawn as vector art so it
appears in the preview and in every export. The parking permit and event pass
templates render a horizontal mirror slot instead, the wide rounded cut that
slips over a rearview mirror stem or a lanyard clip. Both features are part of the
cut shape, so your print shop can see exactly where to punch or die-cut.

## Print a whole sheet at once with mail merge

Tagging a full collection one card at a time is slow. Bulk mode fixes that. Paste
one product per line, optionally adding a SKU, price, and copies count separated
by commas (Product, SKU, Price, Copies), or import a CSV instead. Set how many
copies of each tag you need and the tool tiles them onto a US Letter or A4 sheet
with cut guides and a punch mark on every tag. The download sample shows the exact
column names the CSV parser understands: brand, product, sku, tagline, price,
compare, size, color, material, care, origin, and copies. Four pasted product
lines tile onto one sheet with a punch mark and cut guides on every tag. If your
run spills onto several pages, the PNG export bundles one image per page in a ZIP
so each prints on its own sheet.

## Hang tag, price tag, or gift tag

These three tags look similar but do different jobs. A hang tag is the branded
product swing tag that hangs on merchandise with a string. A price tag is a shelf
or price label whose job is the price. A gift tag is the decorative To and From
tag you tie onto a present. This tool is built for hang tags. If you need the
other two, the price tag generator and the gift tag generator are one click away
and share the same clean, watermark-free export.

## Tips for a tag that reads well

- Keep the product name to a few words. Long names shrink to fit, but short reads
  better on a small tag.
- Use a compare-at price only when it is genuine. The struck price and the
  derived percent off should be honest.
- Match the theme to the material. Kraft suits natural fibers, black suits
  premium goods, and a clean white suits modern minimalism.
- Test the barcode. Scan the exported file on screen with your phone before you
  commit to a print run.
- For a car permit, use a high-contrast theme so the number is legible from a
  distance through a windshield.

## Frequently asked questions

### Is this hang tag generator free?

Yes, it is 100% free with no signup and no watermark. Design and download as many
hang tags as you want as PNG, PDF, or SVG files, one at a time or as a tiled
printable sheet.

### What is a hang tag?

A hang tag, also called a swing tag or product tag, is the small printed card
that hangs off apparel and merchandise by a string through a punch hole. It
usually carries the brand, product name, price, size, material, care
instructions, and often a barcode or QR code.

### How do I make a hang tag template?

Pick a template, type your brand, product, price, size, and any material or care
details, then choose a real-unit size and download. The live preview updates as
you type. Use Bulk mode to lay many tags onto one printable sheet from a pasted
list or a CSV import.

### How do I add a barcode or QR code to a hang tag?

Switch the scannable code toggle to Barcode or QR. The code is built from the SKU
(or a custom code value) and supports Code 128, EAN-13, UPC-A, Code 39, and
ITF-14, with the digits printed under the bars. The code is baked into the export
so it scans from the printed tag.

### Can I make a car hang tag or parking permit?

Yes. The Parking Permit template uses a portrait shape with a horizontal mirror
slot instead of a round punch hole, so it hangs from a rearview mirror. It shows
a large permit number, zone or lot, and valid-from and valid-until dates, with no
price block.

### What size should a hang tag be?

Common retail swing tags are 2 x 3.5 inches (business-card size), 2 x 3 inches,
or 1.5 x 2.5 inches for a mini tag. Jewelry fold-over tags are about 1 x 2
inches, and a car parking permit is about 3 x 8.5 inches. All of these are
built-in presets, and you can also set a custom size.

### Can I print many hang tags on one sheet?

Yes. Bulk mode lets you paste one product per line or import a CSV, set a copies
count per product, and tiles the tags onto a US Letter or A4 sheet with cut guides
and a punch mark on every tag. A 2 x 3.5 inch tag fits nine per Letter page, and
multi-page sheets export as a ZIP of PNGs.

### Does the swing tag have a real punch hole?

Yes. Every classic swing tag renders a real round punch hole near the top, drawn
as vector art so it shows in the preview and in every PNG, PDF, and SVG export.
The parking permit template renders a horizontal mirror slot instead.

### Can I download the hang tag as a PDF or SVG?

Yes. Each tag exports as a high-resolution PNG (3x), a true-size PDF sized to the
real tag dimensions, or a scalable SVG. Print the PDF at 100% scale with no
fit-to-page and the tag comes out at its exact real-world size.

### What is the difference between a hang tag, a price tag, and a gift tag?

A hang tag is the branded product swing tag that hangs on merchandise with a
string. A price tag is a shelf or price label focused on the price. A gift tag is
a decorative To and From tag for a present. This tool is built for hang tags, and
the price tag and gift tag generators cover the other two.


---

<!--
Writing rules for this file:
- Escape every currency dollar sign as \$ (remark-math treats a bare $ as math).
- No em dashes. Use a regular hyphen.
- Never use the filler words honestly / genuinely / blocker (or their variants).
- Positioning is legitimate use only. No fraud framing, no real hotel-chain names.
- Short sentences. The first `## ` heading is where page.tsx starts slicing.
-->

---
title: "Free Hotel Receipt & Folio Generator"
description: "Make a hotel receipt or guest folio with computed nights, per-night rates, incidentals, stacked lodging taxes, and a balance due. 8 templates, PDF, PNG, or SVG. Free, no watermark."
---

## Make a hotel receipt or folio the money math already handles

[![Watch how the free Hotel Receipt & Folio Generator works](https://img.youtube.com/vi/AK6Dsa8SSrY/maxresdefault.jpg)](https://youtu.be/AK6Dsa8SSrY)

A hotel receipt is not one number. It is a stack of charges: a room rate for
every night, the incidentals a guest picks up along the way, the lodging taxes
that sit on top, and the deposits or card payments that bring the balance to
zero. Type all of that into a blank document and one wrong multiplication throws
the total off. This hotel receipt and folio generator does the arithmetic for
you and shows the result live as you type.

It is built for real work. Reprint a folio a guest lost or a hotel emailed you
that you can no longer find. Produce a clean receipt for an expense report. Run
a small bed and breakfast, inn, vacation rental, or boutique hotel that has no
property management system and still needs a proper checkout document. Everything
runs in your browser, nothing is uploaded, and every download is free with no
watermark.

## What is a hotel folio

A folio is the running, itemized account of a guest's stay. In hospitality it is
the standard term for the guest bill. It lists each night's room charge, the
extra charges the guest incurred, the taxes on those charges, and the payments
made against them. The document handed over at checkout is the folio. That is
why a hotel folio, a hotel receipt, and a hotel invoice are closely related: the
folio is the itemized guest bill, the receipt is the proof of what was charged,
and the invoice is the same charges presented as a payable document, often
addressed to a company for business travel.

This tool builds all three from one screen. Pick the Guest Folio template for a
detailed checkout receipt, the Corporate Tax Invoice template for an expense
claim, or one of the six other layouts for the property you run.

## How to build your folio

1. **Enter your hotel details.** Add the hotel name, address, phone, website,
   and an optional logo. If you reclaim tax on business travel, add your Tax,
   VAT, or GST ID; it prints on the Corporate Tax Invoice template.
2. **Set the stay.** Choose the arrival (check-in) and departure (check-out)
   dates. The number of nights is computed for you. Add the guest name, room
   number, confirmation number, folio number, guest count, and a rate plan
   label such as Standard King or Bed and Breakfast.
3. **Enter room charges.** Use a flat nightly rate that is multiplied by the
   nights, or switch to per-night rates and edit each night so weekend and
   dynamic pricing can differ.
4. **Add incidentals.** Itemize parking, a resort fee, minibar, restaurant, spa,
   laundry, a pet fee, or an early check-in. Each line has a date, an amount, a
   category, a per-night option, and a taxable toggle.
5. **Stack your lodging taxes.** Add the taxes your jurisdiction charges. Each
   one can be a percentage or a flat per-night amount, and a percentage tax can
   apply to the room only or to the room plus taxable incidentals.
6. **Record payments.** Add a deposit, a card payment, or a direct-bill amount.
   The tool subtracts them from the total and shows the balance due, which is
   \$0.00 when the stay is paid in full.
7. **Pick a template and download.** Choose from eight layouts and paper sizes,
   then download a PDF, PNG, or SVG at true size.

## How nights are calculated

Nights are the whole days between arrival and departure. A stay from March 10 to
March 13 is 3 nights, not 4: you sleep the nights of the 10th, 11th, and 12th and
check out on the 13th. The room subtotal updates the instant you change either
date. If the departure falls on or before the arrival, the tool shows a clear
inline error rather than a negative or broken number, so a mistyped date can
never poison the total.

## Per-night rates versus a flat nightly rate

Most stays use one nightly rate. Enter it once as a flat rate and the tool
multiplies it by the nights. A 3-night stay at \$150 a night is a \$450 room
subtotal.

Dynamic pricing is different. Weekend nights, event nights, and last-minute
nights often cost more. Switch to per-night rates and you get one editable row
per night. Set Friday and Saturday to \$180 and Sunday to \$260, and the room
subtotal is the exact sum, \$620. The per-night grid is the part no static
template or word processor reproduces, because the math has to follow the dates.

## How lodging taxes actually stack

Hotel taxes are not a single rate. In the United States a transient occupancy
tax, also called a hotel tax or lodging tax, is a separate local tax on the room
charge. It is set by the city or county and it stacks on top of any state sales
tax that applies to lodging. Because those rates are set locally, they vary from
place to place and they change over time. For that reason this tool ships the
correct structure and editable presets rather than pretending one city's rate is
universal. You enter the rates that apply to your property, and the tool does the
math and the grouped breakdown.

A worked example makes the stacking clear. Take a 3-night stay at \$150 a night,
a \$450 room subtotal. A city occupancy tax of 14% on the room is \$63. A state
sales tax of 6% on the room is \$27. Add \$25 a night of parking across 3 nights,
which is \$75, and mark it taxable under the state tax only. The state tax then
applies to \$525 and becomes \$31.50, while the city tax stays on the \$450 room
and remains \$63. The folio prints each tax on its own line with the base it was
charged on, so the numbers reconcile to the cent and you never see a doubled
label like Tax 13% 13%.

## Resort fees and the taxable base

A resort fee is a mandatory per-night charge that many properties add for
amenities. In a lot of jurisdictions the resort fee is itself subject to
occupancy tax, which means the tax base is the room plus the resort fee, not the
room alone. Whether that applies is a local question, so the tool models it with
a taxable toggle. Add the resort fee as a per-night incidental, mark it taxable,
and set the occupancy tax base to room plus taxable incidentals.

Example: 2 nights at \$200 is a \$400 room subtotal. A resort fee of \$45 a night
across 2 nights is \$90. An occupancy tax of 13% on the room plus the resort fee
applies to \$490 and is \$63.70. The total is \$553.70. A \$200 deposit leaves a
balance due of \$353.70.

## Payments and the balance due

Add every deposit and payment as its own line. The tool sums them and subtracts
them from the total to show the balance due. When a single payment matches the
total exactly, the balance is \$0.00, shown cleanly rather than as a negative
zero. If a guest overpaid, the balance renders as a credit rather than a broken
minus sign. This is the running-account behavior that makes a folio a folio.

## The eight templates

- **Guest Folio.** The full itemized folio: a per-night room grid, incidentals,
  a grouped lodging-tax breakdown, and payments to a balance due. The default.
- **Boutique Hotel.** A branded layout with your logo, an accent color, and an
  elegant serif heading for a design-led property.
- **Bed & Breakfast.** A warm, simple receipt with a single tax, ideal for an
  inn or a small B&B.
- **Vacation Rental.** A fee-list layout in the style guests know from
  short-term rentals: nightly rate times nights, a cleaning fee, and a service
  fee, with no room number.
- **Resort Folio.** Built to show a per-night resort fee, several stacked taxes,
  and amenity charges.
- **Thermal Front-Desk.** A narrow 58mm or 80mm receipt in a monospace font for a
  front-desk thermal printer.
- **Corporate Tax Invoice.** A TAX INVOICE heading with a prominent Tax, VAT, or
  GST ID, a company bill-to block, and a per-tax breakdown for expense claims.
- **Minimal Receipt.** A clean single-column receipt with just the essentials
  and no logo.

Thermal templates print on a 58mm or 80mm roll. The full-page templates print on
A4 or US Letter. Every export is sized to the real paper width, so the PDF, PNG,
or SVG matches what you see on screen.

## Bulk folios from a spreadsheet

If you need to produce a batch of folios, use the Bulk CSV tab. Paste rows or
upload a .csv with a column for each stay: guest, room, confirmation, folio,
arrival, departure, rate, guests, and rate plan. Your hotel details, lodging
taxes, template, and currency apply to every imported folio, so a whole batch
comes out consistent. A Download sample CSV button gives you a correctly
formatted starter file that imports straight back in. Preview any stay, then
download one folio or every folio at once.

## A note on legitimate use

This generator produces a business and record-keeping document from the data you
enter. It is not an official record issued by a hotel, and it makes no
tax-compliance or legal claim. Use it to reconstruct a folio you are entitled to,
to give a guest a clean receipt, or to keep your own books. Enter the tax rates
that apply to your property or your stay; the tool does the arithmetic, not the
tax-law determination. Keep your receipts with your own records and follow your
accountant's or jurisdiction's rules.

## Frequently asked questions

### What is a hotel folio?

A folio is the running, itemized account of everything a guest is charged during
a stay: the room rate for each night, incidentals such as parking, minibar, or a
resort fee, the lodging taxes on those charges, and any payments or deposits. The
document handed over at checkout is the folio, or guest bill. This generator
produces that folio, so it doubles as your hotel receipt.

### Is this hotel receipt generator free?

Yes, it is 100% free with no signup and no watermark. Build and download as many
hotel receipts and folios as you want as PDF, PNG, or SVG. Everything runs in
your browser, so your hotel details, guest names, and amounts never leave your
computer.

### How are the number of nights calculated?

Nights are the whole days between your arrival (check-in) and departure
(check-out) dates. A stay from March 10 to March 13 is 3 nights. The room
subtotal updates the moment you change either date. If the departure is on or
before the arrival, the tool shows an inline error instead of a negative or
broken number.

### How do occupancy tax and resort fees work on the folio?

In the United States a transient occupancy tax, also called a hotel or lodging
tax, is a separate local tax on the room charge that is stacked on top of any
state sales tax. Rates are set by each city or county, so they vary and change,
which is why this tool ships the correct structure and editable presets rather
than hardcoded rates. Resort fees are mandatory per-night fees that are often
themselves subject to occupancy tax; the tool has a taxable toggle so you can
include a resort fee in the tax base when your jurisdiction requires it.

### Can I set a different rate for each night?

Yes. Switch the room charge to per-night rates and you get one editable row per
night, so weekend or dynamic pricing can differ from weeknights. The room
subtotal is the exact sum of the nights. If your rate is the same every night,
use the flat nightly rate mode instead and the tool multiplies it by the number
of nights.

### I lost my hotel receipt. Can I recreate it?

Yes. If a hotel emailed you a folio that you can no longer find, or you need a
clean copy for an expense report, you can re-enter the details from your booking
confirmation and card statement to reproduce the receipt. This tool builds a
business document from the data you enter. It is not an official record issued by
a hotel, so use it to reconstruct your own legitimate charges, not to invent a
stay.

### Can I add a VAT or GST number for a business trip?

Yes. The hotel details include a Tax, VAT, or GST ID field, and the Corporate
Tax Invoice template prints it prominently alongside a company bill-to block and
a per-tax breakdown. That is the format most finance teams and tax authorities
expect for reclaiming tax on business travel.

### Is a folio the same as a hotel invoice?

They overlap. A folio is the guest account and checkout receipt. A hotel invoice
is the same itemized charges presented as a payable document, often addressed to
a company for business travel. This generator can render either: choose the Guest
Folio template for a checkout receipt, or the Corporate Tax Invoice template for
an expense-claim invoice with a tax breakdown and VAT or GST ID.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Image Resizer & Optimizer

> Resize, rotate, flip, compress, and convert images. Use them for your Shopify store, Pinterest pins, and social media. Fix sideways phone photos instantly. You need no signup. Your images never leave your browser.

## The Ultimate Guide to Website Image Sizes in 2026

[![Watch how the free Image Resizer works](https://img.youtube.com/vi/zJEe3Oa37NI/maxresdefault.jpg)](https://youtu.be/zJEe3Oa37NI)

Properly sized images are critical. They improve mobile page speed. They boost SEO rankings. They create a professional shopping experience. Our free image resizer tool makes it effortless to adapt your visuals for any platform.

More people browse the internet on mobile devices than desktop computers today. Getting the right **image size for your Shopify store** and social media is absolutely essential. Oversized images cause slow page load times. This directly hurts your SEO ranking and frustrates potential customers. On the flip side, undersized images look pixelated. They appear unprofessional on high-resolution displays.

Our **free online image resizer** solves this problem. It features one-click presets tailored specifically for ecommerce merchants and content creators. You might optimize a hero banner. You might craft a background image. You might format product photography. Our tool ensures your dimensions are picture-perfect. Generic tools fall short. We include every dimension you need. Create **2048×2048 square product photos**. Create **2560×1400 hero banners**. Create **1000×1500 Pinterest pins**.

### How Does Our Free Image Resizer Work?

Adjusting your digital images to fit various applications has never been easier. Follow these simple steps:

1. **Upload your images:** Drag and drop up to 10 images at once. Your files are processed entirely in your browser. This ensures complete privacy.
2. **Select your target size:** Choose from our comprehensive list of social media presets. Try the Instagram Story size at 1080×1920. Or, enter your own custom dimensions.
3. **Choose a resize mode:** Decide whether you want to _Fit_ the image to prevent cropping. Alternatively, _Fill_ the space to eliminate borders.
4. **Adjust compression & format:** Select a modern format like WebP or AVIF. Use the quality slider. Find the perfect balance between visual fidelity and file size.
5. **Download instantly:** Preview your changes in real-time. Download your optimized images with a single click.

### Why Image Optimization is Crucial for SEO and User Experience

- **Page Speed & Core Web Vitals:** Every extra megabyte of image data adds to your page load time. Search engines use loading speed as a major ranking factor. They specifically look at the Largest Contentful Paint (LCP) metric. For optimal performance, aim to keep your product photos under 300KB.
- **Responsive Mobile Design:** Your website will be viewed on screens of all sizes. Choosing the right aspect ratios ensures your content looks great everywhere. It prevents horizontal scrolling or awkward zooming. Square product images adapt beautifully to mobile grids.
- **Perceived Brand Value:** Uniformly sized, crisp images give your store a polished, trustworthy appearance. High-resolution images allow for deep zooming. This requires a minimum of 800×800 pixels. Great images give customers the confidence to make a purchase.
- **100% Secure & Private:** Avoid other cloud-based image resizer tools. Your sensitive product photos and brand assets are never uploaded to a third-party server here. Everything is processed locally right in your browser.

### Best Image Sizes for Different Website Elements

Different sections of your website require different dimensions. Here is a quick reference guide:

- **Background Images:** These fill the entire screen. You need a high resolution. Aim for **2560 × 1400 pixels** (16:9 ratio). Try to keep the file size under 20MB.
- **Hero Images:** These sit at the top of your landing pages. A good rule of thumb is between **1280 to 2500 pixels wide** and 720 to 900 pixels tall.
- **Blog Headers:** Consistency is key here. Standardize on an aspect ratio like 3:2. Recommended dimensions are **1200 × 800 pixels**.
- **Logos:** Depending on your brand, a square (1:1) or rectangular (4:1) format works best. A standard square logo should be at least **100 × 100 pixels**.

### Recommended Shopify Image Sizes (2026)

| Image Type             | Dimensions  | Ratio | Max Size |
| :--------------------- | :---------- | :---- | :------- |
| Product Image (Square) | 2048 × 2048 | 1:1   | ≤ 300KB  |
| Collection Banner      | 1200 × 600  | 2:1   | ≤ 500KB  |
| Hero / Slideshow       | 2560 × 1400 | 16:9  | ≤ 10MB   |
| Blog Header            | 1200 × 800  | 3:2   | ≤ 3MB    |
| Logo                   | 100 × 100   | 1:1   | ≤ 1MB    |
| Background Image       | 2560 × 1440 | 16:9  | ≤ 20MB   |

**Pro Tip:** Modern platforms support uploads up to 20MB. However, it is almost always a good idea for the _rendered size_ of your images to be much smaller. This maximizes performance.

### Choosing the Right Image File Format & Format Conversion

As a Shopify merchant, you source product photos from various places. You get them from suppliers. You get them from professional photographers. You take them direct from your smartphone. Our image resizer acts as a fully-featured format converter. It runs directly in your browser. You might need to convert a transparent PNG to a lightweight JPEG. You might upload an iPhone HEIC photo and export it as a next-gen WebP. It gets done instantly without uploading files to an external server.

- **WebP:** The gold standard for modern web performance. Google developed WebP. It offers lossless compression. It often reduces file size by more than 30% compared to traditional formats. This dramatically improves SEO.
- **AVIF:** A next-generation format offering superior compression. It results in the smallest file sizes possible while maintaining high visual quality.
- **JPEG (JPG):** The universal standard for complex photographs. It uses lossy compression. It strikes a strong balance between reasonable file sizes and image fidelity.
- **PNG:** Best suited for logos, graphics, and images requiring a transparent background. Its lossless nature preserves perfect detail. However, file sizes are generally much larger. Reduce massive PNG files into web-optimized WebP or JPEG formats. This dramatically improves your Shopify store's page speed.
- **SVG:** A vector format perfect for logos and icons. It scales infinitely without any quality loss.
- **Native HEIC Support:** A major pain point for mobile-first creators is Apple's HEIC format. It is not universally supported. Just drop your iPhone `.heic` or `.heif` photos right into our tool. We decode them instantly in the browser. We prepare them for web-friendly exporting.

**Shopify Merchant Tip:** Do not upload raw iPhone HEIC photos directly to your store. Avoid massive PNGs unless transparency is absolutely required. Use our tool to batch-convert your mobile lifestyle shots. Turn them into highly compressed WebP files before uploading to Shopify. This ensures lightning-fast load times. You might even choose to keep your original dimensions without resizing. Running your photo through our tool's efficient WebP/AVIF re-encoding will still significantly reduce its footprint!

![Identical photograph hosted in JPG, PNG, WebP, and AVIF](/images/photo_formats.png)
Format comparison showing the difference in file sizes

### Understanding Image Resizing Modes

When scaling an image's dimensions, you must understand how different rendering methods affect the final result:

- **Fit (Fit inside, no crop):** Scales the image to fit entirely within the specified dimensions. The original aspect ratio is perfectly maintained. Mismatched ratios create empty space. This space is automatically padded (letterboxing). Use our **Empty Space Color** setting. Pick the exact background color for this padding to match your website design.
- **Fill (Cover & crop overflow):** Scales the image so it completely covers the target dimensions. Any parts of the image that overflow the new box are neatly trimmed.
- **Stretch (Force to exact size):** Forces the image to exactly match the target dimensions. It alters width and height independently. Use this carefully. It can cause severe distortion.

**Shopify Merchant Tip:** Do you have a mix of portrait and landscape photos? Use the **Fit** mode to resize them all. Turn them into uniform 2048×2048 squares for your Shopify catalog. Use the **Empty Space Color** setting. Set the padded background to match your store's exact hex color. This maintains a seamless, professional product grid without cropping out any vital product details.

![Visual comparison showing Fill, Fit, and Stretch resize modes](/images/resize-modes.webp)
Visual guide to how different resize modes affect your image

### Perfect Product Grids with Auto-Trim Whitespace

Ecommerce stores face a big challenge. Maintaining a consistent, professional appearance across collection pages is hard when sourcing products from multiple suppliers. Often, supplier photos come with varying amounts of white or transparent borders. If you simply resize these images as-is, the actual products appear as different sizes on your grid. This makes your store look totally disorganized.

Our exclusive **Auto-Trim Whitespace** feature solves this instantly. Before resizing, our tool automatically scans the pixels of your image. It strips away all excess white or transparent space. It tightly crops the photo down to the core product.

![Visual illustration of trimming excess whitespace from a product image](/images/trim_whitespace_concept.webp)
Visual guide to how Auto-Trim removes empty space to focus on your product

- **Standardize Scale:** Ensure the product itself fills the maximum available space. This eliminates tiny-looking items on your collection pages.
- **Automated Efficiency:** Skip manual cropping. Toggle this feature on. We will intelligently trim batches of up to 10 images at once.
- **Seamless Integration:** Auto-Trim works beautifully with the "Fit" resize mode. Trim the excess borders first. Then perfectly center the product inside a clean 2048×2048 Shopify square with a custom background color!

### Protect & Brand Your Assets with Watermarks

Protecting original product photography from theft is a top priority for Shopify merchants and digital creators. Our free tool includes a powerful built-in watermarking engine. It helps you secure and brand your images before publishing them online.

- **Text Watermarks:** Quickly add copyright notices, your store name, or your website URL. Customize the font size, opacity, color, and position. Ensure it looks completely professional.
- **Text Backgrounds:** Ensure your text watermark remains readable even over visually complex photos. Apply a custom solid background color directly behind the text.
- **Image / Logo Watermarks:** Upload your own PNG logo with a transparent background. Seamlessly overlay it onto your product catalog photos. This reinforces brand identity on Pinterest, Google Images, and social media.
- **Batch Watermarking:** Apply the exact same watermark settings across multiple images simultaneously. This saves you hours of tedious manual editing.

**Shopify Merchant Tip:** You might invest in custom lifestyle photography or unique product renders. Add a subtle logo watermark in the corner. This prevents competitors or dropshippers from scraping and reusing your hard work on their own stores.

### Fix Image Orientation Instantly with Rotate & Flip

You might upload a product photo only to see it appear sideways or upside-down on your Shopify store. You are not alone. This is one of the most common and frustrating issues ecommerce merchants face. It happens because modern smartphones embed **EXIF orientation data** in photos. Not every platform, browser, or image editing tool reads that metadata correctly. The result is a perfectly good product shot that displays rotated 90° in your collection grid. This makes your store look very unprofessional.

Our free image resizer includes a powerful **Rotate & Flip** toolset. It permanently bakes the correct orientation directly into the image pixels. Stop relying on EXIF tags that might be ignored. You might need a quick 90° correction. You might need fine-grained rotation at any angle from 0° to 360°. It is all done in one click before your final export.

**How Rotation Works**

Use the precision rotation slider to dial in any angle exactly between 0° and 360°. Or, tap one of the quick preset buttons (0°, 90°, 180°, 270°) for the most common corrections.

**How Flipping Works**

Toggle horizontal or vertical flipping with a single button press. Horizontal flip mirrors the image along the Y-axis. The left becomes the right. Vertical flip mirrors along the X-axis. The top becomes the bottom. This is essential for creating mirrored product layouts. It fixes selfie-mode photos. It produces symmetrical design compositions for Pinterest pins and social media banners.

![Visual illustration of image rotation and horizontal flipping](/images/rotate_flip_concept.webp)
Visual guide to how rotating and flipping affects your image orientation

- **Fix Sideways Phone Photos:** Correct the #1 product photography headache. A photo taken in portrait mode on an iPhone or Android often displays sideways on your Shopify store. It can be permanently fixed with a single 90° rotation.
- **Fine-Grained Angle Control:** Straighten slightly tilted flat-lay shots. Adjust angled product compositions. Create creative diagonal layouts. Do it all with 1-degree precision via the rotation slider.
- **Batch Transform:** Apply the exact same rotation and flip settings across your entire batch of up to 10 images simultaneously. This is a massive time-saver for merchants processing bulk supplier photography.
- **Non-Destructive Pipeline:** Transforms are applied _after_ whitespace auto-trimming but _before_ final resizing. This means the target dimensions you specify always refer to the rotated output. This prevents unexpected cropping or distortion.
- **Combine with Other Features:** Rotate your image, then watermark it, then export as WebP. Do it all in one seamless workflow. Every feature in our tool works together in a predictable processing pipeline.

**Shopify Merchant Tip:** Before uploading a new batch of product photos from your phone, run them through our tool. Apply a 0° rotation. The images might _look_ correct on your phone already. However, applying a canvas-level rotation ensures the orientation is permanently embedded in the pixel data rather than relying on EXIF metadata. This guarantees that Shopify, Pinterest, Google Shopping, and every other platform will display your photos exactly as intended. There are no surprises.

## Frequently Asked Questions

**How does this image resizer work?**

Simply drag and drop your photos (up to 10 at once). Choose a preset or enter your custom dimensions. Adjust your compression quality. Click "Resize." The entire optimization process happens securely in your browser. No files are ever uploaded to an external server. You can then download your optimized graphics individually. You can also download them all together as a single ZIP file.

**How much does it cost to use the image resizer?**

This online image resizer is a 100% free utility tool. There are absolutely no costs. There are no watermarks. There are no credit limits. There are no accounts required. You can resize as many images as you need for your ecommerce store, social media campaigns, or personal blogs.

**Does resizing images affect their quality?**

Yes, changing dimensions can impact quality. However, if you start with a high-resolution image and scale it down, the quality loss is usually imperceptible. Scaling an image up forces the creation of new pixels. This may result in blurriness. Our tool uses advanced interpolation techniques. It gives you a quality slider to control exactly how much compression is applied to lossy formats like JPEG and WebP.

**What is the difference between image size and resolution?**

**Image size** typically refers to the physical dimensions of the image on a screen (measured in pixels width by height). It can also refer to the file storage size (measured in KB or MB). **Image resolution** refers to the density of the details held within the image. This is often measured in Pixels Per Inch (PPI). An image can have small physical dimensions but a very high resolution.

**How does image size affect my website's load time and SEO?**

The larger the file size (in MB), the longer it takes a browser to download and render the image. Slow-loading pages lead to higher bounce rates. This negatively impacts your Search Engine Optimization (SEO). Google specifically monitors the "Largest Contentful Paint" (LCP) metric. Properly compress and resize your visuals. You guarantee a snappy user experience that search engines love.

**What size should my Shopify product images be?**

For the best mobile and desktop experience, Shopify recommends square product images at **2048×2048 pixels**. This uniform ratio looks great in collection grids. It is large enough to allow for crystal-clear zoom functionality. Proper zooming requires a minimum of 800×800 pixels.

Worth knowing: the file size you upload is not what decides how large the photo looks on your product page. That is your theme's column split, and uploading a smaller file will not shrink it. If your product photo is taking over the page, here is [how to make the product image smaller on a Shopify product page](/blog/shopify-product-image-size-smaller).

**What is the ideal Pinterest pin size?**

The recommended Pinterest pin size is 1000×1500 pixels. This is a 2:3 aspect ratio. This is the "standard pin" format that performs best in the Pinterest feed. For infographic-style pins, you can go taller at 1000×2100. After resizing, use our [Pinterest Pin Generator](/tools/pinterest-pin-generator) or [Pinterest Infographic Generator](/tools/pinterest-infographic-generator). Add templates, text overlays, and brand colors easily.

**Are my images safe and private?**

Yes, your images are completely safe. Our tool relies on the HTML5 Canvas API. All rendering and compression happens locally on your own computer. We never transmit or save your files on our servers.

**Can I watermark my product images before uploading to Shopify?**

Yes! Our free tool includes a fully featured watermarking engine. You can add custom text or upload a transparent PNG logo to brand your images. It supports adjusting the size, position, and opacity. It even allows adding custom background colors to text watermarks. This ensures they remain legible on busy product photography. Best of all, you can apply your watermark to up to 10 images simultaneously in a single click.

**Can I convert iPhone HEIC photos to JPEG or WebP?**

Absolutely. Our tool supports native decoding of Apple's HEIC and HEIF image formats. Upload photos taken directly from your iPhone. Resize them and instantly convert them to universally supported formats like JPEG, PNG, WebP, or AVIF. You do not need any third-party software.

**Can I rotate or flip my product images before uploading to Shopify?**

Yes! Our tool includes a full Rotate & Flip panel. You can rotate images to any angle from 0° to 360° using a precision slider. Use quick presets for 90°, 180°, and 270° corrections. You can also flip images horizontally or vertically with a single click. All transforms are permanently baked into the pixel data using the Canvas API. The orientation is guaranteed to display correctly on Shopify, Pinterest, Google Shopping, and every other platform.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Instagram Ads Cost Calculator & ROAS Forecaster

Forecast your ad performance with our free **Instagram ads cost calculator**. Use real Instagram benchmarks, interactive sliders, and our built-in **Instagram ads budget calculator** to see your ROAS, CPA, and net profit instantly. Free, no signup.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Use This Instagram Ads Calculator

[![Watch How It Works](https://img.youtube.com/vi/ElT_f2v1Bps/maxresdefault.jpg)](https://youtu.be/ElT_f2v1Bps)

This quick video walkthrough shows how to forecast your ad performance. You will learn to set your budget and adjust the sliders. You will instantly see your ROAS, CPA, and net profit using our free calculator.

Understanding your ad funnel is key to calculating profitability. The journey starts with Impressions and Clicks, leads to Conversions, generates Gross Revenue, and finally results in Net Profit.

1. **Clicks**: The number of people who visit your website from the ad.
2. **Conversions**: The number of visitors who make a purchase or become a lead.
3. **Gross Revenue**: The total money generated before any costs.
4. **Net Profit**: The final amount left after deducting ad spend and product costs.

Pick your industry from the dropdown to load realistic Instagram benchmarks, then drag the sliders to match your own numbers. The ROAS, CPA, and net profit update in real time.

## How Instagram Ad Costs Work

Instagram ads run through the same Meta Ads Manager as Facebook, so the pricing model is identical: you bid in an auction and pay per click (CPC) or per thousand impressions (CPM). What differs is the price. Instagram placements often carry a higher CPC than the Facebook feed, because the audience skews younger, more visual, and highly engaged. Costs also swing with your industry, audience, creative quality, and the time of year.

That is why guessing your numbers rarely works. This calculator fills in Instagram averages for your industry so you can forecast profit before you spend a dollar, then refine with your own ad account data.

## The Formulas Behind the Calculator

Here is exactly how this tool calculates each metric. You can follow along step by step.

### Clicks and Conversions

- **Total Clicks ($TC$)**: How many people visit the website.

$$
TC = \frac{\text{Budget}}{\text{CPC}}
$$

- **Total Conversions ($TCon$)**: How many customers actually buy.

$$
TCon = TC \times \frac{\text{Conversion Rate}}{100}
$$

- **Cost Per Acquisition ($CPA$)**: How much it costs in ad spend to get one customer.

$$
CPA = \frac{\text{Budget}}{TCon}
$$

### Revenue and Profit

- **Gross Revenue ($GR$)**: Total money generated before any costs.

$$
GR = TCon \times \text{AOV}
$$

- **Return on Ad Spend ($ROAS$)**: The efficiency of the ad spend. How many dollars you earn for every dollar spent on ads.

$$
ROAS = \frac{GR}{\text{Budget}}
$$

- **Total Product Costs ($TPC$)**: The cost to produce and ship the sold inventory.

$$
TPC = GR \times \frac{\text{COGS}}{100}
$$

- **Net Profit ($NP$)**: The final money left in your pocket.

$$
NP = GR - \text{Budget} - TPC - \text{Agency Fees}
$$

- **True Net ROI ($Net ROI$)**: The true percentage return on your total investment, including ad spend, product costs, and agency fees.

$$
Net ROI = \left( \frac{NP}{\text{Budget} + TPC + \text{Agency Fees}} \right) \times 100
$$

- **Gross Profit Per Sale ($GPPS$)**: How much profit you keep from each individual sale, after subtracting product costs and your cost to acquire that customer.

$$
GPPS = \text{AOV} - \left(\text{AOV} \times \frac{\text{COGS}}{100}\right) - CPA
$$

## What is ROAS and Why Does It Matter?

Return on Ad Spend (ROAS) is the metric that decides whether an Instagram campaign is worth scaling. It measures how much revenue you earn for every dollar spent on Instagram ads, which matters even more here because Instagram placements often cost more per click than the Facebook feed.

That higher click cost means an Instagram campaign needs a stronger funnel to hit the same ROAS. Great visuals, Reels, and a fast mobile landing page do the heavy lifting, because Instagram traffic is mobile-first and skews younger and more impulse-driven.

- **Break-Even ROAS ($ROAS_{BE}$)**: The minimum ROAS where you stop losing money. If your product margin is 50%, your break-even ROAS is 2.0x. Because Instagram clicks can cost more, you often need a higher conversion rate or AOV to clear it.

$$
ROAS_{BE} = \frac{1}{1 - \frac{\text{COGS}}{100}}
$$

- **Good ROAS on Instagram**: Anything above break-even is profitable, but plan for Instagram's higher click cost when you set a target. To work out your break-even and target ROAS separately from a budget, use our dedicated [ROAS Calculator](/tools/roas-calculator).

## What is Break-Even CPA?

Break-Even CPA ($CPA_{BE}$) is the maximum you can spend on Instagram to win one customer without losing money. It matters more here, where a higher cost per click pushes your cost per acquisition up faster, so you have less room before a sale goes underwater. If your Average Order Value is \$80 and your Cost of Goods is 30%, your Break-Even CPA is \$80 x (1 - 0.30) = \$56. Any Instagram cost per purchase under \$56 is profitable; anything above it loses money.

$$
CPA_{BE} = \text{AOV} \times \left(1 - \frac{\text{COGS}}{100}\right)
$$

The calculator works out your Break-Even CPA automatically, giving you a clear ceiling to hold your Instagram cost per result below.

## Instagram Ads Benchmarks by Industry (2026)

Our tool uses real-world Instagram averages to help you forecast performance. Here are some baseline metrics:

| Industry            | Cost Per Click (CPC) | Conversion Rate (CR) | Average Order Value (AOV) | Cost of Goods (COGS) |
| ------------------- | -------------------- | -------------------- | ------------------------- | -------------------- |
| General E-commerce  | \$1.40               | 1.8%                 | \$50.00                   | 40%                  |
| Clothing & Fashion  | \$1.25               | 2.8%                 | \$75.00                   | 30%                  |
| Beauty & Cosmetics  | \$1.50               | 3.5%                 | \$45.00                   | 35%                  |
| Health & Fitness    | \$1.55               | 8.0%                 | \$90.00                   | 25%                  |
| B2B SaaS / Software | \$2.20               | 4.0%                 | \$120.00                  | 15%                  |

Select your industry from the dropdown and the tool fills in a typical baseline from these ranges for you. You can always override them with your own numbers.

## Example: \$5,000 Instagram Ad Budget

Let's walk through a real scenario using standard e-commerce numbers.

- **Inputs**: Budget = \$5,000 | CPC = \$1.25 | Conversion Rate = 2.5% | AOV = \$80 | COGS = 30%
- **Step 1**: Clicks = \$5,000 / \$1.25 = 4,000 clicks.
- **Step 2**: Conversions = 4,000 x 0.025 = 100 sales.
- **Step 3**: CPA = \$5,000 / 100 = \$50 per sale.
- **Step 4**: Gross Revenue = 100 x \$80 = \$8,000.
- **Step 5**: ROAS = \$8,000 / \$5,000 = 1.6x.
- **Step 6**: Product Costs = \$8,000 x 0.30 = \$2,400.
- **Step 7**: Net Profit = \$8,000 - \$5,000 - \$2,400 = **\$600**.
- **Step 8**: Profit Per Sale = \$80 - (\$80 x 0.30) - \$50 = **\$6.00**.

With a \$5,000 monthly ad budget, this store would earn \$600 in net profit and a 1.6x ROAS. Try changing the conversion rate from 2.5% to 3.5% and watch the profit jump significantly.

## How to Use Reverse Budgeting for Instagram Ads

Most calculators ask for your budget first. Reverse budgeting takes a "Goal-First" approach.

1. Set your **Net Profit Goal**.
2. The tool works backward using Instagram benchmarks.
3. It shows exactly how much ad spend, clicks, and sales you need to hit that goal.

If the result is negative, your product margins are too low for current ad costs. You may need to increase prices or improve conversion rates.

![Reverse budgeting results in Profit to Budget mode showing required ad spend, required clicks, required sales, expected ROAS, and net profit goal](/images/tools/instagram-ads-calculator/reverse-budgeting-results.webp)

### The Reverse Budgeting Formula

The tool calculates how much net profit each sale generates after ad costs and product costs. Then it figures out how many sales you need to reach your goal. Finally, it works backward to find the total ad spend required.

1. **Profit Per Sale**:

$$
\text{Profit Per Sale} = \text{AOV} \times \left(1 - \frac{\text{COGS}}{100}\right)
$$

2. **Ad Cost Per Sale**:

$$
\text{Ad Cost Per Sale} = \frac{\text{CPC}}{\text{Conversion Rate} / 100}
$$

3. **Net Margin Per Sale**:

$$
\text{Net Margin Per Sale} = \text{Profit Per Sale} - \text{Ad Cost Per Sale}
$$

4. **Sales Needed**:

$$
\text{Sales Needed} = \frac{\text{Profit Goal}}{\text{Net Margin Per Sale}}
$$

5. **Required Ad Spend**:

$$
\text{Required Ad Spend} = \text{Sales Needed} \times \text{Ad Cost Per Sale}
$$

If the Net Margin Per Sale is zero or negative, it means each sale costs more in ads than it earns in profit. The tool will show a warning and suggest increasing your price or conversion rate.

## The "What-If" Slider: Test Scenarios in Real Time

Instead of typing numbers into a form and hitting a submit button, this tool uses interactive sliders. Drag your Conversion Rate from 1% to 5% and watch your profit change instantly on the chart.

![Instagram ads calculator results dashboard showing key metrics, a spend vs revenue vs profit chart, ROAS, and net profit](/images/tools/instagram-ads-calculator/results-dashboard.webp)

This makes it easy to answer questions like:

- "What happens if I double my conversion rate?"
- "How much more profit do I make if I raise my AOV by \$20?"
- "At what CPC do my ads stop being profitable?"

Every time you move a slider, the tool recalculates all metrics and updates the visual chart in real time. No page reloads, no waiting.

## How This Tool Is Different

Most Instagram ads calculators on the market are static forms. They require you to already know your CPC, conversion rate, and other metrics. If you are a beginner or small business owner who does not know those numbers, those tools are useless.

This tool solves that problem in three ways:

1. **Pre-loaded Instagram benchmarks**: Select your industry and the tool fills in realistic CPC, conversion rate, AOV, and COGS values based on real-world Instagram advertising data. No guessing required.
2. **Reverse budgeting**: Instead of asking "What is your budget?", this tool asks "How much profit do you want?" and works backward to find the exact ad spend you need.
3. **Interactive sliders**: Drag any metric up or down and watch your profit forecast change in real time on a visual chart. No submit buttons, no page reloads.

## FAQ

### How much do Instagram ads cost?

Instagram ad costs vary by industry, audience, and creative quality. Cost Per Click typically ranges from about \$0.80 to \$3.50, and Instagram often runs a little higher than the Facebook feed. Enter your own numbers in the calculator, or start with the industry benchmarks built in, to forecast your true cost per sale.

### How much should I spend on Instagram ads?

Your budget depends on your profit goals and Cost Per Acquisition (CPA). Use the reverse budgeting feature in our **Instagram ads budget calculator** to find the exact spend required to hit your desired net profit.

### What is a good ROAS for Instagram ads?

A good ROAS depends on your margins, not a benchmark. With a 50% margin, 2.0x breaks even and anything above it profits. Because Instagram's cost per click tends to run higher than the Facebook feed, aim for a target ROAS that leaves room for that pricier traffic, and lean on strong Reels and visuals to lift your conversion rate. Our [ROAS Calculator](/tools/roas-calculator) turns your margin into your exact break-even and target ROAS.

### How do I calculate my Instagram ads ROI?

While ROAS only looks at ad spend, ROI includes all business expenses. Calculate ROI by subtracting total costs from total revenue, then dividing by total costs. Using a dedicated **Instagram ads roi calculator** like ours gives you a clear picture of your true net earnings.

### What is Cost Per Acquisition (CPA)?

CPA is how much it costs in ad spend to get one new customer. You calculate it by dividing your total ad spend by the total number of conversions.

### How do I reduce my Instagram ad costs?

You can lower ad costs by improving your ad creative to get a higher Click-Through Rate (CTR). Strong visuals, Reels, and short video tend to perform well on Instagram. You can also optimize your landing page to boost your Conversion Rate. Targeting the right audience and testing different ad formats also helps reduce your Cost Per Click (CPC).

### What is the difference between ROAS and Net ROI?

ROAS only compares revenue to ad spend, so a 3.0x ROAS means you earned \$3 for every \$1 of ads. Net ROI is the true percentage return on your total investment, including ad spend, product costs, and agency fees. ROAS can look healthy while your Net ROI is negative if your margins or fees eat the profit. This calculator shows both so you see the full picture.

### How do agency or management fees affect my profit?

Agency and management fees are fixed monthly costs that come out of your profit before anything else. The calculator subtracts them after ad spend and product costs, so your Net Profit and Net ROI reflect the real money you keep. Even a strong ROAS can turn unprofitable once a large retainer is added, which is why it pays to model the fee directly.

### What is gross profit per sale?

Gross profit per sale is how much money you keep from a single order after product costs and the ad cost to acquire that customer. The formula is AOV minus product cost minus Cost Per Acquisition (CPA). It is the clearest way to check your unit economics, because a sale that looks profitable on revenue can lose money once acquisition costs are included.

### How many sales do I need to break even on Instagram ads?

You break even when your gross profit per sale covers your ad cost per sale. Use the reverse budgeting mode to set a profit goal of \$0, and the tool shows the exact number of sales, clicks, and ad spend needed to break even with your current margins and CPC.

### What is the minimum budget to start with Instagram ads?

There is no hard minimum, but most small businesses start between \$10 and \$50 per day to gather enough data for Meta to optimize delivery. Use the calculator to enter a small daily budget and see how many clicks and sales it should produce before committing more. The reverse mode also tells you the minimum spend needed to hit a specific profit goal.

### Is this Instagram ads calculator accurate?

The calculator uses the same math agencies use, so the formulas are exact for the numbers you enter. Real campaign results vary because CPC, conversion rate, and AOV change over time. Start with the industry benchmarks built into the tool, then replace them with your own ad account data for the most accurate forecast.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Instagram Post Generator - Free Tool for Shopify Merchants

> A powerful **Instagram Post Generator** to create professional Instagram posts from your product images. With our **Instagram Post Creator**, from just 1 product, create 36 × 28 = 1008 posts instantly. No signup required, and absolutely no AI slop to worry about! Perfect for Shopify merchants looking to scale their Instagram presence.

## How to Use the Free Instagram Post Generator

Creating eye-catching Instagram posts has never been easier for Shopify store owners. Our free **Instagram Post Generator** lets you design professional-quality posts in minutes — without any design skills or expensive software. Everything happens securely in your browser, ensuring complete privacy for your brand assets and product imagery.

### Step 1: Upload Your Product Images

Click the upload area to add up to 10 product images from your Shopify store. These images will be placed inside the post templates automatically, scaled and cropped to fit each design perfectly. Whether it's product photography, lifestyle shots, or flat lays, our **Instagram Post Creator** handles them all beautifully. From a single product image, you can generate thousands of unique post concepts.

### Step 2: Enter Your Overlay Text

Type a compelling headline, product title, or promotional message in the text field. This text will be rendered directly on top of each post using auto-fit typography that adjusts to fill the available space beautifully. Great for announcing sales, new arrivals, or seasonal collections in your Shopify store.

### Step 3: Customize to Make It Your Own

Personalize your creations! Choose your preferred fonts, customize text sizes, and align the typography to match your brand's unique identity. Select from 36 professionally designed templates, each featuring unique layouts, image placements, and text positions. Every template is crafted to work beautifully at Instagram's optimal 4:5 portrait ratio.

### Step 4: Pick Color Palettes

Browse 28 curated color palettes or use the custom color controls to perfectly match your Shopify store's brand aesthetic. The color palettes effortlessly govern the post's background, text, and accent elements, giving you unlimited combinations. All our built-in palettes are carefully crafted to ensure optimal color contrast, guaranteeing that every text element remains highly readable against its assigned background. When utilizing these palettes, keep our 6 key color roles in mind:

- **BG 1 (Primary Background)**: Main canvas
- **BG 2 (Secondary Background)**: Depth and subtle variations
- **Font 1 (Primary Text)**: Main text elements
- **Font 2 (Secondary Text)**: Website names and categories
- **Accent 1 (Primary Accent)**: Specific highlights
- **Accent 2 (Secondary Accent)**: Minor highlights

### Step 5: Preview and Batch Download

Review the massive grid of generated posts. Because this is a genuine **Instagram Post Creator**, all images generated are in the perfect Instagram resolution: **1080 × 1350 px** (4:5 aspect ratio). This is the most recommended Instagram post size — it takes up the maximum amount of screen real estate in your followers' feeds. When you're ready, hit "Download All as ZIP". This button downloads all possible combinations of your selected templates and color palettes. So, at a time for a single product, you can have a maximum of 36 × 28 = 1008 posts exported instantly!

## Why Shopify Merchants Should Use Our Instagram Post Creator

### 1000s of Posts from 1 Product

Stop making posts one by one. With our **Instagram Post Generator**, you can combine multiple templates and color palettes to instantly turn a single Shopify product image into thousands of high-quality post ideas. This is perfect for building a content calendar that lasts months.

### No AI Slop – Authentic Content

Avoid the algorithmic penalties and audience distrust associated with low-effort AI-generated content. This tool is a true **Instagram Post Generator** that uses your actual product photos and proven, handcrafted design principles to assemble authentic posts that resonate with your audience.

### 100% Browser-Based & Privacy Focused

Your data never leaves your device. The image processing, template generation, and ZIP creation all happen securely right inside your web browser. No uploads to third-party servers, guaranteeing absolute privacy for your Shopify store's brand assets and unreleased product photos.

### Perfect Instagram Resolution

Every image generated is precisely **1080 × 1350 px** — the optimal 4:5 portrait ratio recommended by Instagram. This format takes up 25% more screen space in the feed than a square post (1080×1080), meaning more visibility, more engagement, and more clicks to your Shopify store.

### Designed for Shopify Merchants

Whether you're running a dropshipping store, a print-on-demand business, or a handmade goods shop on Shopify, this tool is built for you. Upload your Shopify product photos, add your store's branding, and generate a month's worth of Instagram content in minutes.

### Key Benefits Summary

- **Thousands of Variations**: Create 1000s of post ideas for just 1 product.
- **Privacy First**: Everything happens in the browser.
- **No AI Slop**: Genuine posts using your real images and trusted templates.
- **Brand Customization**: Custom color palettes, font choices, and templates to match your Shopify store's brand.
- **Perfect Dimensions**: Output strictly at the optimal 1080 × 1350 px resolution.
- **Batch Download**: Get everything neatly packaged as a ZIP file in one click.
- **100% Free**: No signup, no watermarks, no limits.

## Instagram Post Design Best Practices for Shopify Stores

1. **Use portrait images** — The 4:5 ratio (1080×1350px) takes up the maximum feed space, giving your posts 25% more visibility than square posts.
2. **Add text overlays** — Posts with clear, readable text overlays drive more engagement and communicate your value proposition instantly.
3. **Use brand colors** — Consistent custom color palettes build brand recognition across your Shopify store's Instagram presence.
4. **Keep it simple** — Let the **Post Creator** balance the layout for maximum impact. Less clutter means more conversions.
5. **High-quality images** — Crisp, well-lit product photos from your Shopify store convert better on Instagram.
6. **Include your handle or domain** — Use the domain field to add your Shopify store URL or Instagram handle as a watermark.

## Why 4:5 Is the Best Instagram Post Size

The 1080×1350px portrait format (4:5 aspect ratio) is widely regarded as the optimal Instagram post size for several reasons:

- **Maximum Feed Real Estate**: Portrait posts occupy 25% more vertical space in the feed compared to standard square posts (1080×1080).
- **Higher Engagement**: Studies consistently show that portrait-oriented posts receive more likes, comments, and saves than square or landscape alternatives.
- **Algorithm Friendly**: Instagram's algorithm favors content that keeps users engaged longer. A larger post naturally captures more attention and dwell time.
- **Mobile Optimized**: Since over 98% of Instagram users access the platform via mobile, the portrait format fills the mobile screen more effectively.

Our tool automatically generates every post at exactly 1080×1350 pixels, so you never have to worry about awkward cropping, letterboxing, or blurry scaling.

## Posting Strategy for Shopify Merchants

Generating thousands of posts is powerful, but posting them requires a smart strategy:

- **Space Out Your Posts**: Since all these generated posts will showcase the same product, spread them out over several weeks. Posting the same product too frequently can feel spammy to your followers.
- **Vary Your Designs**: Two posts showcasing the same product should use different templates and color palettes. Variety keeps your feed looking fresh and professional.
- **Mix with Other Content**: Alternate between product posts, lifestyle content, customer testimonials, and behind-the-scenes shots for a balanced Instagram feed.
- **Use Carousel Posts**: Combine multiple generated designs into a single carousel post for maximum engagement. Instagram carousels receive higher average engagement than single-image posts.
- **Schedule Strategically**: Use scheduling tools to post during your audience's peak activity hours for maximum reach.

## Frequently Asked Questions

**How does the free Instagram Post Generator work?**

Simply upload your product images, enter an overlay text (like a product title or sale announcement), and choose your preferred templates and brand colors. Our **Instagram Post Generator** instantly scales, crops, and formats your input to produce thousands of unique, high-quality posts at the perfect 1080×1350px resolution. You can preview them in real-time and download them as a ZIP file.

**How much does it cost to use the Instagram Post Creator?**

This online **Instagram Post Creator** is a 100% free utility tool. There are absolutely no hidden costs, no watermarks, no credit limits, and no account sign-ups required. You can generate as many posts as you need for your Shopify store or ecommerce brand.

**Are my images and brand assets secure?**

Yes, your privacy is our top priority. The entire generation process happens locally within your web browser. We never upload, store, or transmit your product photos to external servers. Your Shopify product images and brand assets are 100% safe.

**What is the ideal resolution for Instagram posts?**

The optimal size for an Instagram post is **1080 × 1350 pixels**, which provides a perfect 4:5 aspect ratio. This portrait format takes up the maximum amount of screen space in the Instagram feed, giving your posts up to 25% more visibility than square posts. Our tool automatically ensures every image you download strictly adheres to this ideal resolution.

**Can I use this for my Shopify store?**

Absolutely! This tool is specifically designed for Shopify merchants and ecommerce brands. Upload your Shopify product photos, add your store branding via the domain field, and generate professional Instagram posts that drive traffic back to your store. The templates work perfectly with product photography, lifestyle shots, and flat lays.

**Will Instagram penalize me for using a Post Generator?**

No! Because our tool relies on your original product imagery and proven, handcrafted templates — rather than low-quality AI generation — your posts are treated as high-quality, authentic content. There is no "AI slop," meaning you completely avoid any perception of low-effort content.

**Can I match the posts to my Shopify store's brand identity?**

Absolutely. We provide deep customization features. You can browse 28 curated color palettes or use custom color controls to match your Shopify store's brand exactly. You can also select specific fonts and typography layouts so your posts seamlessly align with your broader brand aesthetic across Instagram and your online store.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Shopify Invoice Generator - Create Invoice Online Free

Create professional invoices instantly with our **free online invoice generator**. You might run a Shopify store. You might run a freelance business or a small ecommerce brand. PinFlow's **free invoice creator** lets you add your logo, line items, tax, discounts, and payment terms. You can then download a polished PDF in seconds. You need no signup.

## How to Use This Free Online Invoice Generator

[![Watch How It Works](https://img.youtube.com/vi/cHiwKBGtVt4/maxresdefault.jpg)](https://youtu.be/cHiwKBGtVt4)

1. **Enter your business details**: Add your company name, email, optional logo, and address.
2. **Add customer & invoice info**: Add bill-to details, invoice number, dates, currency, and payment terms.
3. **Add line items**: Enter products or services with quantity, price, tax rate, and an optional discount.
4. **Preview live**: The right panel updates instantly as you type.
5. **Download PDF**: Click Download PDF or Print when you are ready.

## Why Use an Online Invoice Generator?

![Minimalist Invoice Document Generation](/images/minimal_invoice.webp)

You might be wondering **how to generate invoice** documents quickly without paying for expensive software. This tool is the perfect solution. Learning **how make an invoice** should not require complex setups. Creating invoices manually in Word or Google Docs is slow and inconsistent. A dedicated **invoice generator online** gives you:

- **Multiple document types**: Create Invoices, Quotes, Packing Slips, Return Forms, and Credit Notes from one tool.
- **Professional templates**: Choose from multiple invoice templates and alternative totals styling.
- **Customization options**: Add your brand color. Customize labels for multi-language support.
- **Instant calculations**: Subtotal, tax, discounts, and the total are computed automatically.
- **Auto-saving settings**: Your company info, footer notes, and payment terms are saved securely in your browser.
- **Multiple currencies**: We support USD, EUR, GBP, INR, JPY, and PKR.
- **No account needed**: Everything runs directly in your browser. Your data never leaves your device.

## A Powerful Invoice Generator for Shopify Merchants

Shopify store owners often need quick invoices for wholesale orders, custom projects, or B2B sales. These happen outside the normal Shopify checkout flow. Using a dedicated **invoice generator shopify** tool is perfect for:

- Sending quotes that easily convert to invoices.
- Billing for custom design or consulting work.
- Creating invoices for wholesale or manual orders.
- Keeping professional records for tax season.

Pair this tool with our [Profit Margin Calculator](/tools/profit-margin-calculator). You can price your products correctly before invoicing clients. Use our [Free Barcode Generator](/tools/barcode-generator) to create SKU and UPC labels for shipped orders.

## What to Include on a Professional Invoice

A complete invoice should always include:

- **Your business name and contact info**
- **Customer name and billing address**
- **Unique invoice number** (e.g., INV-001)
- **Invoice date and due date**
- **Itemized line items** with quantity and unit price
- **Subtotal, tax, discount, and total**
- **Payment terms** (Net 30, Due on Receipt, etc.)
- **Notes or payment instructions**

Our tool includes all of these standard fields by default.

## Standalone Invoice Generator vs. Built-in Shopify Invoices

Shopify generates invoices automatically for regular orders placed through your store. However, many merchants still need a standalone **free invoice generator shopify** solution for:

- Services not sold through Shopify directly.
- Pre-order or custom manufacturing quotes.
- B2B clients who pay outside Shopify Payments.
- Freelance or agency work billed separately.

PinFlow's tool fills that gap perfectly. It is free, fast, and designed specifically for ecommerce sellers.

## Complete Privacy & Data Security

![Browser Security and Privacy Padlock](/images/minimal_privacy.webp)

**Your privacy is our priority. Nothing is saved on our servers. All calculations and PDF generation happen directly in your browser. Your business and customer data never leaves your device.**

## Frequently Asked Questions

### Is this free online invoice generator really free?

Yes. PinFlow's **shopify free invoice generator** is 100% free. There is no signup required. There are no watermarks. There are no limits on downloads.

### Can I add my company logo?

Yes. You can upload a PNG, JPG, SVG, or WebP logo (up to 2 MB). You can also paste a direct image URL. Your logo appears on both the live preview and the downloaded PDF.

### What currencies are supported?

We support USD, EUR, GBP, INR, JPY, and PKR. Amounts format correctly for each currency. This includes zero-decimal formatting for JPY.

### Does my invoice data get stored on a server?

No. All processing happens locally in your browser. Your invoice data is never sent to PinFlow's servers.

### Can I print the invoice?

Yes. Click the Print button. This opens the generated PDF in a new tab. You can then use your browser's standard print dialog.

### What payment terms can I set?

You can set Due on Receipt, Net 15, Net 30, and Net 60. Your selected payment terms appear clearly on the invoice footer.

### Can I add tax and discounts?

Yes. Enter a tax rate as a percentage. Choose between flat-amount or percentage-based discounts. Your totals update automatically in the preview panel.

### Can I generate other types of documents?

Yes! You can use the tool to generate Quotes, Packing Slips, Return Forms, and Credit Notes. Simply select the desired document type from the menu.

### Can I customize the invoice design?

Absolutely. You can choose from our collection of professional invoice templates. You can apply your brand's primary color. You can select alternative totals styling. You can even override the default labels (e.g., changing "Invoice" to your local language equivalent).

### Do I have to re-enter my company details every time?

No. Our auto-save feature automatically remembers your company information, default footer notes, and payment terms securely in your browser. They are ready the next time you use the tool.

### Is the PDF suitable for sending to clients?

Yes. The downloaded PDF uses a clean, professional A4 layout. It is perfect for email attachments, printing, or record-keeping.


---

# Free Itemized Receipt Generator

## What an itemized receipt actually is

[![Watch how the free Itemized Receipt Generator works](https://img.youtube.com/vi/c_r1XXSZMys/maxresdefault.jpg)](https://youtu.be/c_r1XXSZMys)

An itemized receipt lists every product or service on a sale as its own line, with the quantity, the unit price, and the amount for that line, and then rolls those lines up into a subtotal, tax, and total. A simple receipt might just say "Order total: \$63.20." An itemized receipt shows the buyer exactly what made up that \$63.20, line by line. That level of detail is what an insurer, an HSA or FSA administrator, an employer's expense desk, or your own bookkeeping actually wants to see.

This free itemized receipt generator makes that receipt for you in the browser. You add your store details, type or import your line items, set the tax that applies to each one, pick a template, and download a PDF or PNG. Nothing is uploaded to a server, there is no signup, and there is no watermark on the file you download.

The reason to use a real generator instead of a template in a word processor is the math. A word-processor template is a static picture: you do every calculation by hand, and one fat-fingered number quietly breaks the total. A generator does the arithmetic live and keeps it correct as you edit. And this generator does math that the other free tools do not: **it taxes each line on its own.**

## Itemized vs. simple receipts: when you need the detail

A plain total is fine for a quick point-of-sale handoff. You need the itemized version when someone downstream has to verify the contents:

- **Insurance, HSA, and FSA claims** require a line-by-line breakdown so the administrator can see which items are eligible.
- **Expense reports** are often rejected without an itemized receipt, because a card statement only proves you spent money, not what you bought.
- **Mixed tax situations** (grocery plus prepared food, retail plus alcohol) legally carry different tax on different items, and a single-rate receipt cannot represent that correctly.
- **Restaurants and bars** itemize food, drinks, tip, and service charge so the guest can check the bill.

If any of those describe your sale, a one-line total is not enough, and a single order-level tax rate is often wrong.

## Per-line tax: the feature nobody else has

Almost every free receipt or invoice tool applies **one** tax rate to the whole order. That is fine for a shop where everything is taxed the same, and useless the moment two items are taxed differently.

Here, every line has its own **taxable toggle** and its own **selectable tax rate**. You define the named rates once (for example Standard 8.25%, Alcohol 10%, and Zero-rated 0%), then pick one per line. Non-taxable lines contribute zero tax no matter what. The receipt then prints a **tax breakdown grouped by rate**: one row for each distinct rate in use, and those rows always add up to the total tax shown.

A worked example. Say you sell two items:

- Line A: 2 x \$10.00, taxable at 8.25%
- Line B: 1 x \$20.00, non-taxable

The subtotal is \$40.00. Only Line A is taxed: 8.25% of \$20.00 is \$1.65. The total is **\$41.65**, and the breakdown reads "Sales Tax 8.25% on \$20.00 = \$1.65."

Now a mixed-rate order:

- Line A: \$100.00 at 10%
- Line B: \$50.00 at 0%
- Line C: \$30.00 at 20%

The breakdown prints two rows, "10% on \$100.00 = \$10.00" and "20% on \$30.00 = \$6.00," for \$16.00 of tax and a **\$196.00** total. The 0% line is left out of the breakdown because it adds no tax. No other free tool will give you that receipt.

## Tax-inclusive vs. tax-exclusive pricing

Outside the United States, most shelf prices already include tax (VAT-inclusive pricing). Inside the US, prices are usually shown before tax. A receipt has to handle both, and most free tools only do one.

This generator has a single switch:

- **Tax added on top (exclusive):** your unit prices do not include tax, so tax is computed per line and added to the subtotal.
- **Tax included in price (inclusive):** your prices already include tax, so the tool extracts the tax out of each line instead of adding it.

The extraction uses the standard formula: for a line of amount A at rate r, the tax is A minus A / (1 + r), and the net is what remains. A \$110.00 line at 10% in inclusive mode shows a **\$110.00** total with **\$10.00** of tax extracted (the net is \$100.00). Flip the same line to exclusive and it becomes a \$121.00 total with \$11.00 of tax added. Same input, correct answer either way.

## Per-line discounts

Discounts often apply to a single item, not the whole basket: a damaged unit sold at 10% off, a manager comp on one dish, a clearance price on one SKU. Each line here carries its own discount, as a percentage or a flat amount, and it reduces both that line's printed amount and the base its tax is calculated on.

For example, a line of 3 x \$10.00 with a 10% line discount comes to \$27.00. If that line is taxable at 8.25%, the tax is 8.25% of \$27.00, which is \$2.2275 and rounds to **\$2.23**, for a line total of **\$29.23**. The discount is applied first, then tax is charged on the discounted amount, which is the correct order of operations.

There is also an order-level discount for a whole-basket promotion. It is applied on top of any per-line discounts and is spread across the taxed lines proportionally, so the tax on a discounted order still comes out right.

## Category subtotals

Give each line a category (Food, Beverages, Retail, Parts, Labor, whatever fits your business) and the **Categorized** and **Restaurant** templates group the lines under category headers, each with its own subtotal, before the order totals. It turns a long flat list into a readable, sectioned receipt, and the category subtotals always reconcile back to the order subtotal.

This is the layout expense reviewers and bookkeepers like, because it separates, say, taxable prepared food from zero-rated groceries at a glance.

## Bulk import from CSV

Typing forty lines by hand is the one thing a word processor and a spreadsheet template make genuinely painful. Here you can paste rows or upload a `.csv` and fill the whole itemized table at once.

The columns are: description, quantity, unit price, taxable, tax rate, discount, discount type, and category. The importer reads the taxable flag, matches each row's tax rate to one of your named rates (creating a new named rate if it sees one it does not recognize), and maps the discount and category straight through. A **Download sample CSV** button gives you a correctly formatted starter file, and that sample imports straight back in, so you can see the exact shape the tool expects and edit from there.

For a shop exporting an order from a POS or a spreadsheet, this is the fastest way to a finished itemized receipt.

## Thermal 80mm and full A4: six templates

The paid receipt tools that look realistic tend to watermark every free export. The truly-free tools skip the thermal look entirely and only make an A4 invoice. This generator gives you both, watermark-free:

- **Classic Thermal (80mm):** a monospace POS roll with stacked rows, a barcode option, and the tax breakdown as indented lines. This is the "printed at the register" look.
- **Detailed A4:** a full-page ruled table with dedicated Tax% and Discount columns and a grouped tax-breakdown box. Best when you want every number visible in its own column.
- **Categorized:** lines grouped under category headers with per-category subtotals, then the order totals.
- **Restaurant:** category groups plus table number, guest count, tip, and a service charge, laid out the way a hospitality bill reads.
- **Retail Branded:** a clean A4 page with your logo, an accent color header, and a customer block.
- **Minimal:** an ultra-plain narrow thermal receipt with the tightest possible layout and no barcode.

Thermal templates print at 58mm or 80mm; the full-page templates print at A4 (210mm). Whatever you pick, the PDF comes out at true physical size, so an 80mm receipt is genuinely 80mm wide when you print it. There is a matching PNG export for anything that wants an image instead of a PDF.

### Thermal or A4: which to choose

Use a thermal width when the receipt is meant to look like it came off a point-of-sale printer, or when you are actually printing on receipt-roll stock. Use A4 when the receipt will be emailed, filed, or attached to an expense or insurance claim, since a full page is easier to read on screen and prints on a normal office printer. The tax math is identical either way; only the layout changes.

## Currency and rounding

Pick from a long list of currencies and the whole receipt reformats: symbol, thousands separators, and decimal places. There is a European-decimal option for a comma decimal separator (10,50). Zero-decimal currencies such as the Japanese yen are handled correctly, with no stray decimals.

Every money value is rounded to the currency's normal precision for display, but the totals are summed from the unrounded figures and then reconciled so the printed total equals the sum of the printed components. You will not see a receipt where the lines add up to a different number than the total.

## A note on what this is (and is not)

An itemized receipt from this tool is a **business and record-keeping document**. It does the arithmetic for you accurately, but it is not a tax-filing document or a legal instrument, and it makes no compliance claim. You decide which tax rates apply to your sale; the tool does the math, not the tax-law determination. Keep your receipts with your own records and follow your accountant's or your jurisdiction's rules for how tax is charged and filed.

## Frequently asked questions

### Is this itemized receipt generator free?

Yes, it is 100% free with no signup and no watermark. Build and download as many itemized receipts as you want as PDF or PNG. Everything runs in your browser, so your store details, prices, and customer information never leave your computer.

### What makes this different from a normal receipt maker?

Most free receipt and invoice tools apply one tax rate to the whole order. This one taxes each line separately. Every line has its own taxable toggle and a selectable tax rate, so a single receipt can show food at 0% and alcohol at a different rate, and the tax breakdown groups the tax by rate. It also supports tax-inclusive pricing, per-line discounts, and category subtotals, which the static template tools cannot do.

### How does the per-line tax breakdown work?

Each taxable line is taxed at its own rate on its discounted amount. The receipt then prints one summary row per distinct rate in use, for example "Sales Tax 8.25% on \$40.00 = \$3.30" and "Alcohol 10% on \$21.00 = \$2.10." The grouped rows always add up to the total tax shown, so the numbers reconcile to the cent.

### What is the difference between tax-inclusive and tax-exclusive?

Tax-exclusive means your unit prices do not include tax, so tax is calculated on each line and added on top. Tax-inclusive means your prices already include tax, so the tool extracts the tax from each line instead of adding it. A \$110 line at 10% shows a \$110 total with \$10 of tax extracted in inclusive mode, or a \$121 total with \$11 of tax added in exclusive mode.

### Can I import my line items from a spreadsheet?

Yes. Paste rows or upload a `.csv` with columns for description, quantity, unit price, taxable, tax rate, discount, discount type, and category, and the whole itemized table fills in at once, including the tax rates each line uses. A "Download sample CSV" button gives you a correctly formatted starter file that imports straight back in.

### Can I add per-line discounts and category subtotals?

Yes. Each line can carry its own percentage or flat discount, which reduces that line's amount and the base its tax is calculated on. Give lines a category and the Categorized and Restaurant templates group them under headers with a per-category subtotal, while the order totals still reconcile.

### Is an itemized receipt a legal or tax document?

No. This tool makes an itemized business and record-keeping receipt. It does the arithmetic for you, but it is not a tax-filing or legal instrument and makes no compliance claim. You enter the tax rates that apply; the tool does the math, not tax-law determination.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Line Sheet Template Maker
description: Build a wholesale line sheet with product photos, wholesale and MSRP prices, colors, sizes, and MOQ. Pick a grid, list, or lookbook template and download a print-ready PDF, PNG, or CSV. Free, no signup, no watermark.
---

# Free Line Sheet Template Maker

Create a professional wholesale **line sheet** in minutes. Add each product with a photo, a style or SKU number, the wholesale price and the MSRP, colors, sizes, and minimum order quantity, then pick a grid, list, or lookbook template and download a print-ready PDF, PNG, or CSV. It is the working ordering document you send to retail buyers, and this tool builds it for free, entirely in your browser, with no signup and no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## What is a line sheet?

[![Watch How It Works](https://img.youtube.com/vi/lyhi2bWsvDM/maxresdefault.jpg)](https://youtu.be/lyhi2bWsvDM)

A line sheet is a photo-led catalog that a brand sends to wholesale buyers, sales reps, and stockists so they can place an order. It is not a marketing lookbook and it is not a retail price list. It is a scannable, priced document that answers a buyer's questions in one page: what is the style, what does it cost me, what will it retail for, what colors and sizes can I order, and what is the minimum.

Retail buyers review dozens of line sheets a season, so a clear one gets ordered and a messy one gets skipped. According to wholesale guides from Fit Small Business and Wholesale In A Box, the fastest way to lose an order is to leave out a price, a size range, or a way to contact you. This maker gives every one of those details its own field so nothing gets missed.

## What a wholesale line sheet must include

A complete line sheet, following standard wholesale practice documented by Fit Small Business, Wholesale In A Box, and the Plytix line-sheet software guide, includes:

- **Brand header:** your brand name, logo, and the season or collection, for example "Fall/Winter 2026 Wholesale Line Sheet."
- **A product photo for every style.** Buyers order from the image first. A clean photo on a plain background beats a styled lifestyle shot here.
- **A style or SKU number.** Buyers reference this on their purchase order, so it has to be on the sheet.
- **The product name.**
- **The wholesale price and the MSRP.** These are two different numbers and both belong on the sheet. More on this below.
- **Colors or colorways** the buyer can choose from. Keep this in step with your store: when a colorway is temporarily unavailable, you can [hide that variant in Shopify without deleting it](/blog/shopify-hide-variant-without-deleting) so it comes back with its price and SKU intact.
- **Sizes or the size range,** such as XS - 2XL or a full shoe run.
- **Minimum order quantity (MOQ)** and the **case or pack size,** so the buyer knows how the product ships.
- **A contact block:** who to email, a phone number, and an ordering link.
- **Terms:** your order minimum, payment terms, shipping terms, lead time, a valid-until date, and how to order.

A short catalog fits on one or two pages. A larger range runs longer, and this tool paginates it automatically so a product card is never cut in half.

## Wholesale price versus MSRP

The single most common mistake on a line sheet is showing only one price. A buyer needs two numbers.

- The **wholesale price** is what the retailer pays you per unit. If your tee is \$14 wholesale, that is the retailer's cost.
- The **MSRP** is the manufacturer's suggested retail price, what you recommend the store sells it for. If the same tee has a \$32 MSRP, the retailer can see the margin at a glance.

Showing both lets a buyer cost the order and check the retail markup in seconds. A common apparel guideline is a keystone markup, where the MSRP is about twice the wholesale price, though the right multiple depends on your category. This generator keeps wholesale and MSRP as two distinct fields and prints both on the grid and list templates, so you never force a buyer to email you for the retail price.

## How to make a line sheet

Making a line sheet with this tool takes four short steps.

1. **Add your products.** For each style, upload a photo and fill in the SKU, name, description, wholesale price, MSRP, colors, sizes, MOQ, and case-pack. Group products into sections such as Apparel, Footwear, or Accessories. You can also paste a list or import a CSV to load a whole catalog at once, then attach photos in bulk by naming the files after your SKUs.
2. **Choose a template.** Pick from eight designs across three layout families. Grid templates show a photo card per product, list templates give you a dense tabular sheet with small thumbnails, and lookbook templates lead with large imagery and minimal text.
3. **Style and set up the pages.** Set an accent color and font, choose how many products appear per row on grid and lookbook layouts, turn the branded cover page and the terms block on or off, and pick US Letter or A4 for the PDF.
4. **Download.** Export a print-ready PDF with a repeating footer and page numbers, a hi-res PNG for the web, or a CSV of your product data. Photos are embedded in the PDF and PNG, so what you preview is what you send.

## Grid, list, or lookbook: which layout to use

This tool ships three structural layouts because different catalogs need different presentations.

- **Grid** is the standard wholesale format and the right default for most brands. Each product gets a photo card with the SKU, name, both prices, colors, and sizes. Choose two, three, or four products per row: two for big editorial imagery, four for a dense catalog with many styles.
- **List** is best for a long run of styles where a buyer wants to scan and compare. It shows a small square thumbnail next to tabular columns for SKU, name, colors, sizes, wholesale, MSRP, and MOQ. The Wholesale list variant adds an accent column header and emphasizes the case-pack and minimum.
- **Lookbook** is a photo-forward, brand-led presentation with large hero images and minimal text, just the name and the wholesale price. Use it to set the mood, often paired with a separate priced sheet for ordering.

## Line sheet versus lookbook versus price list

These three documents are related but do different jobs. A **line sheet** is the priced ordering document a buyer uses to place a wholesale order, with photos, both prices, and buying details. A **lookbook** is a visual, editorial presentation of a collection that sells the brand story and usually carries little or no pricing. A **price list** is a simple one-page list of products and prices, often for retail customers, without the wholesale-specific fields like MOQ and case-pack. If you want a plain retail price list instead, use our price list generator; for wholesale, the line sheet is the format buyers expect.

## Tips for a line sheet that gets ordered

- **Use consistent photos.** Shoot every product the same way, on the same background, so the grid looks tidy and professional.
- **Keep SKUs on the sheet.** Buyers write them on the purchase order. A missing SKU slows the order down.
- **Always show both prices.** Wholesale and MSRP together answer the buyer's first two questions.
- **State your minimums up front.** Put the opening order minimum and reorder minimum in the terms block so there are no surprises.
- **Add a valid-until date.** Pricing changes. A clear expiry date protects your margins and creates urgency.
- **Make it easy to order.** Spell out exactly how to send a purchase order in the how-to-order note.
- **Export a PDF for email.** A PDF prints and forwards cleanly, keeps your layout, and does not depend on a spreadsheet program.

## Frequently asked questions

### What is a line sheet?

A line sheet is the photo-led wholesale catalog a brand sends to retail buyers so they can place an order. Each product shows a photo, a style or SKU number, the name, the wholesale price and the suggested retail price (MSRP), plus colors, sizes, minimum order quantity, and case-pack. It is a working ordering document, not a marketing lookbook, so it is clean, scannable, and priced.

### What should a wholesale line sheet include?

At minimum: your brand name and logo, the season or collection, a clear product photo for every style, a style or SKU number, the product name, the wholesale price and the MSRP, available colors and sizes, the minimum order quantity, and the case or pack size. Add a contact block and a terms section covering your order minimum, payment terms, shipping terms, lead time, and how to order. This tool has a field for each of these.

### What is the difference between wholesale price and MSRP on a line sheet?

The wholesale price is what the retailer pays you per unit. The MSRP, or manufacturer's suggested retail price, is what you recommend they sell it for in their store. Buyers need both: the wholesale price to cost their order and the MSRP to check the retail margin. This generator keeps them as two distinct fields and shows both on the grid and list templates.

### How do I make a line sheet for free?

Add each product with its photo, SKU, name, wholesale price, MSRP, colors, sizes, and MOQ, and group products into sections such as Apparel or Accessories. Pick a grid, list, or lookbook template, choose an accent color and font, turn the cover and terms pages on or off, and download. The live preview updates as you type, so you see the finished catalog before you export it.

### Is this line sheet generator free, with no watermark?

Yes. It is 100% free with no signup and no watermark on the export. Download as many line sheets as you like as a print-ready PDF, a PNG, or a CSV. Your product data and photos never leave your browser.

### Which layout should I use: grid, list, or lookbook?

Use a grid layout for most catalogs; it shows a photo card per product with all the buying details and is the standard wholesale format. Use a list layout when you have a long run of styles and want a dense, tabular sheet with small thumbnails and columns. Use a lookbook layout for a photo-forward, brand-led presentation with large imagery and minimal text, often paired with a separate priced sheet.

### Can I add a cover page and terms to my line sheet?

Yes. Toggle the cover page on for a branded first page with your logo, title, season, date range, and contact block. Toggle the terms block on to add your order minimum, payment terms, shipping terms, lead time, valid-until date, and how-to-order note at the end. Both appear in the preview and the exported PDF, and the PDF repeats a footer with your brand and a page number on every page.

### Will the product photos show up in the exported PDF?

Yes. Each photo is embedded directly into the file, so it appears in both the PDF and the PNG, not just the on-screen preview. Upload a photo per product, or use the bulk photo upload to match files to products by file name. If a product has no photo, the tool renders a clean placeholder rather than a broken image.

### Can I import my products or export the data?

Yes. Paste a list with one product per line, or import a CSV with Name plus optional SKU, Wholesale, MSRP, Colors, Sizes, MOQ, and Pack columns. Export a CSV of your product data at any time to keep a copy or move it between tools. Photos are not stored in the CSV because they would make the file very large.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Shopify llms.txt Generator & Validator

> Make your Shopify store visible to AI agents like ChatGPT, Claude, and Gemini with our free llms.txt generator specifically built for Shopify.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free llms.txt Generator

[![Watch How It Works](https://img.youtube.com/vi/0_KONU6zGaQ/maxresdefault.jpg)](https://youtu.be/0_KONU6zGaQ)

## What is llms.txt for Shopify?

The `/llms.txt` file is a new web standard that provides AI language models and agents with a concise, optimized map of your Shopify website's content. Think of it as a `robots.txt` or `sitemap.xml`, but specifically designed to help AI understand your Shopify store better.

By placing an `llms.txt` file in your Shopify store's root directory, you make it significantly easier for AI agents to find your products, read your policies, and accurately recommend your Shopify store to users.

> **Specification Note:** According to [llmstxt.org](https://llmstxt.org/), the formal specification defines only `/llms.txt`. There is no official spec for `llms-full.txt`. Providing `llms-full.txt` is highly recommended by the community to provide comprehensive context, but it is not strictly necessary.

## Understanding the File Types

- **`llms.txt`**: Generates a clear navigation structure, allowing AI systems to rapidly grasp your website's hierarchy and primary pages.
- **`llms-full.txt`**: Compiles an exhaustive document containing the complete text of your pages. This is highly recommended for providing deep context and detailed documentation to AI models.

## Verifying Your llms.txt File

The formatting requirements for the `llms.txt` standard are rigorous. This guarantees that AI agents, including ChatGPT, Claude, and Perplexity, can efficiently process your content. With our validator, you can instantly assess your file for syntax mistakes, official specification compliance, and overall AI readability.

### Core Structure Requirements:

1. **Root Placement**: The file needs to be hosted at the root level of your domain (e.g., `yourstore.com/llms.txt`).
2. **Document Architecture**: The file must begin with an H1 heading (`# Title`), which must be immediately succeeded by a Blockquote (`> Summary`).
3. **Link Formatting**: All included URLs must strictly follow the standard Markdown format: `[Link Text](URL)`.

### Frequent Validation Mistakes

- **Omitted Blockquote Summary**: AI crawlers rely heavily on the initial blockquote to rapidly determine what your website is about, eliminating the need to read the entire document first.
- **Invalid Content-Type Header**: Ensure your web server is correctly configured to deliver the file as `text/plain` or `text/markdown`.
- **Missing H2 Subheadings**: Organizing your URLs into distinct categories using H2 tags (like `## Policies` or `## Documentation`) assists AI in systematically categorizing your resources.

## How to use this tool

1. **Generator**: Enter your Shopify store's details and we'll use AI to fetch your site's structure and generate fully-compliant `llms.txt` and `llms-full.txt` files tailored for Shopify ecommerce.
2. **Validator**: Once you've added the file to your Shopify site (e.g., `yourstore.com/llms.txt`), enter your URL to test it against the official specification. We check for accessibility, formatting, headers, and markdown links.

> **Note:** The generated `llms.txt` and `llms-full.txt` files only include links discovered from your Shopify site's `sitemap.xml`. If your sitemap is missing or inaccessible, the output will be limited to just your homepage URL. Make sure your Shopify store has a valid, publicly accessible sitemap for the best results.

> **Cleanup:** The text in `llms-full.txt` is generated by scraping your site. AI/LLM is not being used to clean up this data because of processing expenses. We recommend using the **Edit** button to clean up headers and navigation elements manually, or you can ask ChatGPT to clean it up for you.

## Why Shopify Stores Need an llms.txt

- **AI Recommendations**: When shoppers ask ChatGPT or Claude for product recommendations, a Shopify `llms.txt` file helps the AI quickly parse your catalog.
- **Better Context**: Direct AI to your Shopify shipping, return, and privacy policies so they can answer customer questions accurately.
- **Future-Proofing**: As search shifts from traditional engines (like Google) to AI chat interfaces, optimized formatting will become as crucial as traditional Shopify SEO.

## Real-World Evidence & Examples

The influence of AI agents is already driving traffic and conversions. For instance, [the founder of Gummy Search saw the influence](https://x.com/foliofed/status/2054278092089360438?s=20) of AI recommendations firsthand:

![AI Agent Influence Evidence](/images/llms-txt-evidence.webp)

It's not just a trend - many major tech players have already adopted the standard, such as **Cloudflare** ([/llms.txt](https://developers.cloudflare.com/llms.txt) | [/llms-full.txt](https://developers.cloudflare.com/llms-full.txt)) and **Twitter/X** ([/llms.txt](https://docs.x.com/llms.txt) | [/llms-full.txt](https://docs.x.com/llms-full.txt)). Ecommerce stores are also quickly catching on to improve their AI Agent Engine Optimization. Here are a few real-world ecommerce examples:

- [Homepage - Phaedra Botanicals - Bio-Active Skincare](https://phaedrabotanicals.eu/llms.txt?utm_source=chatgpt.com)
- [Permanent Jewelry To Cherish Forever - Wang Jewelry | Fine Jewelry For Every Day & Luxury Gifts - Wang Jewelry](https://wangjewelry.com/llms.txt?utm_source=chatgpt.com)
- [Einkaufen bei gravur-unikat](https://shop.gravur-unikat.de/llms.txt?utm_source=chatgpt.com)
- [Outdoor Rocking Chairs & Patio Furniture | Rocking Furniture](https://www.outdoorsrockingchair.com/llms.txt?utm_source=chatgpt.com)
- [Smart Kids Planet - The Best Educational & STEM Toys](https://smartkidsplanet.com/llms.txt?utm_source=chatgpt.com)
- [MigreLief | Migraine Nutritional Supplements & Relief Products](https://www.migrelief.com/llms.txt?utm_source=chatgpt.com)
- [Cellular Glutathione Supplement with Glyteine® | Continual-G®](https://continualg.com/llms.txt?utm_source=chatgpt.com)
- [Tomorrow's Nutrition Prebiotic and Probiotic Supplements](https://tomorrowsnutrition.com/llms.txt?utm_source=chatgpt.com)
- [Best Fiber & Probiotic Supplement for Women | Gut Health | Regular Girl](https://regulargirl.com/llms.txt?utm_source=chatgpt.com)
- [NAD PLUS™ | NAD+ Supplements for Energy, Focus & Aging Smarter – Valen Labs](https://www.mynadplus.com/llms.txt?utm_source=chatgpt.com)
- [Send Gifts across Australia with plenty.gifts 🎁](https://plenty.gifts/au-en/llms.txt?utm_source=chatgpt.com)
- [Vopsea tencuiala pardoseala | Emex by Romtehnochim](https://emex.ro/llms.txt?utm_source=chatgpt.com)

## Frequently Asked Questions

**What is an `llms.txt` file?**

An `llms.txt` file is a standardized text file placed in your website's root directory that acts as a roadmap for AI agents (like ChatGPT and Claude). It provides a clean, easily readable breakdown of your website's structure, important links, and content, ensuring that large language models can efficiently scrape and understand your site.

**Where should the `llms.txt` file be located?**

The file must be hosted at the root level of your domain. For example, if your website is `mystore.com`, the file should be accessible directly at `mystore.com/llms.txt`.

**Do I really need both `llms.txt` and `llms-full.txt`?**

While only `llms.txt` is part of the formal standard, providing an `llms-full.txt` is highly recommended. The main `llms.txt` file acts as a navigation directory, while `llms-full.txt` provides the complete, unabridged text of those pages. AI models use the full version to acquire deep context, which is especially useful for detailed product descriptions, documentation, and policy pages.

**How does this improve my Shopify SEO?**

Traditional SEO optimizes your site for search engines like Google. Creating an `llms.txt` file is part of **AI Agent Engine Optimization (AEO)**. It ensures that when users ask AI chatbots for recommendations, the AI has a direct, reliable, and perfectly formatted source of truth about your Shopify products and services, increasing the likelihood that your brand gets recommended over competitors.

**How often should I update my `llms.txt` file?**

You should update your `llms.txt` and `llms-full.txt` files whenever you make significant changes to your website’s structure, add new main product categories, or update crucial policies. Keeping the file in sync with your site ensures AI models always have the most accurate information.


---

# Free Luggage Tag Template Maker

<!-- IMPORTANT: The "## " heading below must stay as the first level-2 heading. page.tsx uses
     extractBlogContent() which slices the markdown from the first "\n## " and discards everything
     above it. This file previously opened with the "## " heading on line 1 (byte 0, no leading
     newline), so indexOf("\n## ") skipped it and sliced from the FAQ instead - hiding the entire
     body AND the video below. Keeping an h1 above the first "## " fixes that. -->

## The free luggage tag template maker for personalized, printable bag tags

[![Watch how the free Luggage Tag Maker works](https://img.youtube.com/vi/1vhSO-80Km4/maxresdefault.jpg)](https://youtu.be/1vhSO-80Km4)

I tested this maker with a Classic Travel tag for a trip to Bali, at the default 2.25 x 4 inch size, with a return QR code on the back. I downloaded the PDF and checked it: each side measured 2.25 x 4.00 inches, the front and back sat side by side with a 0.25 inch gap between them to fold along, and the QR decoded to the name, address, phone, and email I typed.

## How to make a luggage tag

1. **Fill in the tag details.** Type the owner's name and the trip or destination for the front, then the return-to contact for the back: name, address, phone, and email. A short message such as "Reward if found" goes on the back too. Click **Fill example** to start from a finished tag.

![The Tag details form filled in for Alex Rivera, with a Bali 2026 destination, a Reward if found message, and the return-to name, address, phone, and email](/images/tools/luggage-tag-generator/lg-step-tag-details.webp)

2. **Choose a size.** The default is 2.25 x 4 inches. You can also pick 2.5 x 4.25, 3 x 5, 2 x 3.5, or 2 x 4 inches, or a custom size, and turn any of them to landscape. Letter and A4 are the paper choices in Bulk sheet mode.

![The Size and print section with the 2.25 x 4 inch size selected and the other luggage tag sizes beside it](/images/tools/luggage-tag-generator/lg-step-size-print.webp)

3. **Pick a template.** There are 14 templates, counting a blank one to build from scratch. Your details stay in place when you switch, so you can try several. The samples in the next section show six of them.

![The template picker with the Travel group: Classic Travel selected, Wanderlust Map, and Wedding Favor](/images/tools/luggage-tag-generator/lg-step-template.webp)

4. **Add a QR code if you want one.** Under **Scannable code**, choose **QR code** to put your contact details or a link on the tag, or **Barcode** for the Boarding Pass style. On most templates the code sits on the back. On the QR Contact template it sits on the front.

![The Scannable code section with the None, Barcode, and QR code options](/images/tools/luggage-tag-generator/lg-step-scannable-code.webp)

5. **Check both sides and download.** Use the **Front** and **Back** buttons above the preview to check each side, then download a PNG, PDF, or SVG. Every download puts the front and back side by side on one sheet.

![The luggage tag preview with the Front and Back switch, the front of a Classic Travel tag for Alex Rivera, and the Download PNG, PDF, and SVG buttons](/images/tools/luggage-tag-generator/lg-step-preview.webp)

## Luggage tag samples

These six fronts came out of the maker with the same details filled in. Only the template changed.

![Six luggage tag fronts for Alex Rivera: Classic Travel, Wanderlust Map, Wedding Favor, Leather Luxe, Bold Name, and Kids Bright](/images/tools/luggage-tag-generator/lg-samples.webp)

Top row: Classic Travel, Wanderlust Map, and Wedding Favor. Bottom row: Leather Luxe, Bold Name, and Kids Bright. Kids Bright shows only the first name, with an "I belong to" line above it and an allergy note for a child's bag.

## What to put on a luggage tag

The front only needs enough for you to spot your bag on the carousel: a name, initials, or a bright design. The back is for whoever finds the bag when it goes missing, so put the contact details there.

- **Your name**, as it appears on your booking.
- **A mobile number with the country code**, such as +1 555 123 4567, so the finder can call from abroad.
- **An email address** you check while travelling.
- **A destination or hotel address** for the trip, if you want the bag sent on rather than home.
- **A short message**, such as "Reward if found".

Keep your home address off the side that shows. A tag on the handle can be read by anyone in the queue, and an empty home is the last thing to advertise. If you want the address on the tag, put it on the back and use a holder with a flap, or put it in the QR code instead.

### Why a luggage tag has a front and a back

A luggage tag is a two-sided card. The front says whose bag it is: a name, a monogram, a destination, or a photo. The back holds the return-to name, address, phone, and email, plus a message such as "Reward if found" or "Fragile - handle with care".

The maker lets you edit and preview each side on its own. When you download, the front and back sit next to each other on one sheet with a 0.25 inch gap between them. Print the sheet at 100% scale, cut around the outside, fold along the middle, punch the hole, and loop it onto a strap. One print gives you a finished two-sided tag.

## The 14 luggage tag templates

The templates come in four groups, and each one has its own front and a matching back:

- **Travel:** Classic Travel (a navy front with gold accents and the full return-to back), Wanderlust Map (a map grid and a dotted route between two pins behind your destination), Wedding Favor (a script style for destination weddings and event favors), and Leather Luxe (a dark look with gold accents).
- **Personal:** Bold Name (the full name in large capitals, with your initials above it), Kids Bright (a big first name, an "I belong to" line, and an allergy note), Minimal Monogram (large initials with your full name in small capitals underneath), and Photo Tag (your own photo behind the name).
- **Specialty:** Corporate / Conference (a company logo, attendee name, event, and a slot for a lanyard strap), Boarding Pass (a ticket strip with a scannable barcode), Medical / Emergency ID (a red cross, blood type, allergies, and an emergency contact), Frequent Flyer (an airline program and number), and QR Contact (a plain front with a return QR code).
- **Start blank:** an empty tag to build from scratch.

Every template uses the same fields, so switching templates keeps what you typed. Each template shows only the fields it uses, and empty fields are hidden. The fields are:

- Owner or traveler name, and a monogram for the initials styles.
- Trip or destination and a date.
- A message such as "Reward if found".
- The return-to contact: name, an address over several lines, phone, and email.
- An alternate or emergency contact.
- Company, event, and role for conference tags.
- Flight number, and a frequent-flyer program and number.
- Blood type, allergies, and an emergency contact for medical tags.
- A logo upload for company tags and a photo upload for photo tags.
- A QR code or a barcode, if you want one.

## Standard luggage tag sizes

The default is 2.25 x 4 inches, a typical size for a tag that loops onto a bag handle. The other presets are 2.5 x 4.25 inches, 3 x 5 inches for a large tag, 2 x 3.5 inches (business card size), and 2 x 4 inches for a slim tag. You can also type a custom size, and turn any size to landscape.

Each side of the PDF is the real size you picked, so a 2.25 x 4 inch tag prints at 2.25 x 4.00 inches per side when you print at 100% scale with fit-to-page turned off. The layout shrinks long text to fit inside the cut edge.

## The return QR code

The QR code holds the return URL you paste, or the contact block you typed: your name, address, phone, and email as plain text. A finder scans it with a phone camera and sees those details. The preview shows the exact text the code holds, so you can check it before you print. The alternate contact and the message are not in the code, so put anything else important on the back as text.

The Boarding Pass template draws a barcode from your booking or bag code instead, and warns you if the value cannot be encoded in the chosen barcode type.

## Print luggage tags at home

Download the PDF and print it at 100% scale on card stock. Cut around the tag, fold along the gap between the front and the back, and punch the hole where the tag shows it. Laminating the card first makes it far more resistant to rain and wear. Punch the hole through the laminate afterwards and add a loop or a steel cable.

For a buckle strap or a lanyard, use the Corporate template. It draws a wide slot instead of a round hole, so the tag threads onto a strap or a clip.

## Bulk luggage tags for a family or a team

Switch to **Bulk sheet** mode to print tags for a group. Paste one traveler per line, or import a CSV using the sample file, and set how many copies each person needs. The maker lays each traveler's front and back side by side onto a US Letter or A4 sheet with a small gap between tags, so you cut around each pair and fold. Each traveler gets their own name, phone, and destination. The email, return address, and alternate contact you type are shared by every tag, which suits a family with one home address. Longer runs download as a ZIP of PNGs or as one PDF with several pages.

## A luggage tag template instead of Word

A luggage tag template in Word is usually a fixed table that does not match a real tag size, and it has no return QR code. This maker sizes the tag in inches, adds the QR, and lays out the front and back side by side, so you print once and fold. It works for personal luggage tags, branded tags for a business, kids' backpack tags, wedding favors, and medical ID tags.

## Frequently Asked Questions

### Is this luggage tag generator free?

Yes. It is free with no signup and no watermark. Make as many luggage tags as you want and download them as PNG, PDF, or SVG files, one at a time or as a bulk sheet for a family or team.

### How do I make a luggage tag template?

Pick a template, type the traveler name and your return-to contact details (name, address, phone, email), choose a size in inches, and download. The preview updates as you type, and you can switch between the front and back to check both sides before you print.

### Why does the luggage tag have a front and a back?

A luggage tag is two-sided. The front carries the name, monogram, or design, and the back is the "If found, please return to" contact panel. Use the Front and Back buttons to edit and preview each side. Every download puts the front and back next to each other on one sheet, so you print once, cut, and fold.

### What size should a luggage tag be?

The default here is 2.25 x 4 inches, a typical size for a tag that loops onto a bag handle. The tool also has 2.5 x 4.25, 3 x 5, 2 x 3.5 (business card size), and 2 x 4 inch presets, plus a custom size. Each side prints at its real size when you print the PDF at 100% scale.

### Can I add a QR code or a barcode to my luggage tag?

Yes. A QR code can hold your return URL or the contact details you typed (name, address, phone, and email as plain text), so whoever finds your bag can reach you. The Boarding Pass template draws a barcode from your booking or bag code. The preview shows the exact value the code holds.

### Can I make a printable luggage tag in Word?

You do not need Word. A Word luggage tag template is a fixed document that does not resize to a real tag size, has no return QR code, and does not lay the front and back side by side. This maker does all three and downloads a PDF, PNG, or SVG you can print from any program.

### How do I print DIY luggage tags at home?

Download the PDF and print it at 100% scale (turn off fit-to-page) on card stock. Cut around the tag, fold along the gap between the front and back, punch the hole, and add a loop or strap. Laminating the tag first makes it far more resistant to rain and wear.

### Can I make matching luggage tags for a whole family or team?

Yes. Switch to Bulk sheet mode, paste one traveler per line or import a CSV (a sample file is provided), and set how many copies each person needs. The tool lays each traveler's front and back side by side onto a US Letter or A4 sheet, ready to cut and fold. Each traveler gets their own name, phone, and destination, the email and return address are shared by every tag, and longer runs download as a ZIP of PNGs or one PDF.

### What is the difference between a luggage tag and a bag tag?

They are the same thing. A luggage tag, also called a bag tag, is the small two-sided card that loops onto a suitcase, backpack, or duffel, with a name on the front and your contact details on the back. This maker covers both, plus conference, wedding favor, kids, medical ID, and boarding pass styles.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Markup Calculator
description: Turn cost and markup into your selling price, gross profit, and margin, convert markup to margin, and price a whole catalog with CSV export.
---

# Free Markup Calculator

Set a price you can defend in seconds. Our free **markup calculator** takes your product cost and a markup percentage, then shows the selling price, the gross profit per unit, the markup, the gross margin, and the revenue multiplier. It runs entirely in your browser, works in reverse, converts markup to margin, and prices a whole catalog at once with CSV export. Built for Shopify sellers and ecommerce merchants. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Markup Calculator

[![Watch how the free Markup Calculator works](https://img.youtube.com/vi/9T38YuzHNvc/maxresdefault.jpg)](https://youtu.be/9T38YuzHNvc)

The tool has four modes. Pick the one that matches what you already know:

1. **Cost + Markup to price**: Enter your unit cost and the markup percentage you want. The calculator returns the selling price, gross profit, gross margin, revenue multiplier, and cost as a percent of price.
2. **Cost + Price to markup**: Enter your unit cost and the price you plan to charge. The calculator works backward to your markup percentage and margin.
3. **Markup and margin converter**: Type a markup and see the equivalent margin, or type a margin and see the markup. Both fields stay in sync.
4. **Bulk pricing table**: Add a row per product with its cost and markup, watch the selling price and margin fill in, and export the whole table as a CSV.

Your cost carries over when you switch between the first two modes, so you never retype it. Add an optional shipping cost or transaction fee to see your net profit after fees.

## Markup vs Margin: The Difference That Costs Merchants Money

Markup and margin describe the same gross profit, but they measure it against different bases. This is the single most common pricing mistake in ecommerce.

- **Markup** is profit as a percentage of **cost**. It answers, how much did I add on top of what I paid?
- **Margin** is profit as a percentage of **selling price**. It answers, how much of each sale do I keep?

$$
\text{Markup \%} = \frac{\text{Gross Profit}}{\text{Cost}} \times 100
\qquad
\text{Margin \%} = \frac{\text{Gross Profit}}{\text{Selling Price}} \times 100
$$

Take a product that costs \$20 and sells for \$60. The gross profit is \$40.

- Markup is \$40 / \$20 = 200%.
- Margin is \$40 / \$60 = 66.67%.

Same product, same profit, two very different numbers. Markup is always larger than margin because cost is always smaller than price. If a supplier quotes you a 40% markup and you think in margin terms, you will overestimate what you keep. Always ask which one a number refers to before you price against it.

## How to Calculate Markup

You only need two numbers: your cost and your selling price. Here is the method by hand.

1. **Find the gross profit**: Subtract the cost from the selling price. For a \$20 cost and a \$60 price, the gross profit is \$40.
2. **Divide profit by cost**: \$40 / \$20 = 2.
3. **Multiply by 100**: 2 * 100 = 200%. That is your markup.

The formula in one line:

$$
\text{Markup \%} = \frac{\text{Selling Price} - \text{Cost}}{\text{Cost}} \times 100
$$

To go the other way and price from a target markup, rearrange it:

$$
\text{Selling Price} = \text{Cost} \times \left(1 + \frac{\text{Markup \%}}{100}\right)
$$

A \$20 cost at a 200% markup gives \$20 \times 3 = \$60. The calculator above runs both directions for you.

## Cost-Plus and Retail Markup Pricing

**Cost-plus pricing** is the simplest pricing method there is. You take your unit cost and add a fixed markup to cover overhead and profit. It is fast, predictable, and easy to defend to a supplier or an accountant. The **cost plus pricing calculator** mode is the first tab: enter cost, enter markup, done.

**Keystone pricing** is the classic retail version of cost-plus. You apply a 100% markup, which doubles the cost. A \$25 item becomes \$50. Keystone gives you a clean 50% margin and is still the default in many physical stores.

Online sellers usually need more than keystone. Ads, shipping, returns, and platform fees all eat into a 50% margin fast. Many ecommerce and DTC brands price at a 150% to 300% markup, which is a 60% to 75% margin, to leave room for those costs. Use the **retail markup calculator** mode to test a few markups and watch the margin and net profit move before you commit.

## The Revenue Multiplier and Break-Even ROAS

The **revenue multiplier** is your selling price divided by your cost. It is the same thing as 1 plus your markup expressed as a decimal.

$$
\text{Revenue Multiplier} = \frac{\text{Selling Price}}{\text{Cost}} = 1 + \frac{\text{Markup \%}}{100}
$$

- 100% markup is a 2.00x multiplier.
- 200% markup is a 3.00x multiplier.
- 300% markup is a 4.00x multiplier.

The multiplier is a quick gut check on how far your price sits above cost. It is easy to confuse with **break-even ROAS**, but they are not the same number. Break-even ROAS (the ad revenue you need per dollar of ad spend just to cover the product cost) is 1 divided by your **margin**, not your markup:

$$
\text{Break-even ROAS} = \frac{1}{\text{Margin}}
$$

At a 66.67% margin (a 3.00x multiplier), your break-even ROAS is 1 / 0.6667 = about **1.50x**, and it climbs once you add shipping and fees. So a high multiplier does not mean a high ad target. If you run paid ads, pair this tool with our [ROAS calculator](/tools/roas-calculator) and [break-even calculator](/tools/break-even-calculator) to turn your margin into a real ad target.

## Markup to Margin Reference Table

Use this table to convert between markup and margin at a glance. The math is:

$$
\text{Margin \%} = \frac{\text{Markup \%}}{100 + \text{Markup \%}} \times 100
$$

| Markup % | Margin % | Revenue multiplier |
| --- | --- | --- |
| 10% | 9.09% | 1.10x |
| 20% | 16.67% | 1.20x |
| 25% | 20.00% | 1.25x |
| 50% | 33.33% | 1.50x |
| 60% | 37.50% | 1.60x |
| 75% | 42.86% | 1.75x |
| 100% | 50.00% | 2.00x |
| 150% | 60.00% | 2.50x |
| 200% | 66.67% | 3.00x |
| 300% | 75.00% | 4.00x |
| 400% | 80.00% | 5.00x |

Notice that markup climbs much faster than margin. To go from a 50% margin to a 75% margin you have to jump from a 100% markup to a 300% markup. That is why a small margin gain is worth chasing: it takes a big markup increase to get there.

## Tips for Setting Markup in Ecommerce

- **Price for the margin you keep, not the markup you add.** Set a target margin first, then read the markup it needs from the table above.
- **Add your real costs.** Put shipping and transaction fees into the optional inputs so the net profit tile shows what actually lands in your account.
- **Leave room for ads and returns.** If you plan to run paid traffic, a thin margin leaves little to cover ad spend plus the occasional refund, so build that cushion into your markup before you launch.
- **Check the whole catalog at once.** Use the bulk table to price a full product line, compare margins side by side, and export a CSV for your spreadsheet or supplier.
- **Revisit when costs change.** A supplier price increase or a new shipping rate quietly lowers your margin. Recalculate rather than assume.

## Frequently Asked Questions

### What is a markup calculator?

A markup calculator turns your product cost and a markup percentage into a selling price, then shows the gross profit and gross margin that price produces. This tool also works in reverse (cost and price to markup) and converts markup to margin.

### What is the difference between markup and margin?

Markup is profit measured against cost. Margin is the same profit measured against the selling price. A product that costs \$20 and sells for \$60 has a 200% markup but a 66.67% margin. Markup is always the bigger number.

### How do I calculate markup percentage?

Subtract the cost from the selling price to get the gross profit, then divide that profit by the cost and multiply by 100. For a \$20 cost and a \$60 price, the profit is \$40, so the markup is 40 / 20 * 100 = 200%.

### What is a good markup for retail and ecommerce?

Retail often uses keystone pricing, a 100% markup that doubles the cost and gives a 50% margin. Many ecommerce and DTC brands aim higher, 150% to 300% markup, to cover ads, shipping, and returns while staying profitable.

### How do I convert markup to margin?

Divide the markup by 100 plus the markup, then multiply by 100. A 50% markup converts to 50 / 150 * 100 = 33.33% margin. The converter tab does this both ways instantly.

### Is a 50% markup the same as a 50% margin?

No. A 50% markup gives a 33.33% margin, and a 50% margin needs a 100% markup. They only match at zero. This is why mixing them up quietly eats into profit.

### What is the revenue multiplier?

The revenue multiplier is your selling price divided by cost, or 1 plus the markup as a decimal. A 200% markup is a 3.00x multiplier. It shows how far your price sits above cost. It is not the same as break-even ROAS, which is 1 divided by your margin (about 1.50x at a 66.67% margin).

### Is this markup calculator free?

Yes, it is 100% free, runs in your browser, needs no signup, and supports unlimited calculations plus CSV export of the bulk pricing table.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Mercari Fee Calculator
description: Work out what you keep on a Mercari sale under the 2025 US structure - a flat 10% selling fee, no seller processing fee - add cost for profit, or reverse-solve the price.
---

# Free Mercari Fee Calculator

Know what a Mercari sale really leaves you before you list. Our free **Mercari fee calculator** uses the 2025 US structure: sellers pay a flat 10% selling fee on the item plus shipping, with no separate seller processing fee. Enter your price and it shows the fee and your exact net payout. Add your item cost and it also shows profit and margin. The same engine covers Poshmark, Depop, Etsy, and more. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Mercari Fee Calculator

[![Watch how the free Mercari Fee Calculator works](https://img.youtube.com/vi/gbN1mcMZb04/maxresdefault.jpg)](https://youtu.be/gbN1mcMZb04)

This quick walkthrough shows the calculator in action. For Mercari, it applies the flat 10% seller fee on item plus shipping and shows your net payout, or reverse-solves the price to hit a target.

The tool has two modes:

1. **Price to payout**: Enter your item price and, if you charge it, shipping. The calculator shows the 10% selling fee and your net payout. Add your item cost to see profit and margin too.
2. **Net to price**: Enter the payout you want to keep, and the calculator solves for the listing price that leaves you exactly that after the fee.

The tool opens on Mercari, and the platform dropdown lets you compare the same item against Poshmark, Depop, or Etsy. Mercari's help center is linked with the date we checked it.

## How Mercari Fees Work in the US

Under Mercari's 2025 US structure, the seller cost is simple: a **flat 10% selling fee** on the item price plus any shipping you charge. The separate seller payment-processing fee was eliminated, so 10% is the whole seller cost. That makes Mercari's math easy to reason about compared with marketplaces that stack a percentage and a fixed fee.

Buyers pay a separate **Buyer Protection fee** of about 3.6% at checkout. That is charged to the buyer, not to you, so it does not reduce your payout. This calculator models the seller's 10% fee.

## A Worked Example

Sell a **\$20** item:

- Selling fee: 10% of \$20 = **\$2.00**
- Net payout: **\$18.00** (before your own item cost)

If you charge shipping, the 10% applies to the item plus shipping total, because the fee is calculated on everything the buyer pays you for the sale. Add your item cost in the tool and it also shows profit and margin.

## What Changed and Why It Matters

Mercari's US seller fees have moved around. For years sellers paid a 10% selling fee plus a processing fee. In 2024 Mercari briefly shifted costs to a buyer-paid model, then moved to the current flat 10% seller fee with no separate seller processing charge. Because the structure has changed more than once, it is worth confirming the live rate on Mercari's help center. This calculator uses the current flat 10% seller structure.

## Fees the Calculator Does Not Include

The tool models the seller's 10% selling fee, which is the core seller cost. It does not add optional promotions or shipping-label costs you choose to absorb, and it does not subtract the buyer-paid Buyer Protection fee, since that does not come out of your payout. Add any promotion cost separately when you budget.

## Using the Reverse Mode

Switch to the **Net to price** tab, type the payout you want to keep, and the calculator solves for the listing price that leaves you exactly that after Mercari's 10% fee. With a flat percentage the math is clean, and the tool shows the breakdown so you can confirm the solved price nets your target.

## Mercari vs Poshmark vs Depop

The resale apps price sellers very differently. Mercari is a flat 10%. Poshmark takes a flat \$2.95 under \$15 or 20% above it. Depop now charges only processing of 3.3% + \$0.45. Switch the platform dropdown to run the same item through each. For a \$20 item, Mercari's \$2.00 fee undercuts Poshmark's \$4.00 (20%), while Depop's processing-only fee is lower still. Comparing before you list tells you where the same item nets the most.

## Frequently Asked Questions

The FAQ section on this page answers the common questions in full and is marked up as structured data. In short: under Mercari's 2025 US structure sellers pay a flat 10% selling fee on item plus shipping, there is no separate seller processing fee, the buyer-paid Buyer Protection fee does not reduce your payout, and the reverse mode solves the price you need to net a target. Always confirm the live figure on Mercari's help center before you rely on it.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Meta Description Generator
description: Write, measure, and preview meta titles and descriptions with a live Google SERP snippet. Pixel-accurate truncation, character and pixel counters, copy-ready meta tags, and bulk CSV export. Free, no signup.
---

# Free Meta Description Generator

Write a page title and **meta description** that look great in Google, and see exactly how they will appear before you publish. This free meta description generator shows a live Google SERP preview as you type, counts your characters, measures the real pixel width of your text, and warns you the moment your snippet will get cut off. When it looks right, copy a ready-to-paste block of meta tags. Everything runs in your browser, with no signup and nothing to install.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to use the meta description generator

The tool works in seconds and does not need any AI.

1. **Type your page title.** Watch the blue title in the Google preview update live. The counter shows your character count and the measured pixel width. It turns amber, then red, as you approach and pass the limit.
2. **Add a brand suffix (optional).** Append your store name as `Title | Brand`. The preview and counter measure the full composed title, brand included.
3. **Write your meta description.** The gray snippet under the title updates as you type. The counter tracks characters and pixels for the active preview mode.
4. **Set the URL and slug.** These render as a Google-style breadcrumb, for example `your-store.myshopify.com > products > blue-cotton-tee`.
5. **Toggle Desktop and Mobile.** Mobile is narrower, so the same description truncates earlier. Check both.
6. **Copy the meta tags.** Click Copy meta tags to grab the HTML block, then paste it into your page head or your Shopify SEO fields.

## Watch the tool in action

Prefer to see it first? This short walkthrough shows how to write a title and meta description, read the character and pixel counters, and copy the meta tags.

[Watch the meta description generator demo on YouTube](https://www.youtube.com/watch?v=yqPQex0Uy6c)

## Ideal meta description length

Google does not publish an official length, and it does not cut snippets by a fixed number of characters. It cuts by **pixel width**, because it renders text in a proportional font. A wide letter like W takes far more room than a narrow letter like i. That is why this tool measures the actual rendered width instead of only counting characters.

Here are the community-measured limits the tool uses as a guide:

- **Page title:** aim for about **60 characters** or under roughly **580 pixels** on desktop. Longer titles get an ellipsis.
- **Meta description, desktop:** about **150 to 160 characters**, which Google truncates near **920 pixels**.
- **Meta description, mobile:** shorter, closer to **120 characters** or about **680 pixels**.

These numbers are approximate. Treat the preview as a strong guide, not a guarantee. Google also rewrites descriptions when it thinks a different snippet matches the search query better.

## What makes a good meta description

A strong meta description reads like a one-sentence sales pitch for the page.

- **Lead with the benefit.** Say what the visitor gets, not just what the product is.
- **Include your focus keyword.** Put it near the start so it stands out, and because Google bolds matched terms.
- **Write for a person, not a robot.** Active voice, plain words, one clear idea.
- **End with a soft call to action.** Shop now, Order today, Learn more.
- **Make every page unique.** Duplicate descriptions across products waste the space and confuse Google.
- **Do not keyword-stuff.** One natural mention beats five forced ones.

## Good and bad examples

Here is a weak meta description for a product page:

> Blue t-shirt. Blue t-shirt for men. Buy blue t-shirt online. Best blue t-shirt store. Blue t-shirt cheap.

It repeats the keyword, says nothing useful, and reads like spam.

Here is a stronger version at a comfortable length:

> Shop our soft blue cotton crewneck t-shirt for men. Breathable, pre-shrunk cotton built for everyday wear. Free shipping and easy 30-day returns.

It leads with the benefit, uses the keyword once and naturally, and ends with a reason to click. It also fits inside the desktop pixel budget, so nothing gets cut off.

## Titles, descriptions, and pixels

Two descriptions can have the exact same character count and still truncate at different points. A line full of wide capital letters hits the pixel limit sooner than a line of narrow lowercase letters. Try it in the tool: type a row of `W` characters, then a row of `i` characters of the same length, and watch the pixel counter and the preview react differently. That is the whole reason the tool measures pixels rather than trusting the character count alone.

## Copy-ready meta tags

When your snippet looks right, the Copy meta tags button gives you a full HTML block:

- `<title>` with your composed title
- `<meta name="description">`
- Open Graph tags: `og:title`, `og:description`, `og:url`, `og:type`
- Twitter card tags: `twitter:card`, `twitter:title`, `twitter:description`

On a custom-coded site, paste the block into the head of your page. On Shopify, most themes and SEO apps give you a Page title and a Meta description field per product, page, and collection, so drop the title and description into those fields. The tool never sends your text anywhere, so nothing leaves your browser. It also costs nothing and there is no watermark.

## Bulk meta descriptions

Editing one page at a time is fine for a small store, but a big catalog needs bulk. Open the **Bulk** tab, paste one product per line as `Title, focus keyword`, or import a CSV. Pick a template and the tool formats a meta description for every product at once. Export a CSV with the title, the generated meta description, and the character count for each row, then paste it into your store or hand it to your team. It mirrors the bulk SEO editing in apps like Avada SEO Suite and Smart SEO, without the paid plan.

## Frequently asked questions

### What is a meta description generator?

A meta description generator helps you write and preview the short summary that appears under your page title in Google search results. This tool shows a live Google SERP preview as you type, counts characters and measures the pixel width of your title and description, and gives you a copy-ready block of HTML meta tags. It runs entirely in your browser and is free with no signup.

### How long should a meta description be?

Aim for about 150 to 160 characters on desktop and closer to 120 on mobile. Google does not cut snippets by a fixed character count though, it cuts by pixel width, roughly 920 pixels on desktop and around 680 on mobile. That is why this tool measures the real rendered width of your text and shows both the character count and the pixel width, so you can tell when your description will get truncated with an ellipsis.

### How long should a page title be?

Keep titles to about 60 characters or under roughly 580 pixels on desktop so Google shows the whole thing. Longer titles get cut off with an ellipsis. Put your most important keyword near the front, and add your brand at the end as Title | Brand if there is room. The tool measures the composed title, brand included, and warns you before it truncates.

### Why measure pixels instead of just counting characters?

Because Google renders snippets in a proportional font, a wide letter like W or M takes far more space than a narrow letter like i or l. Two descriptions with the same character count can truncate at very different points. Counting characters is a rough guide, but measuring the actual pixel width with the browser canvas is how you know whether your exact wording will fit.

### Why does it say Too long when I am under the character limit?

Because the badge reflects the **worse of two measurements**, not just the character count. Each field is graded on characters and on pixel width at the same time, and the color shows whichever one is closer to its limit. Google truncates by pixel width, so if your text is under the character count but over the pixel budget, it will still get cut off, and the badge turns red to warn you. A description at 119 of 120 characters but 709 of 680 pixels reads Too long because the pixels are over. This usually means your wording uses wide letters like W, M, or capitals. Shorten it or swap in narrower words to bring the pixel width back under the limit.

### Are these truncation limits exact?

No, they are approximate. Google has never published official snippet lengths, so these limits are community-measured values that tools like Moz, Yoast, and Portent converge on. Google also rewrites or replaces meta descriptions when it thinks a different snippet fits the query better. Treat the preview as a strong guide, not a guarantee.

### How do I add the meta tags to my Shopify or website?

Click Copy meta tags to grab an HTML block with your title, meta description, Open Graph, and Twitter card tags. On a custom site, paste it into the head of your page. On Shopify, most themes and SEO apps expose a Page title and Meta description field per product, page, and collection, so paste the title and description into those fields.

### Do I need to use the AI feature?

No. The tool is fully usable without ever touching AI. You can type your own title and description, watch the preview and counters update, and copy the meta tags. The optional AI Generate button just turns a product title and focus keyword into a few on-length draft descriptions you can click to use as a starting point.

### Can I generate meta descriptions in bulk?

Yes. Open the Bulk tab, paste one product per line as Title, focus keyword, or import a CSV. Pick a template and the tool formats a meta description for every product, then you can export a CSV with the title, meta description, and character count for each row.


---

<!--
  Writing rules for this file:
  - First real heading must be a `## ` (page.tsx slices from the first "\n## ").
  - No em dashes anywhere. Use a regular hyphen.
  - Avoid AI filler words (see CLAUDE.md Prohibited Words); state points directly.
  - Escape currency as \$ if you add any (remark-math).
  - The "Frequently asked questions" answers must match FAQ_ITEMS in page.tsx word for word.
-->

---
title: Free Name Tag Generator (Avery-compatible Badges)
description: Make printable name tags and event badges on a true-size Avery sheet, with department color-coding, auto-fit long names, and a scan-to-connect QR.
---

## Make a printable name tag sheet in minutes

[![Watch how the free Name Tag Generator works](https://img.youtube.com/vi/OvnMgb8IcIA/maxresdefault.jpg)](https://youtu.be/OvnMgb8IcIA)

A name tag looks simple, but printing a page of them so each badge lands on its Avery cell is where most people lose an afternoon. This free name tag generator does the fiddly part for you. You pick an Avery badge size, type one name or paste a whole roster, choose a template, and download a print-ready sheet sized to real badge stock at true scale, with cut guides so you can confirm the fit. No signup, no watermark, and everything runs in your browser.

It is built for the two ways people actually make badges. For a single booth badge, a returns desk, or a "staff" tag you reprint often, use the Same badge mode and one badge tiles across the whole sheet. For a conference, a workshop, a school event, or a team offsite, use Roster merge and print one badge per person from a pasted list or a CSV.

## Pick the right Avery name badge size

Name badges come in a handful of standard sizes, and the number printed on the box tells you the grid. This tool ships the common ones and reproduces each product's real badge size, columns, rows, and per-sheet count, then tiles them onto a true-size page with cut guides so you can line the print up to the physical stock.

- **Avery 5395** adhesive name badges: 2-1/3 by 3-3/8 inches, 8 per sheet, on US Letter. The everyday peel-and-stick conference badge.
- **Avery 5390** name badge inserts: 2-1/4 by 3-1/2 inches, 8 per sheet. Cards you slide into a clip or pin holder, so they are reusable.
- **Avery 5392** insert refills: 3 by 4 inches, 6 per sheet. A larger insert with room for a title, company, and event line.
- **Avery 5384** clip-style name badges with inserts: 3 by 4 inches, 6 per sheet. A reusable clip holder you slide a printed insert into, like a larger 5390. Avery calls it clip-style, not adhesive.
- **A4 inserts**: two common generic A4 badge sizes, 90 by 55 mm and 80 by 50 mm, at 10 per sheet, centered on the 210 by 297 mm page. These are sizes, not specific Avery part numbers.

If you are printing on blank cardstock or a non-Avery sheet, the Custom size option lets you set the columns, rows, badge size, margin, and gutter yourself, with a warning if the grid would overflow the page.

## The seven badge templates

Every badge you print uses one of seven templates. Each one is a different structure, not just a different color, so you can match the badge to the occasion.

1. **Hello my name is.** The classic. A bold color bar reads "HELLO my name is" across the top, with a large handwritten-style name area below. Great for icebreakers, open houses, and first-day orientations where the name is the only thing that matters.
2. **Conference.** A name hero with a title, company, and a small event line, plus a colored role tag. This is the workhorse for attendee and speaker badges.
3. **Department color-band.** A vertical color band down the side, keyed to the department or role. Perfect for staff, volunteers, and multi-team events where people need to spot a role across a room.
4. **Minimal.** A centered name with one subtitle line and a thin accent rule. Clean and quiet when the branding lives on the lanyard instead of the badge.
5. **With logo.** A logo lockup on top with the name below. Upload your logo once and it tiles onto every badge on the sheet.
6. **With photo.** A photo on the left with the name, title, and company on the right. The layout for staff, security, and visitor badges where a face matters.
7. **Scan to connect.** A QR code that decodes to a vCard, next to the name and title. Attendees scan to save a contact instead of trading paper cards.

Switch templates at any time and the whole sheet re-renders. Fields the current template does not print are hidden, so you never fill in a box that does nothing.

## Color-code a roster by department

This is the feature that turns a plain roster into a sorted, scannable event. Add a department or role to a badge and the Department template paints a color band unique to that team, while the Conference template adds a matching colored role tag. Common values like Sales, Engineering, Marketing, Speaker, Staff, Volunteer, and VIP each get a distinct, legible color out of the box. Any other value is hashed to a stable color, so two different departments never collide on the same shade and the same department always gets the same color across every page.

For a large event, put the department in its own CSV column and the whole roster color-sorts itself. Volunteers read green, speakers read purple, VIPs read red, and your door team can direct people at a glance without reading a single word.

## Long names never clip

Real rosters are full of long names, and a fixed font size either clips them or forces you to resize each badge by hand. Every template here auto-fits the name instead. A long name shrinks just enough to fit its badge on one line, down to a sensible floor, while short names stay big and bold. The sizing is deterministic and baked into the export, so the name you see in the preview is the exact size that prints in the PDF and PNG. You never have to babysit a spreadsheet of edge cases.

## Print at true size so it lands on the stock

A badge sheet only works if it prints at the real physical size. This tool generates the page at exactly 8.5 by 11 inches for Letter or 210 by 297 mm for A4, with the badge grid positioned from the preset's margins. To print it correctly:

1. Download the print-ready PDF.
2. In your print dialog, set the scale to 100% and turn off "fit to page" or "shrink to fit."
3. Do a test print on plain paper first.
4. Hold the test page against a blank Avery badge sheet, up to a window if it helps, and confirm the cut guides line up with the die-cut edges.
5. Load the real sheet and print.

The cut guides are a light dashed outline around each badge. Leave them on to check alignment and to cut plain cardstock cleanly, or turn them off for a borderless look.

## Reuse a partial sheet

Peeled a few badges off an adhesive sheet already? Set the Start on badge number so printing begins on the first unused cell and the used positions stay blank. It is a small thing that saves a lot of half-used Avery sheets over a year of events.

## Bulk merge from a paste or a CSV

Roster merge takes input two ways. Paste one attendee per line for a quick list, and add commas to include a title, company, and department in order. Or import a CSV with name, title, company, department, event, email, and website columns for a full event roster. A sample CSV is one click away so you can match the format exactly. The generator maps the columns, flags any row missing a required name, and lays out one badge per person across as many pages as the roster needs.

## Export options

Every export is free and unwatermarked:

- **PDF** at true page size, ready to print at 100% scale.
- **PNG** for a single sheet, or a ZIP of PNGs when the roster spans multiple pages.
- **SVG** of the first sheet for vector editing.

Because the tool is fully client-side, your roster, photos, and logo never leave your device. There is nothing to upload and no account to create.

## Name tag or name tent?

These two get mixed up, so it is worth being clear. A name tag, or name badge, is a flat adhesive or clip and pin insert worn on a person, tiled many to a sheet. A name tent is a folded, free-standing card that sits on a desk or table and is read from both sides, printed one per sheet. This tool makes worn badges. If you need the folded desk version for a panel, a classroom, or a boardroom, use the name tent option in the table tent generator instead.

For a tag on a suitcase rather than a person, the [luggage tag maker](/tools/luggage-tag-generator) prints a front with your name and a back with your return address.

## Tips for great event badges

- Keep the name the biggest thing on the badge. Titles and companies support it, they do not compete with it.
- Use the department color-band for anyone who works the event, and the plain Conference or Hello template for attendees. The contrast helps staff stand out.
- For lanyards, remember the badge often flips. A large, centered name reads from a distance even at an angle.
- Print a few spare blank badges. Walk-ins and typos happen at every event.
- If you are printing hundreds, do one full test sheet on plain paper and cut one badge out to check the real size before committing the box of stock.

## Frequently asked questions

### Which Avery name badge sizes are supported?

For US Letter: Avery 5395 adhesive badges (2-1/3 by 3-3/8 inches, 8 per sheet), 5390 clip and pin inserts (2-1/4 by 3-1/2 inches, 8 per sheet), 5392 insert refills (3 by 4 inches, 6 per sheet), and 5384 clip-style badges with inserts (3 by 4 inches, 6 per sheet). For A4 there are two common generic insert sizes, 90 by 55 mm and 80 by 50 mm, at 10 per sheet. A Custom size option covers non-Avery stock and blank cardstock. Each sheet is sized to the real stock at true scale with cut guides, so you print at 100 percent and confirm the fit with a quick test print.

### How do I print name tags at the correct size?

Download the PDF and print it at 100% scale with fit-to-page turned off. The page is generated at the exact physical size, 8.5 by 11 inches for Letter or 210 by 297 mm for A4, so every badge lands on its Avery cell. Run one test print on plain paper, hold it up to a blank badge sheet to confirm alignment, then print on the real sheet.

### Can I print a whole event roster at once?

Yes. Switch to Roster merge, then paste one attendee per line or import a CSV with name, title, company, department, and event columns. The generator lays out one badge per person across as many pages as it takes, so a 200-person conference is a few clicks. A downloadable sample CSV shows the exact format. This bulk merge is the step most free design galleries hide behind a paid plan.

### What is the department color-coding feature?

When a badge has a department or role value, the Department template paints a color band that is unique to that team, and the Conference template adds a matching colored role tag. Sales, Engineering, Marketing, Speaker, Staff, Volunteer, and VIP each get a distinct, legible color, and any other value is hashed to a stable color so two different departments never share one. It turns a roster into color-sorted badges with no manual work.

### Do long names get cut off?

No. Every template auto-fits the name: a long name like Konstantinos Papadopoulos shrinks just enough to fit its badge on one line instead of clipping or spilling into the next cell. The same sizing is baked into the exported PNG and PDF, so what you see in the preview is what prints.

### How does the scan-to-connect QR badge work?

The Scan to connect template prints a QR code that decodes to a standard vCard built from the name, title, company, email, and website. When someone scans it with a phone camera, they get a prompt to save the person as a contact. It is a fast, paper-free way for attendees to exchange details without typing them by hand.

### What is the difference between a name tag and a name tent?

A name tag, or name badge, is a flat adhesive or clip and pin insert worn on a person, and it is tiled many to a sheet on Avery badge stock. A name tent is a folded, free-standing card that sits on a desk or table and is read from both sides, printed one per sheet. This tool makes worn badges. If you need the folded desk version, use the name tent option in the table tent generator instead.

### I already used some badges on the sheet. Can I skip them?

Yes. Use the Start on badge number control to leave the first badges blank so printing begins on the first unused cell. This lets you reuse a partial Avery badge sheet instead of wasting it.

### Is the name tag maker free and is there a watermark?

It is completely free with no signup and no watermark. Everything runs in your browser, your roster and photos never leave your device, and you can download as many print-ready PDF, PNG, or SVG sheets as you like.


---

<!--
  Writing rules for this article:
  - No em dashes anywhere. Use a hyphen.
  - Escape currency dollar signs as \$ (remark-math treats a bare $ as math).
  - Short sentences. First "## " heading is where page.tsx starts rendering.
  - The "### question" blocks must match the FAQ_ITEMS array in page.tsx.
-->

# Free Nutrition Label Maker

Build a compliant-looking FDA Nutrition Facts or Supplement Facts panel in your browser. Type the numbers you already have, pick a format, and download a print-ready label. This tool formats and calculates. It does not guess your recipe, so the numbers stay yours.

<!-- IMPORTANT: this first "## " heading must stay here. page.tsx uses extractBlogContent() which
     slices the markdown from the first "\n## " and drops everything above it (h1, intro). Without a
     "## " heading before it, the YouTube thumbnail below would never render on the page. -->

## How to use this nutrition label maker

[![Watch how to make an FDA nutrition facts label](https://img.youtube.com/vi/C2kWYSQlIzk/maxresdefault.jpg)](https://youtu.be/C2kWYSQlIzk)

This short video walks through the whole flow. You pick a format, type your per-serving numbers, let the %DV column fill in on its own, and export a print-ready PNG, PDF, or embed. No signup and no watermark.

![Free nutrition label maker with the editor on the left and a live bilingual FDA Nutrition Facts panel on the right, showing calories, Total Fat, Sodium, Total Carbohydrate, Added Sugars, Protein, Vitamin D, Calcium, Iron, and Potassium with auto-filled %DV, plus PNG, PDF, Print, and Embed export buttons](/images/tools/nutrition-label-generator/nutrition-label-example.webp)

## What this nutrition label maker does

This is a nutrition label formatter and designer, not a recipe calculator. You enter the nutrient amounts for one serving of your product. The tool then does three things for you:

- It draws a pixel-accurate FDA panel with the correct black-on-white typography, heavy title rule, and hairline separators.
- It calculates the % Daily Value (%DV) column automatically from FDA Daily Values, and lets you override any row.
- It applies FDA rounding rules to the amounts that print on the label.

You get more than 20 real FDA formats, a live preview that updates as you type, display toggles, a width slider, and clean PNG, PDF, and embeddable HTML exports. There is no signup and no watermark.

## How to make a nutrition facts label

Making a label takes about five minutes once you have your per-serving numbers.

1. **Pick a format.** Start with Standard Vertical for most foods. Choose Tabular or Linear for small packages, Dual Column when you declare both a serving and the whole container, or Supplement Facts for pills and powders.
2. **Set the serving.** Enter servings per container, the household serving size like 2/3 cup, and the metric amount in grams or milliliters.
3. **Type the amounts.** Fill in calories and each nutrient. The %DV fills in on its own. Leave a field blank to hide that row, or type 0 to declare a true zero.
4. **Add the extras.** List your ingredients, a Contains allergen statement, and your manufacturer or distributor line. Add custom vitamin and mineral rows if you need them.
5. **Adjust the look.** Use the toggles and the width slider to match your package, then download the PNG or PDF or copy the embed code.

## Which nutrition label format should I choose?

The FDA allows several panel formats so the label can fit different package shapes. Here is when each one is used.

- **Standard Vertical.** The default panel for most packaged foods with enough label space.
- **Compact Vitamins.** A vertical panel that runs the vitamins and minerals across one line to save height.
- **Simplified.** For foods where most nutrients are present in insignificant amounts. It lists fewer nutrients and uses a shorter footnote.
- **Dual Column (per serving / per container).** Required when a container holds between one and two servings, or two or more servings that people may eat in one sitting.
- **As Packaged / As Prepared.** Two columns for a food eaten two ways, such as dry cereal and cereal with milk, or a dry mix and the prepared dish.
- **Aggregate Display.** One panel that declares several foods in a variety pack.
- **Tabular and Linear.** For small and intermediate packages that are too short for a tall vertical panel. Tabular lays the panel out sideways, and Linear runs the whole declaration as one line of text.
- **Infants and Children.** Separate panels and Daily Values for infants through 12 months and children 1 through 3 years.
- **Per 100g.** A reference column expressed per 100 grams.
- **Supplement Facts.** For dietary supplements. See the section below.

## FDA Daily Values, the %DV formula, and rounding rules

The % Daily Value (%DV) tells a shopper how much one serving of your food contributes to a day of eating. This section is the reference chart behind the tool: the Daily Values it compares against, the formula it uses, and the FDA rounding rules it applies. Every number is from 21 CFR 101.9.

### FDA Daily Values reference chart

A Daily Value (DV) is the FDA reference amount for one nutrient in one day. Adults and children 4 years and older share one set of Daily Values. Children 1 through 3 years use a separate, lower set. These are the Daily Values the tool uses.

| Nutrient | Unit | Adults and children 4+ | Children 1-3 years |
| --- | --- | --- | --- |
| Total Fat | g | 78 | 39 |
| Saturated Fat | g | 20 | 10 |
| Cholesterol | mg | 300 | 300 |
| Sodium | mg | 2,300 | 1,500 |
| Total Carbohydrate | g | 275 | 150 |
| Dietary Fiber | g | 28 | 14 |
| Added Sugars | g | 50 | 25 |
| Protein | g | 50 | 13 |
| Vitamin D | mcg | 20 | 15 |
| Calcium | mg | 1,300 | 700 |
| Iron | mg | 18 | 7 |
| Potassium | mg | 4,700 | 3,000 |

### How to calculate % Daily Value

The formula is a single division:

**% Daily Value = (nutrient amount / Daily Value) x 100**

For example, 460 mg of sodium divided by the 2,300 mg Daily Value is 0.20, so 20%. Eight grams of total fat against 78 g is about 10%. The result is then rounded, and the rounding depends on the nutrient.

Macronutrients round to the nearest whole percent. Vitamins and minerals use the increment rule in 21 CFR 101.9(c)(8)(iii):

| Calculated %DV | Rounds to the nearest |
| --- | --- |
| Up to and including 10% | 2% |
| Above 10% up to and including 50% | 5% |
| Above 50% | 10% |

So iron at 8 mg / 18 mg = 44.4% rounds to 45%, and potassium at 235 mg / 4,700 mg = 5.0% rounds to 6%. This is why a vitamin or mineral %DV is almost never an odd number.

### FDA amount rounding rules

The number that prints next to each nutrient is also rounded, per 21 CFR 101.9(c). Very small amounts print a phrase like "less than 1 g" instead of a number.

| Nutrient | Rounding rule |
| --- | --- |
| Calories | Under 5 to 0; 50 or less to the nearest 5; over 50 to the nearest 10 |
| Fat (total, saturated, trans) | Under 0.5 g to 0; under 5 g to the nearest 0.5 g; 5 g or more to the nearest 1 g |
| Cholesterol | Under 2 mg to 0; 2 to 5 mg to "less than 5 mg"; over 5 mg to the nearest 5 mg |
| Sodium | Under 5 mg to 0; 5 to 140 mg to the nearest 5 mg; over 140 mg to the nearest 10 mg |
| Carbohydrate, fiber, sugars, added sugars, protein | Under 0.5 g to 0; 0.5 to 1 g to "less than 1 g"; 1 g or more to the nearest 1 g |
| Vitamins and minerals | Rounded to the appropriate figures in the FDA tables under 21 CFR 101.9(c)(8) |

If your lab gives you a different %DV, type it into the %DV box to override the calculation for that row.

### Vitamins and minerals and their Daily Values

Beyond the four micronutrients the FDA requires (Vitamin D, calcium, iron, and potassium), you can declare others as custom rows. These are their adult Daily Values.

| Nutrient | Unit | Daily Value |
| --- | --- | --- |
| Vitamin A | mcg | 900 |
| Vitamin C | mg | 90 |
| Vitamin E | mg | 15 |
| Vitamin K | mcg | 120 |
| Thiamin | mg | 1.2 |
| Riboflavin | mg | 1.3 |
| Niacin | mg | 16 |
| Vitamin B6 | mg | 1.7 |
| Folate | mcg | 400 |
| Vitamin B12 | mcg | 2.4 |
| Magnesium | mg | 420 |
| Zinc | mg | 11 |
| Phosphorus | mg | 1,250 |

## Nutrition labels for infants and children

A food labeled specifically for infants through 12 months or children 1 through 3 years follows the special rules in 21 CFR 101.9(j)(5), and the tool applies them for you when you pick the Infant or Children format.

- **Infants through 12 months.** The panel declares the nutrients but shows no % Daily Value for saturated fat, trans fat, cholesterol, sodium, dietary fiber, total sugars, or added sugars, and it carries no footnote. Total fat, total carbohydrate, protein, and the vitamins and minerals still show a %DV against the infant Daily Values.
- **Children 1 through 3 years.** The panel shows a %DV for every nutrient that has a child Daily Value, and its footnote is based on a 1,000-calorie diet rather than the 2,000-calorie diet used for adults.

## Small package and abbreviated label rules

Small packages get relief from the full vertical panel. If your total surface area for labeling is limited, the FDA lets you use the Tabular or Linear format, and very small packages may use abbreviated nutrient terms like Sat. Fat and Total Carb. The Tabular Small Package format in this tool already switches to those shorter terms for you.

If several nutrients are present at insignificant amounts, the Simplified format is the right choice. It declares the core nutrients and swaps the long footnote for the shorter one.

## Supplement Facts vs Nutrition Facts

A dietary supplement uses a Supplement Facts panel, not a Nutrition Facts panel. The differences matter.

- The serving is a count, such as 1 capsule or 1 scoop, rather than a household measure with grams.
- Ingredients without an established Daily Value are marked with a dagger symbol and a Daily Value not established footnote.
- A proprietary blend can be declared by its total weight, with the blend ingredients listed underneath without individual amounts.
- The panel can include a Children or a Bilingual variant, both of which are available here.

Add your vitamins and minerals as custom rows, and the Supplement Facts formats will place them in the panel with their %DV or a dagger where no Daily Value exists.

## Export options: PNG, PDF, and embed

When your panel looks right, you have three clean ways to use it.

- **PNG.** A high-resolution image exported at 4x scale so it stays crisp when printed on packaging. Turn on the transparent background toggle to get a cut-out image with no white box.
- **PDF.** A print-ready page sized to the panel proportions. Print at 100% scale, not fit to page, so it prints at true size.
- **Embed HTML.** A self-contained snippet built from inline styles only. Paste it onto a product page and it renders anywhere with no external CSS file and no watermark.

## Tips for an accurate, compliant label

- Enter amounts per single serving, not per container, unless you are using a per-container column.
- Declare a true zero as 0 so the row prints 0 rather than disappearing.
- Keep your ingredient list in descending order by weight, and mirror it in the Contains allergen line.
- Verify your final numbers and format against current FDA regulations before you print packaging you sell.

## Frequently asked questions

### Is this nutrition label maker really free?

Yes. Every FDA Nutrition Facts and Supplement Facts format, the auto %DV calculation, and all PNG, PDF, and embed exports are 100% free. There is no signup, no email, and no watermark on the label.

### How does the %DV column calculate automatically?

You type the amount of each nutrient and the tool divides it by the FDA Daily Value. For example, 460mg of sodium against the 2,300mg Daily Value is 20%. Macronutrients round to the nearest whole percent; vitamins and minerals use the FDA increment rule (nearest 2% up to 10%, 5% from 10% to 50%, 10% above 50%), so 8mg of iron is 45%. You can type your own number in the %DV field to override any row.

### Does the tool apply FDA rounding rules?

Yes. Displayed amounts follow 21 CFR 101.9 rounding: calories over 50 round to the nearest 10, fat under 5g rounds to the nearest 0.5g, sodium rounds to the nearest 5mg or 10mg, and small amounts print phrases like less than 1g. Macronutrient %DVs round to a whole percent, while vitamin and mineral %DVs use the FDA increments (nearest 2% up to 10%, 5% from 10% to 50%, 10% above 50%).

### Which nutrition label format should I choose?

Use Standard Vertical for most packages. Use Tabular or Linear when the package is small and short. Use Dual Column when a serving and the whole container both need declaring, or for an as-prepared food. Use the Infant or Children formats for those age groups, and Supplement Facts for pills, powders, and capsules.

### What is the difference between Nutrition Facts and Supplement Facts?

Nutrition Facts panels go on conventional foods and beverages and always list calories and the core macronutrients. Supplement Facts panels go on dietary supplements, list the serving as a count like 1 capsule, allow a proprietary blend, and mark ingredients without a Daily Value with a dagger symbol.

### Can I put this label on real product packaging?

The tool produces an FDA-styled panel with authentic typography, but you are responsible for the accuracy of the numbers you enter and for meeting current FDA labeling regulations. Verify your values, allergen statement, and format with a qualified expert before printing on packaging you sell.

### How do I export a transparent label or embed it on my site?

Turn on the transparent background toggle and download the PNG to get a cut-out image with no white box. To embed on a product page, click Embed to copy a self-contained HTML snippet that uses only inline styles, so it renders anywhere with no external CSS and no watermark.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     
     SEO NOTE: 
     - This content is ~1,200 words, fitting perfectly in the 1,000-1,500 optimal range for tool pages.
     - Keywords are scattered naturally across all sections to avoid keyword stuffing. -->
# Free Shopify Order Bill Splitter

Buying something online with friends, roommates, or coworkers? Our free **order bill splitter** makes
group orders fair in seconds. Import items straight from a Shopify product link, choose who shares
each one, and split shipping, tax, and discounts the right way. Then see exactly who pays whom with
the fewest payments. No signup is required, and nothing you enter leaves your browser.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it. -->
## How the Order Bill Splitter Works

[![Watch How It Works](https://img.youtube.com/vi/j3s7Sx0LQnE/maxresdefault.jpg)](https://youtu.be/j3s7Sx0LQnE)

Splitting a shared cart by hand is painful. One person pays at checkout, then has to work out what
everyone else owes once shipping, tax, and a discount code are in the mix. Whether you need a simple **splitting calculator** or a complex group order tool, this does the math
for you in four quick steps:

1. **Add the people** sharing the order (for example Alex, Jordan, and Sam).
2. **Add the items.** Paste a Shopify product link to import the name and price automatically, or
   type items in by hand. For each item, pick who paid and who shares it.
3. **Add shipping, tax, and any discount.** Choose who fronted these order extras.
4. **Read the results, then share them.** You get a per-person breakdown and the simplest set of
   payments to settle up. Copy a shareable link, download a PDF, or paste a text summary into your
   group chat so everyone sees who pays whom.

## Why a Shopify Bill Splitter Beats a Restaurant Splitter

A normal bill splitter is usually built for a dinner check, and a basic **rent splitting calculator** or **splitting rent calculator** only handles flat amounts. An online order is different. It has shipping,
store-wide discount codes, sales tax, and items that only some people want. This tool handles all of
that:

- **Import from Shopify.** Paste a product URL and the item name and price fill in automatically, so
  you do not retype a 15 item cart. You can also paste a whole cart at once.
- **Proportional shipping.** Shipping can split evenly (flat) or by each person's share of the order
  (proportional), which is fairer when one person is buying most of the cart.
- **Discount codes spread correctly.** A 10% off coupon reduces everyone's share in proportion to
  what they bought, exactly like it would on the real order total.
- **Tax on the right base.** Tax applies after the discount, then splits by each person's share.

## A Real Example: Three Friends, One Shared Order

Here is the exact problem this **cost splitting calculator** solves. A store gives free delivery on orders over \$500, so Alex,
Jordan, and Sam decide to buy together in one cart to save on shipping. They land just under the
threshold, so a small shipping fee still applies. Alex pays the whole bill at checkout. When the box
arrives, the invoice shows each item, a combined total, a shipping charge, a discount code, and tax.
Nobody knows who owes what.

The order looks like this:

| Item | Price | Bought by |
| --- | --- | --- |
| Wireless Earbuds | 200.00 | Alex |
| Yoga Mat | 150.00 | Jordan |
| Phone Case | 120.00 | Sam |
| **Item subtotal** | **470.00** | |

On top of that, the invoice has:

- A 10% discount code, which takes off 47.00.
- Shipping of 15.00, split proportionally (the bigger your share of the cart, the more shipping you cover).
- Sales tax of 8%, charged on the discounted subtotal.

The fair rule is simple: each person pays for their own item, gets their slice of the discount, and
covers their share of tax and shipping in proportion to what they bought. Here is how the math lands:

| Person | Item | Discount (10%) | Shipping share | Tax (8%) | They pay |
| --- | --- | --- | --- | --- | --- |
| Alex | 200.00 | -20.00 | 6.38 | 14.40 | **200.78** |
| Jordan | 150.00 | -15.00 | 4.79 | 10.80 | **150.59** |
| Sam | 120.00 | -12.00 | 3.83 | 8.64 | **120.47** |
| **Total** | **470.00** | **-47.00** | **15.00** | **33.84** | **471.84** |

The three shares add up to the 471.84 grand total exactly, with nothing rounded away. Since Alex
fronted the full amount at checkout, the tool nets it out to two clean payments: Jordan pays Alex
150.59 and Sam pays Alex 120.47. Paste your own items above and you get the same breakdown for your
order in seconds.

![Order bill splitter results panel showing the per-person breakdown of who gets money back and who owes, plus the simplest settlement](/images/tools/order-bill-splitter/results-breakdown.webp)

## How Shipping, Tax, and Discounts Are Split

The example above shows the three rules the tool follows on every order:

- **Discount spreads by item value.** A 10% code reduces each person's share by 10% of what they
  bought, just like it does on the real order total.
- **Tax sits on the discounted base.** Tax is figured after the discount, then split by each person's
  share, so nobody pays tax on money they saved.
- **Shipping splits proportionally or evenly.** Proportional means the person with the biggest share
  of the cart covers the biggest slice of shipping—much like a **splitting bills proportionally calculator**. Flat means everyone pays an equal cut. You choose.

## Who This Free Tool Is For

- **Group buys and group gifts.** Friends chipping in on a combined order or a shared present.
- **Roommates and students.** Splitting a cart for shared appliances, groceries, or dorm supplies. 
- **Vacations and trips.** It functions perfectly as a **splitting airbnb cost calculator**. Add the total Airbnb price and divide it up fairly.
- **Service workers and teams.** If you are looking for a **tip splitting calculator** or need help **splitting tips by hours**, you can add each person's hours as their "share weight" on a single tip item.
- **Couples and partners.** Ensure everyone pays their fair share of shared expenses like utilities or groceries.
- **Coworkers and small teams.** One person checks out office or event supplies and needs to bill the rest fairly.
- **Dropshipping and store partners.** Split shared costs across a partnership and settle up cleanly.

## Group Checkout: Buy the Whole Order in One Cart

Once everyone has picked their items, you do not have to add each product to the store cart by hand.
The **Group checkout** button builds one Shopify cart link that pre-loads every item you imported from
a product URL, so a single person can pay for the whole order at once.

Here is how to use it:

1. **Import each item from Shopify.** Paste a product link for every item in the order, for example
   `https://store.uklearns.pearson.com/products/pa008` and
   `https://store.uklearns.pearson.com/products/pa021`. The name and price fill in automatically.
2. **Click Group checkout.** The tool reads the variant from each imported item and packs them into one
   cart link, then opens it in a new tab.
3. **Check out once.** The store opens with every imported item already in the cart, ready to pay. One
   person enters their details and pays the combined total, then uses the split above to collect from
   everyone else.

![Group checkout opens one Shopify cart with every imported item ready to pay in a single checkout](/images/order-bill-splitter-group-checkout.webp)

Group checkout only covers items you imported from a Shopify product link, since those are the ones
that carry a variant. Items typed in by hand or pasted as cart JSON are still counted in the split, but
they are not added to the checkout link. A cart link also targets one store at a time, so if you import
from more than one shop, the link uses the store with the most items.

## Share a Split With One Link

Once the math is done, one person can send the whole split to the group with a single link. Click
**Share link**, paste it into your group chat, and everyone opens the exact same breakdown and the same
who-pays-whom result. No signup, no app, and nothing stored on a server.

![One person copies a share link and the whole group opens the same bill split](/images/order-bill-splitter-share.webp)

## Frequently Asked Questions

### Is the order bill splitter really free?

Yes. It is 100% free with no signup, no limits, and no account. Everything runs in your browser.

### How do I import items from Shopify?

Copy a product link from any Shopify store (the URL contains `/products/`) and paste it into the
import box. The tool reads the public product data and fills in the name and price. If a store has
turned that off, just add the item by hand. You can also paste a full `cart.js` response to import
every line item at once.

Here are real product links you can try:

- `https://store.uklearns.pearson.com/products/pa021`
- `https://education.adp.com/products/data-driven-hr-analytics-the-essentials`
- `https://pixierebels.com/products/lace-panel-button-up-shirt`

### How do I import a whole cart at once?

If you already built the order in a store's cart, you can import every line item in one step instead
of pasting product links one by one. Here is how to grab your `cart.js`:

1. **Add at least two items to the cart** on the Shopify store you are buying from.
2. **Open the cart link** in a new browser tab by adding `/cart.js` to the store address, for example
   `https://pixierebels.com/cart.js`. The page shows your cart as plain JSON.
3. **Copy everything** on that page, open the "Or paste a whole cart (JSON)" box in the tool, paste it
   in, and click Import cart items.

The JSON looks like this (prices are in cents, so `7999` means \$79.99):

```json
{
  "items": [
    { "title": "Wireless Earbuds", "quantity": 1, "line_price": 7999 },
    { "title": "Yoga Mat", "quantity": 2, "line_price": 6998 },
    { "title": "Phone Case", "quantity": 1, "line_price": 1999 }
  ]
}
```

Each line item lands in the tool with its name and price filled in, ready to assign to people. An
empty cart returns `{"items":[]}`, so make sure you added the items before opening `/cart.js`.

### How does the "simplest settlement" work?

Instead of everyone paying everyone, the tool nets out all the balances and finds the smallest number
of payments that settles the whole group. For example, rather than three separate transfers, it might
reduce things to "Sam pays Alex" and "Jordan pays Alex".

### Can I split a single item unequally?

Yes. Switch any item to an unequal split and give each person a share weight. Someone with a weight of
2 pays twice as much of that item as someone with a weight of 1. This flexibility makes it double as a **splitting rent based on income calculator** or a **splitting bills based on income calculator**—just enter your income ratios as the weights!

### Does it work for currencies other than dollars?

Yes. Pick from US Dollar, Euro, British Pound, Indian Rupee, or Japanese Yen, and every amount and the
PDF update to match.

### Can I save or share the result?

Yes, in three ways. Click **Share link** to copy a shareable link that reopens the exact same split,
with every person, item, shipping, tax, and discount already filled in. Send it in your group chat
and everyone sees the same who-pays-whom result instantly, with no signup and no app. You can also
download a clean PDF of the settlement and per-person breakdown, or copy a text summary to paste into
WhatsApp, Slack, or email.

### How does the shareable split link work?

The **Share link** button packs your whole order into the link itself, so the calculation travels with
the URL. There is no account and no database. Because the split details live in the link (not on a
server), nothing is stored anywhere, but anyone you send the link to can open it and see the group's
names and amounts. When the link opens, the tool rebuilds the split and works out who pays whom again,
so the numbers always match what you shared. To send an updated split, just make your changes and copy
a fresh link.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Order Form Generator
description: Create a professional order form template in minutes. Add your logo, customer details, and line items with prices, then download a clean PDF. Free, no signup.
---

# Free Order Form Generator

Create a clean, professional **order form** in a couple of minutes. Our free **order form generator** lets you add your logo, the customer placing the order, the items they want with prices, and a delivery date, then download a tidy PDF. It works for t-shirt orders, bakery and catering orders, wholesale orders, and preorders. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Make an Order Form

[![Watch how to make an order form](https://img.youtube.com/vi/epuS-2RFDTo/maxresdefault.jpg)](https://youtu.be/epuS-2RFDTo)

A quick walkthrough of the generator: pick a template, add your business name and logo, list the items with quantities and prices, then download a print-ready PDF. It is completely free and needs no sign-up.

![Free order form generator preview showing an ORDER FORM document with the business name, order number, line items with size and quantity columns, and an order total](/images/tools/order-form-generator/og.webp)

This **order form template** is built around a simple customer order. Fill it in like this:

1. **Add your business details**: Enter your business name, logo, and address. This is the header buyers see at the top of the form.
2. **Add the customer**: Enter who is placing the order. This field is labelled Order From on the order form document type.
3. **Set the order number and dates**: Use a unique order number, then add the order date and the delivery date you expect to fulfil by.
4. **List the items**: Add one line per product with the quantity and the unit price. The tool adds up each line total, the subtotal, tax, and the order total for you.
5. **Add terms and notes**: Set payment terms and add any shipping, packaging, or deposit instructions.
6. **Style it**: Pick a template and set your brand color so the form matches your business.
7. **Download the PDF**: Click Download PDF and send it to your customer or print it.

## What to Include on an Order Form

A complete order form has a handful of fields, because both the items and the money matter:

- **Your business name and logo** so the customer knows who the order is with.
- **Customer details**: the name and contact of the person or company placing the order.
- **A unique order number** and the order date for tracking.
- **Line items**: product, quantity, and unit price for each item ordered.
- **Subtotal, tax, and total** so both sides agree on the amount owed.
- **A delivery or fulfilment date**.
- **Notes or terms**: deposit required, payment terms, and any shipping instructions.

For a t-shirt or apparel order, put the size, color, and style in the item name or the description of each line. The totals still add up the same way.

![Order form generator live preview showing an apparel order with size and color columns for Classic Cotton Tee line items, subtotal, tax, and total, next to the editor with the Emerald, Sunset, Monochrome, and Ocean template options](/images/tools/order-form-generator/order-form-example.webp)

## Order Form vs Purchase Order vs Invoice

These three documents look similar, but they are used at different points in a sale.

- An **order form** is usually provided by the seller so a customer can place an order. It captures what the customer wants to buy.
- A **purchase order** is the buyer's document. A business sends it to a supplier to order stock. If you buy inventory, our [free purchase order generator](/tools/purchase-order-generator) uses the same engine as this tool.
- An **invoice** is sent by the seller after the order to request payment. If you need to bill for a completed order, our [free invoice generator](/tools/invoice-generator) shares this engine too.

A common flow is simple. The customer fills in an order form. You confirm it. Then you send an invoice when the goods are ready. The order form is the start of that chain.

## Tips for Better Order Forms

- **Number your orders in a simple sequence.** A running number such as ORD-2026-001 keeps your records easy to search.
- **State prices clearly.** List the unit price for every line so there is no confusion about the total. A form that reads \$18.00 per shirt is clearer than a vague quote.
- **Set a delivery date.** A specific expected date gives both sides a shared reference.
- **Ask for a deposit in the notes.** For custom or made-to-order work, note any deposit required before you start.
- **Keep a copy.** Save the PDF for your records, then match it against the [packing slip](/tools/packing-slip-generator) when you fulfil the order.

## Frequently Asked Questions

### What is an order form?

An order form is a document a customer uses to place an order with a business. It lists the items they want, the quantities, the unit prices, and the order total. It captures who is ordering, what they want, and how much they owe in one clean sheet.

### What should an order form include?

Your business name and logo, the customer or order-from details, an order number and date, a line for each item with quantity and unit price, a subtotal, tax, and total, a delivery date, and a notes or terms area for payment and shipping instructions.

### What is the difference between an order form and an invoice?

An order form is filled in by or for the customer to place an order. An invoice is sent by the business after the order to request payment. The order form captures the request, while the invoice bills for it. Many businesses use the order form first, then turn it into an invoice.

### What is the difference between an order form and a purchase order?

A purchase order is sent by a buyer to a supplier to order stock, and it is the buyer's document. An order form is usually provided by the seller for customers to place orders. Both list items, quantities, and prices, but the party that issues them is different.

### Can I make a t-shirt order form with this tool?

Yes. Add each shirt as a line item and put the size, color, or style in the item name or description, along with the quantity and price. The tool totals everything for you. It works for apparel, bakery, catering, wholesale, and preorder forms.

### Is this order form generator free?

Yes, it is 100% free, needs no signup, and lets you create unlimited order forms. You can download each one as a PDF and reuse the tool as often as you like.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Packing List Generator

Build a complete **packing list** for any shipment in a few minutes. Our free **packing list generator** lets you add the shipper, the consignee, and every item with its quantity, then download a clean PDF that travels with the goods. It is built for ecommerce sellers, wholesalers, and anyone sending freight or export shipments who needs an itemized record of what is in each box. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Make a Packing List

[![Watch How It Works](https://img.youtube.com/vi/cHiwKBGtVt4/maxresdefault.jpg)](https://youtu.be/cHiwKBGtVt4)

This **packing list template** is organised around a shipment, not a sale. Fill it in like this:

1. **Add the shipper**: Enter your business name, logo, and address. This is who the shipment is from.
2. **Add the consignee**: Enter the receiver and their address. This is the Ship To party on the packing list.
3. **Add a reference and date**: Use your order, shipment, or reference number so the list can be matched to the rest of the paperwork.
4. **List every item**: Add one line per product with a clear description and the quantity shipped. Prices are not shown on a packing list, so you focus on contents.
5. **Download the PDF**: Click Download PDF, print it, and include a copy with the shipment. For freight, a copy often goes in a documents pouch on the outside of the carton.

## What Is a Packing List?

A packing list is an itemized document that details the contents of a shipment. It records each product and the quantity being sent, and it travels with the goods so the receiver, the carrier, and customs officers can confirm what is physically in the boxes. Like a packing slip, a packing list shows no prices. Its purpose is to describe contents, not value.

A packing list becomes most important the moment a shipment leaves a simple retail parcel and turns into freight. When you ship pallets, multiple cartons, or goods across a border, the people handling the shipment need a precise contents record they can check box by box. That record is the packing list.

## Packing List vs Packing Slip

These two terms overlap so much that many people treat them as the same thing, and for a single small parcel they effectively are. Both are no-price documents that list the contents of a shipment.

The difference is one of scale and detail:

- A **[packing slip](/tools/packing-slip-generator)** is the simple version. It is the slip you drop inside a retail order so the customer can check their items.
- A **packing list** is usually the fuller version. For freight and export it often records more, such as the number of packages, and is the document carriers and customs expect to see.

If you only ship single parcels to consumers, either document works. If you ship in bulk or internationally, "packing list" is the term you will see on carrier and customs paperwork.

## Packing List vs Commercial Invoice

For international shipping, the packing list does not stand alone. It works alongside a commercial invoice, and the two have separate jobs:

- The **packing list** answers "what is in the shipment?" It describes items and quantities with no prices.
- The **commercial invoice** answers "what are the goods worth?" It states values and is used for customs valuation and payment.

Customs and carriers cross-check the two documents. The packing list confirms the physical contents, and the commercial invoice confirms the declared value. Sending them together, with matching item details, helps a shipment clear customs without delay. If you need to produce the priced document too, our [invoice generator](/tools/invoice-generator) shares this tool's engine.

## What to Include on a Packing List

A useful packing list is clear and complete:

- **Shipper and consignee** details with full addresses.
- **A reference number** and date that match your other shipping documents.
- **A line for every item**: description and quantity. Adding the SKU or part number speeds up checking at the other end.
- **Notes** for handling, such as fragile items or special storage.

For freight and export, shippers commonly add the number of packages, plus weights and dimensions, in the notes or alongside each line so the carrier can confirm the load.

## Tips for Better Packing Lists

- **One list per shipment, split by box where needed.** If a shipment spans several cartons, make it clear which items are in which box. This prevents disputes about short deliveries.
- **Keep descriptions consistent.** Use the same product names and codes across your packing list, your [purchase order](/tools/purchase-order-generator), and your invoice. Matching details are what let everyone reconcile the paperwork quickly.
- **Check destination rules.** Requirements vary by country and carrier. Confirm what your destination needs before you ship, especially for customs.
- **Keep a copy for your records.** The packing list is your proof of exactly what you sent if a claim is ever raised.

## Frequently Asked Questions

### What is a packing list?

A packing list is an itemized document that details the contents of a shipment. It lists each product and quantity and travels with the goods so the receiver can verify what arrived. It does not show prices.

### What is the difference between a packing list and a packing slip?

The two terms are often used interchangeably for a contents document with no prices. In practice a packing list tends to be the more detailed version used for freight and export, while a packing slip is the simpler version dropped in a retail parcel.

### Is a packing list the same as a commercial invoice?

No. A packing list describes what is in the shipment and shows no prices. A commercial invoice states the value of the goods for payment and customs. International shipments usually need both documents.

### Do I need a packing list for international shipping?

For most international and freight shipments, yes. Carriers and customs use the packing list to check the contents of each box against the commercial invoice. Always confirm the exact requirements for your destination.

### Is this packing list generator free?

Yes, it is 100% free, needs no signup, and lets you create unlimited packing lists.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Packing Slip Generator

Make a professional **packing slip** for any order in about a minute. Our free **packing slip generator** takes your store details, the customer ship-to address, and the items in the box, then gives you a clean PDF you can print and drop in the parcel. It is built for Shopify sellers, Etsy shops, and small ecommerce brands that pack and ship their own orders. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Make a Packing Slip

[![Watch How It Works](https://img.youtube.com/vi/cHiwKBGtVt4/maxresdefault.jpg)](https://youtu.be/cHiwKBGtVt4)

This **packing slip template** needs only a few details. Here is the order to fill it in:

1. **Add your store details**: Enter your business name, logo, and address in the business tab. This is the "from" part of the slip.
2. **Add the ship-to address**: Enter the customer name and shipping address. On a packing slip this is labelled Ship To, because the document travels with the goods.
3. **Add a slip and order number**: Use your order number so the warehouse and the customer can match the parcel to the order.
4. **List the items**: Add one line per product with a short description and the quantity packed. Prices stay hidden on a packing slip, so you only enter what is in the box.
5. **Download the PDF**: Click Download PDF, print it, and place it inside the parcel or in a documents-enclosed pouch on the outside.

## What Is a Packing Slip?

A packing slip is a shipping document that lists the products and quantities inside a parcel. It ships with the goods so that whoever opens the box, your customer or their receiving team, can check the delivery against what was ordered. A packing slip does not show prices, tax, or payment details. Its only job is to confirm contents.

Sellers also use the packing slip on their own side. The person packing the order uses it as a pick list to gather the right products, and as a final check before the box is sealed. Including a slip cuts down on "I am missing an item" support tickets, because the customer can see exactly what should be in the parcel.

## Packing Slip vs Invoice

People often mix these up, but they do different jobs.

- A **packing slip** lists what is in the box. It shows no prices and is not a request for money. It goes inside the parcel.
- An **invoice** is a request for payment. It shows unit prices, tax, discounts, and a total due. It goes to whoever pays the bill.

In most ecommerce orders the customer has already paid at checkout, so they receive a packing slip in the box and, if they want one, a separate paid invoice or receipt by email. Sending priced documents inside a parcel is usually avoided, especially for gifts, which is another reason the packing slip leaves prices off.

If you do need a priced document, use our [free invoice generator](/tools/invoice-generator) instead. It uses the same engine, so the layout will feel familiar.

## What to Include on a Packing Slip

A clear packing slip has a short, predictable set of fields:

- **Your store name, logo, and address** so the customer knows who sent the parcel.
- **The ship-to name and address** for the recipient.
- **An order or slip number** and the date, so the order is easy to trace.
- **A line for every item**: a product name or short description and the quantity. Many sellers add the SKU so the warehouse can match the physical product fast.
- **Optional notes**: a thank-you message, return instructions, or a reorder link.

Keep it to one page where you can. A packing slip that fits on a single sheet is faster to read and cheaper to print.

## Tips for Better Packing Slips

- **Match quantities to the box, not the order.** If you ship an order in two parcels, each parcel gets its own packing slip listing only the items in that box. This is how multi-box shipments stay clear.
- **Use the SKU column.** A short code next to each item makes picking and restocking faster and reduces mis-picks.
- **Add a return note.** A single line such as "Need to return something? Start at yourstore.com/returns" turns the slip into a small support tool. You can pair it with our [return form generator](/tools/return-form-generator).
- **Reuse your branding.** A logo and consistent layout make the unboxing feel professional, which matters for repeat purchases.
- **Save your store details.** The tool remembers your business info in your browser, so the next slip starts mostly filled in.

## Packing Slip and Other Fulfillment Documents

A packing slip is one of several documents that move with an order. A [purchase order](/tools/purchase-order-generator) goes the other way, from you to a supplier, when you restock. A [delivery note](/tools/delivery-note-generator) is signed on arrival as proof the goods were delivered. A [packing list](/tools/packing-list-generator) is a more detailed contents manifest, often used for freight and export shipments. Using consistent, clean documents across all of these makes your store look organised to both customers and suppliers.

## Frequently Asked Questions

### What is a packing slip?

A packing slip is a document included inside a shipment that lists the items and quantities in the box. It does not show prices. The receiver uses it to check that the order arrived complete.

### What is the difference between a packing slip and an invoice?

A packing slip lists what is in the box and shows no prices. An invoice is a request for payment and shows prices, tax, and totals. The packing slip goes in the parcel; the invoice goes to the person who pays.

### Does a packing slip need prices?

No. A packing slip leaves prices off on purpose so warehouse and delivery staff can check contents without seeing what the customer paid. This tool hides prices for the packing slip document type.

### How do I make a packing slip for a Shopify order?

Enter your store details, the customer ship-to address, the order or slip number, and one line per product with its quantity. Then download the PDF and include it in the box.

### Is this packing slip generator free?

Yes, it is 100% free, needs no signup, and lets you create unlimited packing slips.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (-). Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Parking Receipt Generator - Lot, Garage & Valet Receipts

Need a parking receipt for an expense claim or a lost ticket? PinFlow's **free parking receipt generator** makes a clean parking lot, garage, or valet receipt in seconds. Add the duration, rate, and a barcode, then download a PDF or PNG. No signup needed.

## How to Make a Parking Receipt

[![Watch How It Works](https://img.youtube.com/vi/NXLugEEy7fk/maxresdefault.jpg)](https://youtu.be/NXLugEEy7fk)

![Example receipt made with the free parking receipt generator](/images/tools/parking-receipt-generator/parking-receipt-example.webp)

1. **Add the parking operator**: Enter the lot or garage name and address.
2. **Add the parking line**: Write the duration, like "Parking - 2h 30m", as the item.
3. **Set the rate**: Enter the parking fee as the amount.
4. **Keep the barcode on**: Many garages print a barcode you scan at the exit.
5. **Add entry and exit times**: Use the footer to note the in and out times.
6. **Download**: Save the parking receipt as a PDF or PNG, or print it.

## What a Parking Lot or Garage Receipt Shows

A typical parking lot or garage receipt includes:

- **Operator name and location**: The garage brand and address.
- **Entry and exit time**: When you parked and when you left.
- **Duration**: Total time parked, by the hour or day.
- **Rate and total**: The hourly or daily rate and the final fee.
- **Payment method**: Card or cash.
- **Barcode or ticket number**: Used at the exit gate.

## Common Uses for a Parking Receipt Maker

- **Business parking claims**: Reimburse parking on a work trip.
- **Valet and event parking**: Give guests a printed receipt.
- **Multiday garage stays**: Record airport or hotel parking.
- **Lost tickets**: Recreate a receipt for a misplaced parking stub.

## Parking Receipt Generator FAQ

**Is the parking receipt generator free?**
Yes. Build and download parking receipts for free, with no signup and no watermark.

**Can I add a barcode?**
Yes. The barcode is on by default and encodes your ticket or order number, just like a garage receipt.

**Can I show hours or days?**
Yes. Write the duration in the item name, such as "Parking - 2h 30m" or "Parking - 3 days".

**What formats can I download?**
You can download a PDF or a PNG, or print the parking receipt from your browser.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (-). Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Pharmacy Receipt Generator - Itemized Drug Store Receipts

Need an itemized pharmacy receipt for insurance, an HSA, or an FSA claim? PinFlow's **free pharmacy receipt generator** creates a clear, itemized drug store receipt in seconds. List each medication, add tax, and download a PDF or PNG. No signup required.

## How to Make a Pharmacy Receipt

[![Watch How It Works](https://img.youtube.com/vi/NXLugEEy7fk/maxresdefault.jpg)](https://youtu.be/NXLugEEy7fk)

![Example itemized receipt made with the free pharmacy receipt generator](/images/tools/pharmacy-receipt-generator/pharmacy-receipt-example.webp)

1. **Add the pharmacy**: Enter the pharmacy name, address, and phone.
2. **List each item**: Add a line for each medication or product with its price.
3. **Add tax**: Set a sales tax label and rate if your items are taxed.
4. **Pick payment**: Choose card or cash and add the card last 4 if needed.
5. **Use the classic style**: The itemized, all-caps look matches real drug store receipts.
6. **Download**: Save the pharmacy receipt as a PDF or PNG, or print it.

## What an Itemized Pharmacy or Drug Store Receipt Includes

A drug store receipt for a claim usually shows:

- **Pharmacy name and address**: The store and its location.
- **Date of purchase**: Required by most insurers.
- **Each item listed**: Medication name, quantity, and price per line.
- **Subtotal and tax**: A clear breakdown of taxed and untaxed items.
- **Total paid and method**: The final amount and how you paid.
- **Itemized format**: Insurers and HSA plans need line-by-line detail.

## Who Needs a Pharmacy Receipt Maker?

- **HSA and FSA claims**: Submit itemized proof of medical purchases.
- **Insurance reimbursement**: Provide a clear medication receipt.
- **Tax records**: Track deductible medical expenses.
- **Replacement receipts**: Recreate a lost drug store receipt.

## Pharmacy Receipt Generator FAQ

**Is the pharmacy receipt generator free?**
Yes. Create and download itemized pharmacy receipts for free, with no signup and no watermark.

**Can I list multiple medications?**
Yes. Add a separate line item for each medication or product. The subtotal and tax update automatically.

**Is the receipt itemized for insurance?**
Yes. Each item shows on its own line with a price, which is what most insurers and HSA or FSA plans require.

**What formats can I download?**
You can download a PDF or a PNG, or print the pharmacy receipt from your browser.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->
# Pinterest Board Generator for Shopify

> Enter your store niche and product type to instantly get 10 board name ideas and 5 SEO descriptions - completely free.

## How It Works

[![Watch how the free Pinterest Board Generator works](https://img.youtube.com/vi/KGjSJR0EGOY/maxresdefault.jpg)](https://youtu.be/KGjSJR0EGOY)

1. Enter your store niche and product type.
2. Select tone and language.
3. Click "Generate Board Ideas" to get AI-powered results.
4. Copy board names or descriptions to your clipboard.

## Input Fields
- **Store Niche** (required, max 200 chars): e.g. Sustainable Home & Living
- **Product Type** (required, max 200 chars): e.g. Handmade Ceramic Mugs
- **Tone**: selectable preset
- **Language**: selectable from supported languages

## Output
- 10 Pinterest board name ideas
- 5 SEO board descriptions

## Fill Your Boards With Pins

Once your boards are named, create the pins to populate them:

- **[Pinterest Pin Generator](/tools/pinterest-pin-generator)**: Generate thousands of product pins from your images with 36 templates and 28 color palettes.
- **[Pinterest Infographic Generator](/tools/pinterest-infographic-generator)**: Create listicle and step-by-step infographic pins from bullet points.

## Complete Your Pinterest SEO

Pair board names with optimised pin copy and hashtags:

- **[Pinterest Title Generator](/tools/pinterest-title-generator)**: Generate 10 pin titles, 5 SEO descriptions, and 10 keyword ideas per product.
- **[Pinterest Hashtag Generator](/tools/pinterest-hashtag-generator)**: Generate relevant hashtags to add to every pin description.
- **[Free Image Resizer](/tools/image-resizer)**: Prep product photos at 1000×1500px before uploading to Pinterest.

## Automate the Full Workflow

PinFlow auto-generates beautiful pins from your Shopify products, applies your brand colours, and posts them on autopilot. Try PinFlow today.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->
# Pinterest Hashtag Generator for Shopify

> Enter your product details to instantly generate relevant, SEO-optimised Pinterest hashtags - completely free.

## How It Works

[![Watch how the free Pinterest Hashtag Generator works](https://img.youtube.com/vi/I0hSjytNStM/maxresdefault.jpg)](https://youtu.be/I0hSjytNStM)

1. Enter your product name and optional description.
2. Select tone, language, and number of hashtags (2–50).
3. Click "Generate Hashtags" to get AI-powered results.
4. Copy all hashtags at once or individually.

## Input Fields
- **Product Name** (required, max 200 chars): e.g. Handmade Ceramic Coffee Mug
- **Product Description** (optional, max 500 chars)
- **Tone**: selectable preset
- **Language**: selectable from supported languages
- **Number of Hashtags** (2–50)

## Output
- Formatted hashtags (e.g. #HandmadeCeramics, #ShopifyStore)

## Create Pins to Use These Hashtags

Add your generated hashtags to pin descriptions when you create visuals:

- **[Pinterest Pin Generator](/tools/pinterest-pin-generator)**: Create product pins with text overlays from your images. Batch-download thousands of variations.
- **[Pinterest Infographic Generator](/tools/pinterest-infographic-generator)**: Turn tips and guides into listicle infographic pins at 1000×1500px.

## Complete Your Pinterest SEO

Hashtags work best alongside strong titles, board names, and optimised images:

- **[Pinterest Title Generator](/tools/pinterest-title-generator)**: Generate click-worthy pin titles, SEO descriptions, and keyword ideas.
- **[Pinterest Board Generator](/tools/pinterest-board-generator)**: Name and describe boards to organise pins by niche.
- **[Free Image Resizer](/tools/image-resizer)**: Resize and compress product photos to the ideal 1000×1500 Pinterest pin size.

## Automate the Full Workflow

PinFlow auto-generates beautiful pins from your Shopify products, applies your brand colours, and posts them on autopilot. Try PinFlow today.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Pinterest Infographic Generator - Free Tool

> A powerful **Pinterest Infographic Generator** to create professional step-by-step and listicle Pinterest pins from your tips and guides. With our **Pinterest Infographic Creator**, turn a few bullet points into stunning infographic pins instantly. No signup required, and absolutely no AI slop to worry about!

## How to Use the Free Pinterest Infographic Generator

[![Watch How It Works](https://img.youtube.com/vi/eiY0ia5eO2o/maxresdefault.jpg)](https://youtu.be/eiY0ia5eO2o)

Creating eye-catching infographic pins has never been easier. Whether you are a **Shopify merchant** highlighting product benefits or a **Pinterest content creator** sharing a new guide, our free **Infographic Generator** lets you design professional-quality pins in minutes - without any design skills or expensive software. Everything happens securely in your browser, ensuring complete privacy.

### Step 1: Write Your Headline and Content

Enter a compelling headline - the main title of your infographic. Then, add 3 to 7 bullet points, where each becomes a numbered step or tip in your infographic layout.

- **Pinterest Infographics for Shopify Merchants:** Use titles like "5 Ways to Style Our Summer Dress" or "3 Key Benefits of Organic Skincare".
- **Pinterest Infographics for Pinterest Content Creators Users:** Use titles like "7 Steps to Start a Successful Blog" or "Top 5 Travel Hacks for 2024".

### Step 2: Choose Your Infographic Template

Select from our professionally designed layouts tailored for different types of content:

- **Numbered List**: A clean vertical layout with numbered circle badges. Perfect for "5 Tips", "7 Mistakes", or "Top Reasons" style content.
- **Timeline Steps**: An alternating left/right zigzag layout - ideal for step-by-step guides, tutorials, and processes.
- **Split Card**: A two-panel design with an optional product image on top and numbered bullet points below. Great for product-focused infographics.

![Choose from 15 infographic templates including Stacked Bars, Arrow Flow, Pill Steps, Sidebar Accent, Diamond Chain, and Tab Steps](/images/infographic-templates.webp)

### Step 3: Customize Typography and Branding

Personalize your creations! Choose your preferred fonts and customize text alignment to match your brand's unique identity. Select from our font presets or use fully custom combinations.

![Custom Font Selection](/images/image-1.webp)

### Step 4: Pick Color Palettes

Browse 28 curated color palettes across 6 categories, or use custom color controls to perfectly match your brand aesthetic. Built-in palettes are crafted for optimal contrast, guaranteeing that every text element remains highly readable against its assigned background. When using these palettes, keep our 6 key color roles in mind:

![Color Palette Selection](/images/image-3.webp)

![Color Palette Anatomy](/images/palette-anatomy.svg)

- **BG 1 (Primary Background)**: Main canvas and primary text areas
- **BG 2 (Secondary Background)**: Panels, badges, and secondary text areas
- **Font 1 (Primary Text)**: Headlines and bullets on BG 1
- **Font 2 (Secondary Text)**: Text on BG 2 and watermarks
- **Accent 1 (Primary Accent)**: Number badges and key highlights
- **Accent 2 (Secondary Accent)**: Minor decorative accents

### Step 5: Preview and Batch Download

Review the massive grid of generated infographic pins. Because this is a genuine **Pinterest Infographic Creator**, all images generated are in the perfect Pinterest resolution: **1000 x 1500 px** (2:3 aspect ratio). When you're ready, hit "Download All as ZIP" to export all template and palette combinations instantly!

![Preview grid showing infographic pins across multiple templates and color palette combinations at 1000x1500px](/images/infographic-results.webp)

## Why Choose Our Pinterest Infographic Creator?

### The Best Tool for Shopify Merchants

Standard product pins showing a product against a plain white background often blend into the crowded Pinterest feed. Our Pinterest infographic generator **for Shopify merchants** helps you break the mold by sharing highly visual styling tips, detailed ingredient breakdowns, step-by-step product setup guides, or feature comparisons.

By offering educational value rather than just a simple product shot, you build brand trust, significantly increase your save rates, and drive targeted buyer traffic directly to your Shopify store. For example, if you sell organic skincare, instead of just pinning a picture of a serum, you can generate a "5-Step Evening Skincare Routine" infographic. If you sell apparel, you can create a "3 Ways to Style a Denim Jacket" listicle. These educational infographics perform incredibly well on Pinterest because users use the platform to plan purchases and learn new ideas.

### Essential Tool for Pinterest Content Creators Users

For **Pinterest content creators users**, bloggers, influencers, and niche website owners, listicles and step-by-step pins are the absolute lifeblood of Pinterest growth. Our generator helps you instantly turn your blog post headers, recipe steps, DIY instructions, or quick tips into highly clickable, shareable infographic pins.

These formats dominate search results, boost your profile authority, and drive massive organic traffic to your articles. Whether you're in the travel niche sharing "Top 5 Packing Hacks," the food niche sharing "7 Substitutes for Baking Powder," or the finance niche breaking down "3 Steps to Budgeting," turning your written content into visual infographics is the fastest way to capture attention on Pinterest. Instead of spending hours in complex design tools, you can simply type your text and generate dozens of variations instantly.

### High Save Rates & Engagement

Infographics consistently outperform standard pins. People love saving "how-to" and "tips" content, making them evergreen assets that bring traffic for months or years.

### No AI Slop – No Punishment

Avoid the algorithmic penalties associated with low-effort AI-generated content. This tool is a true **Pinterest Infographic Generator** that uses your actual content and proven, handcrafted design principles to assemble authentic pins that Pinterest loves.

### 100% Browser-Based & Privacy Focused

Your data never leaves your device. The image processing, template generation, and ZIP creation all happen securely right inside your web browser. No uploads to third-party servers, guaranteeing absolute privacy for your brand assets.

### Perfect Pinterest Resolution

Every image generated is precisely **1000 x 1500 px**. No more worrying about awkward cropping or blurry images; you get the optimal 2:3 aspect ratio required for maximum visibility on Pinterest feeds.

### Key Benefits Summary

- **High-Converting Formats**: Built-in Numbered List, Timeline Steps, and Split Card templates.
- **Privacy First**: Everything happens in the browser.
- **No AI Slop**: Genuine pins using your real text and trusted templates.
- **Brand Customization**: Custom color palettes, font choices, and templates to match your brand.
- **Perfect Dimensions**: Output strictly at the optimal 1000 x 1500 px resolution.
- **Batch Download**: Get everything neatly packaged as a ZIP file in one click.
- **100% Free**: No signup, no watermarks, no limits.

## Pinterest Infographic Design Best Practices

To get the most out of your generated pins, keep these proven Pinterest marketing strategies in mind:

1. **Keep your headline punchy and benefit-driven**: Numbers and power words work best to stop the scroll. Headlines like "5 Secret Ways", "7 Critical Mistakes", or "How to Fix" perform significantly better than generic titles.
2. **Keep bullets short and scannable**: 8–12 words per bullet is the ideal length. Pinterest feeds are scanned quickly on mobile devices, so large blocks of text will be ignored. Focus on the core value of each step.
3. **Use consistent brand colors**: Select palette combinations that match your brand identity. Over time, Pinterest users will begin to recognize your brand's unique visual style in their feeds before they even read the pin.
4. **One infographic per product or topic angle**: Create separate infographics for different topics rather than cramming too much information into one image. If your blog post has 15 tips, break it down into three separate "5 Tips" infographics to maximize your content output.
5. **Use vertical layouts**: The Pinterest algorithm heavily favors vertical imagery. Our tool naturally outputs the perfect 2:3 aspect ratio (1000×1500px), ensuring you never have to worry about your pins getting truncated in the feed.
6. **Include a call to action (CTA)**: While the infographic provides value, the ultimate goal is the click. Make sure your final bullet point or your pin description encourages the user to "Click to read more," "Shop the look," or "Get the full guide."

## Understanding Pin Anatomy

Optimizing your pin data is just as crucial as the design itself. When uploading your exported infographics to Pinterest, keep these elements in mind:

- **Image Text**: The eye-catching headline that appears on the Pin graphic.
- **Pinterest Title**: The title representing your Pin, optimizing it for Pinterest search (up to 100 characters). Draft titles with our [Pinterest Title Generator](/tools/pinterest-title-generator).
- **Description**: A detailed description of your Pin, providing context and utilizing keywords (up to 500 characters).
- **Alt Text**: Text optimized for visually impaired users and SEO. Defaults to matching the description.

## Posting Strategy & Avoiding Spam Policies

Generating dozens of infographic variations is powerful, but posting them requires a smart strategy:

- **Space Out Your Pins**: Since all your infographic pins link to similar pages, space them at least 15 days apart. Using pins pointing to the same URL in a short timeframe might go against Pinterest's spam policy.
- **Vary Your Content**: Two pins pointing to the same URL should ideally focus on slightly different angles or variations to remain fresh.

_Note: The full PinFlow app takes care of these things automatically in the background. It introduces controlled randomization while preparing and scheduling the pins._

## Frequently Asked Questions

**How does the free Pinterest Infographic Generator work?**

Write your headline, add 3-7 bullet points, and choose your preferred templates and brand colors. Our **Infographic Generator** instantly formats your text into beautiful listicles and step-by-step guides. You can preview them in real-time and download them as a ZIP file containing perfectly optimized images ready for uploading.

**How much does it cost to use the Infographic Creator?**

This online **Pinterest Infographic Creator** is a 100% free utility tool. There are absolutely no hidden costs, no premium tiers, no watermarks, no credit limits, and no account sign-ups required. It's built to be a frictionless tool for marketers and creators.

**Do I need a Canva or Photoshop account?**

No! That is the primary benefit of this tool. You do not need any external design software, nor do you need to know how to use layers, alignment tools, or typography pairing. Our generator handles all the heavy lifting of design programmatically.

**Are my images and content secure?**

Yes, your privacy is our top priority. The entire generation process happens locally within your web browser using modern web technologies. We never upload, store, or transmit your text, data, or photos to external servers. Your assets are 100% safe and remain exclusively on your device.

**What is the ideal resolution for Pinterest infographics?**

The optimal size for a Pinterest pin is **1000 x 1500 pixels**, which provides a perfect 2:3 aspect ratio. Our tool automatically ensures every image you download strictly adheres to this ideal resolution to maximize your visibility and prevent awkward algorithmic cropping.

**Can I use these infographics on other platforms like Instagram or Facebook?**

While the 1000x1500px resolution is specifically optimized for Pinterest, these vertical dimensions also work exceptionally well for Instagram Stories, Facebook Stories, and TikTok image carousels. They are versatile marketing assets.

**How many infographic pins can I create?**

With our expanding library of base templates and 28 color palettes, you can create up to 84 unique infographic pins from a single set of content. The "Download All" button exports every selected template and palette combination instantly into a neat folder.

**How is this different from the Pinterest Pin Generator?**

The [Pinterest Pin Generator](/tools/pinterest-pin-generator) is designed for product images with text overlays, usually featuring a single large background photo. The Infographic Pin Generator is tailored for content-first pins - numbered lists, step guides, and tip sheets - where the text itself is the primary visual focus and structure of the pin.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Pinterest Pin Generator & Graphic Maker

> A free **Pinterest pin generator** that turns your product photos into standard 2:3 pins at 1000 x 1500 px. Pick from 35 templates and 28 color palettes and download every combination as a ZIP of PNG files. No signup and no watermark.

## How to make Pinterest pins with the generator

[![Watch How It Works](https://img.youtube.com/vi/Ny_UJbwIiAY/maxresdefault.jpg)](https://youtu.be/Ny_UJbwIiAY)

This **Pinterest graphic maker** is built for product pins. You bring the photo and a headline, and the tool places them into ready-made layouts, colors them with the palettes you pick, and exports every design at Pinterest's recommended size. It runs in your browser, with no design software and no account.

### Step 1: Upload your product photos

Click the upload area under **Product Images** and add your photos (the box takes up to 10). Each photo is scaled and cropped to fit the template's photo frame.

Your first photo is the main photo on every pin. Twelve of the 35 templates are collages with two to four photo frames, and they fill those frames with your second, third and fourth photos. If you upload fewer photos than a collage needs, the empty frames show the tool's sample photos. Upload at least four photos, or untick the collage templates in Step 4.

![The Product Images upload box with four product photos added and the 4/10 counter](/images/tools/pinterest-pin-generator/upload-photos.webp)

### Step 2: Write the overlay text and your domain

Type your headline in **Image Overlay Text**. This is the big text printed on the pin, and it can be up to 100 characters. The text size adjusts by itself to fill the space each template gives it, so a short headline prints larger than a long one.

The second field takes your store domain or Pinterest handle, such as yourstore.com or @yourhandle. Eighteen of the 35 templates print it in small text so viewers know where the pin comes from. If you leave it empty, those templates show "yourstore.com", so fill it in before you download.

![The Image Overlay Text field with a product headline and the domain field with a store address](/images/tools/pinterest-pin-generator/overlay-text-domain.webp)

### Step 3: Choose your fonts

Open **Fonts** and pick one of the 6 font pairings. Each pairing sets three fonts: the main font for the headline, a secondary font for smaller text such as your domain, and an accent font used for the short captions on a few templates. To use your own mix, turn on **Or always use custom fonts** and choose each of the three from 78 fonts.

![Custom Font Selection](/images/image-1.webp)

### Step 4: Pick your templates

Open **Templates**. All 35 are selected when the page loads. Click a template to drop it, use **Clear** to start from none, or **Select All** to get them all back. Each template has its own layout, photo frame and text position.

![Template Selection](/images/image-2.webp)

### Step 5: Pick color palettes

Open **Color Palette**. No palette is selected when the page loads, so pick at least one before the previews appear (or click **Fill Example** to see a full demo). The 28 palettes sit in six color groups: Yellow, Blue, Green, Purple, Red and Other. The switch next to a group name selects the whole group.

![Color Palette Selection](/images/image-3.webp)

Each palette holds six colors: two backgrounds, two text colors and two accents. Each template decides which of the six goes where, so the same palette looks different across templates. The swatch shows them in this order:

![Color Palette Anatomy](/images/palette-anatomy.svg)

- **BG 1**: primary background
- **BG 2**: secondary background
- **Font 1**: primary text
- **Font 2**: secondary text
- **Accent 1**: primary accent
- **Accent 2**: secondary accent

The palettes are fixed sets. There is no color picker for your own brand hex codes, so choose the palette closest to your brand colors.

### Step 6: Preview, shuffle and download the ZIP

The preview shows 8 pins at a time. Click **Shuffle** to see other template and palette pairs. The small swatches beside each pin switch that pin to another of your selected palettes, and clicking a pin opens a larger view.

![Diversified Generated Pins](/images/image-4.webp)

When you are ready, click **Download All as ZIP**. The number on the button is your template count times your palette count, and the ZIP holds one PNG file for each of those pins. A progress bar shows the pins as they are drawn, so keep the tab open until the ZIP downloads. The files are named by template and palette, for example `pin-template12-palette5.png`, so you can find the same design again later.

![The preview panel with the Download All as ZIP (6) button above six pins: three templates in two palettes](/images/tools/pinterest-pin-generator/download-zip.webp)

To download a single pin, select one template and one palette. The ZIP then holds just that pin.

## Standard Pinterest pin size: 1000 x 1500 px (2:3)

Pinterest's own [product specs](https://help.pinterest.com/en/business/article/pinterest-product-specs) give the standard image pin size: "We recommend using a 2:3 aspect ratio, or 1000 x 1500 pixels." An aspect ratio is the shape of the image, here 2 units wide for every 3 units tall. Pinterest's [creative best practices](https://business.pinterest.com/creative-best-practices/) say most people use Pinterest on mobile devices, so aim for a vertical 2:3 aspect ratio.

Every pin this generator exports matches that spec:

| | Pinterest standard pin spec | What the generator exports |
| --- | --- | --- |
| Aspect ratio | 2:3 recommended | 2:3 |
| Pixel size | 1000 x 1500 px | 1000 x 1500 px |
| File type | PNG or JPEG | PNG |
| Max file size | 20 MB on desktop, 32 MB in the app | Well under the limit |

Pinterest also warns that "Pins with an aspect ratio greater than 2:3 might get cut off in people's feeds." Keeping to 2:3 avoids that.

Upload the downloaded PNGs to Pinterest as they are. If you also want your raw product photos at the standard size, the [Free Image Resizer](/tools/image-resizer) crops them to 1000 x 1500 px.

## A free Pinterest graphic maker for product photos

A canvas editor starts you from a blank page, one design at a time. This tool lays one photo and one headline into every template and palette you selected at once, which suits a store owner who wants many pin designs for the same product.

What is free:

- **No signup.** Open the page and start.
- **No watermark.** Nothing from this site is printed on your pins. Three templates carry a short fixed caption (such as "Shop Now"), so untick them if you do not want it.
- **No download limit.** Download as many ZIPs as you like.
- **No uploads.** Your photos stay in your browser. The pins are drawn and zipped on your own device, so your images are never sent to a server.

What it does not do: you cannot drag elements around, resize the text by hand or start from a blank layout. If you need a one-off custom design, a canvas editor is the better fit. If you need a batch of on-brand pins from product photos, this generator is quicker.

## How many pins can you make from one product photo?

The number of pins in a download is simply templates times palettes:

| Templates selected | Palettes selected | Pins in the ZIP |
| --- | --- | --- |
| 1 | 1 | 1 |
| 1 | 28 | 28 |
| 35 | 1 | 35 |
| 35 | 28 | 980 |

So one headline gives you up to 980 different pins in a single download. The 12 collage templates need two to four photos, so with a single photo, untick them and you get up to 644 (23 templates x 28 palettes). Change the headline or the font pairing and download again for a fresh set built on the same photo. A 980-pin download takes a while because each pin is drawn one after another in your browser, so try a smaller selection first.

You will rarely want all 980. A better use is to pick the 5 to 10 templates that suit your product, choose two or three palettes close to your brand colors, and download 10 to 30 pins to post over the coming weeks.

## Pinterest pin design tips

These tips come from Pinterest's [creative best practices](https://business.pinterest.com/creative-best-practices/) and match what the templates already do:

1. **Put the key message at the top.** Pinterest suggests "stacking text overlay with key messaging at the top and extra details at the bottom." Keep your headline short and lead with the product or the benefit.
2. **Show your brand.** Pinterest says your logo or brand name should be clearly visible, but should not take over the pin. The domain field puts your store name on 18 templates in small text.
3. **Make the product the star.** Pinterest suggests showing people using your products in realistic settings.

## Pin title, description and alt text

The graphic is only part of a pin. When you upload each PNG to Pinterest, you also fill in:

- **Title**: up to 100 characters, per Pinterest's [product specs](https://help.pinterest.com/en/business/article/pinterest-product-specs). Depending on the device, only the first 40 characters may show in feeds, so put the main keyword first. The [Pinterest Title Generator](/tools/pinterest-title-generator) drafts keyword-rich titles and descriptions.
- **Description**: up to 800 characters. Descriptions do not show in the home feed, but Pinterest uses them to decide who sees the pin. Add a few relevant tags with the [Pinterest Hashtag Generator](/tools/pinterest-hashtag-generator).
- **Alt text**: a short description of the image for people who use screen readers. Describe the product in plain words.
- **Board**: save the pin to a board with a clear, searchable name. The [Pinterest Board Name Generator](/tools/pinterest-board-generator) suggests names.

## Posting many pins without looking like spam

Pinterest's [Community Guidelines](https://policy.pinterest.com/en/community-guidelines) list repetitive content made to earn money as spam. A batch of near-identical pins for one product page, posted on the same day, is the kind of repetition to avoid.

- **Spread them out.** Post a few pins for each product per week rather than the whole ZIP at once.
- **Vary the template, not just the color.** Two pins with the same layout in different palettes look almost the same. Mix layouts for pins that point to the same product page.

_The full PinFlow app handles this for Shopify stores. It makes pins from your products, varies the designs and schedules them over time._

## Other sizes from the same templates

The same design engine makes graphics for other formats:

- [Instagram Post Generator](/tools/instagram-post-generator): the same kind of templates at a 4:5 portrait shape, 1080 x 1350 px.
- [Pinterest Infographic Generator](/tools/pinterest-infographic-generator): numbered list, step and checklist pins at the same 1000 x 1500 px size.

## Frequently asked questions

### Is this Pinterest pin generator free?

Yes. It is free with no signup, no watermark and no download limit. You can make and download as many pins as you need.

### What is the standard Pinterest pin size?

Pinterest recommends a 2:3 aspect ratio, which is 1000 x 1500 pixels. Pinterest says pins with an aspect ratio greater than 2:3 might get cut off in feeds. Every pin this generator exports is exactly 1000 x 1500 px.

### What file format are the downloaded pins?

PNG. Each pin is a 1000 x 1500 px PNG file, and all of them come in one ZIP file. Pinterest accepts PNG and JPEG for standard pins.

### How many pins can I make from one product photo?

Up to 980 per download (35 templates x 28 palettes). With a single photo, untick the 12 collage templates and you get up to 644. Change the headline or fonts and download again for more.

### Why do some pins show photos I did not upload?

Twelve templates are collages with two to four photo frames. They use your second, third and fourth photos. If you uploaded fewer, the empty frames show sample photos. Upload at least four photos, or untick the collage templates before you download.

### Can I use my brand colors and fonts?

You can pick any of 6 font pairings, or choose your own main, secondary and accent fonts from 78 fonts. For color, choose from 28 built-in palettes. There is no picker for custom hex codes.

### Can I download just one pin?

Yes. Select one template and one palette, then click Download All as ZIP. The ZIP holds that single pin.

### Are my product photos uploaded anywhere?

No. The pins are drawn and zipped in your browser, so your photos never leave your device.

### Does the generator use AI to make the pins?

No. It places your own photo and headline into hand-built templates. Nothing is generated by AI, so the pins show your real product.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->
# Pinterest Pin Title Generator for Shopify

> Enter your product details. Instantly get 10 click-worthy pin titles. Get 5 SEO descriptions and 10 keyword ideas. It is completely free.

## How It Works

[![Watch how the free Pinterest Pin Title Generator works](https://img.youtube.com/vi/A6KazUfFEDE/maxresdefault.jpg)](https://youtu.be/A6KazUfFEDE)

1. Enter your product name, description, category, and target customer.
2. Select a tone like Professional, Casual, or Playful. Select your language.
3. Click "Generate Pin Titles" to get AI-powered results.
4. Copy individual titles, descriptions, or keywords directly to your clipboard.

## Input Fields
- **Product Name** (required, max 200 chars): Enter a name like "Handmade Ceramic Mug".
- **Product Description** (optional, max 1000 chars): Add details like "A 12oz handmade ceramic mug".
- **Product Category** (required, max 100 chars): Enter a category like "Home & Kitchen".
- **Target Customer** (required, max 200 chars): Describe your audience like "Millennial women who love minimalist design".
- **Tone**: Choose a selectable preset.
- **Language**: Choose from supported languages.

## Output
- 10 Pinterest pin titles
- 5 SEO pin descriptions
- 10 keyword ideas

## Turn Titles Into Pins

Copy your generated titles and descriptions. Paste them into these free design tools:

- **[Pinterest Pin Generator](/tools/pinterest-pin-generator)**: Upload product images. Overlay your title text across 36 templates and 28 color palettes. Batch-download up to 1008 pins per product easily.
- **[Pinterest Infographic Generator](/tools/pinterest-infographic-generator)**: Turn your bullet points into listicles. Create step-by-step infographic pins at 1000×1500px.

## Complete Your Pinterest SEO

Titles are just one piece of the puzzle. Use these tools for the rest of your strategy:

- **[Pinterest Board Generator](/tools/pinterest-board-generator)**: Generate 10 board names and 5 SEO board descriptions to organise your pins.
- **[Pinterest Hashtag Generator](/tools/pinterest-hashtag-generator)**: Add relevant hashtags to your pin descriptions. This greatly improves discoverability.
- **[Free Image Resizer](/tools/image-resizer)**: Resize and compress product photos to 1000×1500px before creating pins.

## Automate the Full Workflow

PinFlow auto-generates beautiful pins from your Shopify products. It applies your brand colours. It posts them on autopilot. Try PinFlow today.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Poshmark Fee Calculator
description: Work out your Poshmark earnings with the real US tiered fee - a flat \$2.95 under \$15, otherwise 20% - add cost for profit and margin, or reverse-solve the price to a target.
---

# Free Poshmark Fee Calculator

Know exactly what a Poshmark sale earns you before you list. Our free **Poshmark fee calculator** uses the real US tiered fee: a flat \$2.95 on sales under \$15, otherwise 20% of the listing price. Enter your price and it shows the fee and your exact earnings. Add your item cost and it also shows profit and margin. The same engine covers Depop, Mercari, Etsy, and more, so you can compare marketplaces in seconds. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Poshmark Fee Calculator

[![Watch how the free Poshmark Fee Calculator works](https://img.youtube.com/vi/gbN1mcMZb04/maxresdefault.jpg)](https://youtu.be/gbN1mcMZb04)

This quick walkthrough shows the calculator in action. For Poshmark, it uses the two-tier fee (flat \$2.95 under \$15, 20% at \$15 or more) and shows what you keep, or reverse-solves the list price for a target payout.

The tool has two modes:

1. **Price to earnings**: Enter your listing price. The calculator shows the Poshmark fee and your earnings. Add your item cost to see profit and margin too.
2. **Net to price**: Enter the earnings you want to keep, and the calculator solves for the listing price that leaves you exactly that after the fee.

The tool opens on Poshmark, and the platform dropdown lets you compare the same item against Depop, Mercari, or Etsy. Poshmark's support article is linked with the date we checked it.

## How Poshmark Fees Work in the US

Poshmark uses a **two-tier commission**, and the split point is \$15:

- **Under \$15**: a flat **\$2.95** fee, no matter the exact price.
- **\$15 or more**: **20%** of the listing price.

So a \$14.99 sale costs \$2.95, and a \$15.00 sale costs \$3.00. Poshmark's fee already includes payment processing, and **buyers pay shipping separately**, so shipping does not come out of your earnings. That makes Poshmark's math unusually clean: your fee is either a flat \$2.95 or a straight 20%.

## The \$15 Threshold, Explained

The one quirk worth understanding is the jump right at \$15. Just below it, at \$14.99, you pay the flat \$2.95. At exactly \$15.00 the 20% rate kicks in and the fee becomes \$3.00. From there the fee grows with the price: \$5 on a \$25 item, \$10 on a \$50 item, \$20 on a \$100 item. The flat-fee tier is a genuinely good deal on cheap items, and the calculator applies the threshold exactly so you always see the right number.

## A Worked Example

- **\$12** item (under \$15): flat fee **\$2.95**, you keep **\$9.05**
- **\$50** item (over \$15): 20% fee **\$10.00**, you keep **\$40.00**
- **\$100** item: 20% fee **\$20.00**, you keep **\$80.00**

Add your item cost in the tool and it also shows profit and margin, so you see the real money left after what the item cost you.

## Fees the Calculator Does Not Include

The tool models Poshmark's core selling fee, which already covers payment processing. It does not add optional costs such as Posh Shows features or promoted-listing spend, and it does not subtract buyer-paid shipping, since that is not part of your earnings. If you spend on promotion, add it separately.

## Using the Reverse Mode

Switch to the **Net to price** tab, type the earnings you want to keep, and the calculator solves for the listing price that leaves you exactly that after Poshmark's fee. It correctly handles the flat-to-20% threshold at \$15, so the solved price is right on both sides of the boundary. It is the quickest way to price an item to a target payout.

## Poshmark vs Depop vs Mercari

The resale apps price sellers very differently. Poshmark is a flat \$2.95 under \$15 or 20% above it. Mercari charges a flat 10%. Depop now charges only processing of 3.3% + \$0.45. On a \$50 item, Poshmark's \$10.00 fee is higher than Mercari's \$5.00 or Depop's roughly \$2.10, but Poshmark buyers pay shipping and the audience differs. Switch the platform dropdown to compare the same item across all three and see where it nets the most.

## Frequently Asked Questions

The FAQ section on this page answers the common questions in full and is marked up as structured data. In short: Poshmark's US fee is a flat \$2.95 under \$15 or 20% at \$15 and above, the fee already covers processing, buyers pay shipping separately, and the reverse mode solves the price you need to net a target through the \$15 threshold. Always confirm the live figure on Poshmark's support page before you rely on it.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Price List Template Maker
description: Build a polished price list one-pager. Paste or import your products, group them into sections, pick a template, and download a print-ready PNG, PDF, or CSV. Free, no signup, no watermark.
---

# Free Price List Template Maker

Create a clean, professional **price list** for your business in minutes. Paste or import your products, group them into sections, pick one of 20 polished templates, and download a print-ready PNG, PDF, or CSV. It is data-first and design-second, so you fill your prices once and the template does the styling. The tool is 100% free, runs entirely in your browser, and there is no signup and no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, video, etc.). -->

## How to make a price list

[![Watch How It Works](https://img.youtube.com/vi/2rI7avuTB98/maxresdefault.jpg)](https://youtu.be/2rI7avuTB98)

![Free price list generator with the editor on the left and a live preview of a styled Willow Lane Studio price list on the right, showing a strip of 20 template designs and buttons to download the price list as a PNG, PDF, or CSV](/images/tools/price-list-generator/price-list-generator-example.webp)

Making a price list with this tool takes four short steps.

1. **Add your items.** Type each product or service, an optional detail line, and a price. Prices are optional, so a line like "Call for quote" renders cleanly with no stray "\$0".
2. **Group into sections.** Add a section heading such as "Hair Services" or "Wholesale Tiers" to organise long lists. Every template renders the heading in its own style.
3. **Pick a template and style.** Choose from 20 templates, spanning clean business tables, elegant serif and boutique looks, bold branded headers, warm artisan menus, dark premium styles, and vibrant tinted designs. Then set an accent color, a font, one or two columns, and your currency.
4. **Download.** Export a crisp PNG for the web, a print-ready PDF for A4 or US Letter, or a CSV that opens in Excel and Google Sheets.

The live preview updates as you type, so the page you see is the page you download.

## What to include on a price list

A good price list is easy to scan and quick to trust. Include these parts.

- **Business name and logo.** Put your brand at the top so the page is clearly yours.
- **A clear title.** "Price List" works, or name it "2026 Rates" or "Wholesale Price Sheet".
- **An effective date or subtitle.** This tells customers the prices are current and sets expectations if they change.
- **Sections.** Group related items so a long list does not read as one wall of text.
- **Item names, details, and prices.** Keep names short. Use the detail line for the small print, like pack size or duration.
- **A contact footer.** Add a phone number, website, or social handle so a reader knows how to buy.

## Price list vs price sheet vs pricing sheet

These terms mostly mean the same thing. A **price list**, a **price sheet**, and a **pricing sheet** all describe a single document that lists what you sell and what it costs. Some businesses use "price sheet" for an internal or wholesale document and "price list" for the public one, but the format is the same. This tool builds all three from the same editor. Pick a clean template for a public menu of services, or the Wholesale template for a stockist-facing price sheet.

## How to make a wholesale price list

A **wholesale price list** helps stockists and buyers order from you quickly. Use the Wholesale template for a businesslike striped table, then group products into sections by category or order tier. Add a detail line for the pack size, the case quantity, or the minimum order. Set your currency, keep the layout to one column for a formal look, and export the PDF to email to buyers. Keep the CSV as your own master copy so you can re-import and update prices later.

## Price list vs price tag vs invoice

It is easy to mix these up, so here is the difference.

- A **price list** shows many products and their prices on one shareable page. Use it to publish your prices. If you need to label a single product on a shelf instead, use our [price tag generator](/tools/price-tag-generator).
- A **price tag** labels one item with its price, and often a barcode, for a shelf or product.
- An **invoice** is a billing document for one sale, with the buyer, quantities, taxes, and a total due.

Use the price list to publish, the price tag to label, and the invoice to charge.

## Import your products instead of typing them

You do not have to type a long catalog by hand.

- **Bulk paste.** Paste a block with one product per line. Separate the fields with a comma, a pipe, or a tab. The tool reads the last value on each line as the price, so `Wash and Cut, 65` and `Full Colour | Toner included | 120` both work.
- **CSV import.** Upload a spreadsheet with Name and Price columns. Extra columns are ignored, so the file does not need to be perfect. It even accepts the export from our [SKU generator](/tools/sku-generator), so you can turn a product catalog into a price list in seconds.

Once your items are in, style the list and export. If you also print shelf labels with barcodes, our [barcode generator](/tools/barcode-generator) creates scannable EAN, UPC, and Code 128 labels from the same product data.

## Tips for a price list that sells

- **Lead with value, not just numbers.** A short detail line under each item explains what the price includes.
- **Round your prices for a premium look.** A whole number like \$120 often reads cleaner than \$119.99 on a services list.
- **Use two columns for long lists.** It keeps the page short and easy to scan.
- **Match the template to your brand.** Dark Luxe suits a boutique or salon, Modern Business suits a studio or agency, and Wholesale suits a supplier.
- **Keep it current.** Update the effective date whenever prices change, then re-export.

## Frequently asked questions

### What is a price list?

A price list is a single, one-page document that shows every product or service you sell next to its price. Merchants share it with customers, print it for a counter or notice board, and attach it to quotes and emails. Unlike a price tag, which labels one item, a price list presents your whole range in one place.

### How do I make a price list?

Type or paste your products, add a price to each line, and group them into sections if you want headings. Then pick a template, choose an accent color and font, and download. The live preview updates as you type, so you can see the finished page before you export it.

### Is this price list generator free, with no watermark?

Yes. It is 100% free with no signup and no watermark on the export. You can download as many price lists as you like as PNG, print-ready PDF, or CSV. Your product and price data never leaves your browser.

### What is the difference between a price list, a price tag, and an invoice?

A price list shows many products and their prices on one shareable page. A price tag labels a single item with its price for a shelf or product. An invoice is a billing document for one specific sale, with the buyer, quantities, taxes, and a total due. Use the price list to publish your prices, the price tag to label stock, and the invoice to charge a customer.

### Can I make a wholesale price list?

Yes. Use the Wholesale template for a clean, businesslike table, group items into sections such as categories or order tiers, and add a detail line for pack sizes or minimum order notes. Export the PDF to email to stockists or the CSV to keep your own copy.

### Can I export the price list to Excel or CSV?

Yes. The Export CSV button downloads a spreadsheet file with Section, Name, Detail, and Price columns that opens in Excel, Google Sheets, or Numbers. You can also import a CSV, including the export from our SKU generator, to fill the list in seconds.

### Can I import my products instead of typing them?

Yes. Paste a list with one product per line, separated by a comma, a pipe, or a tab, and the tool splits each line into a name, an optional detail, and a price. You can also upload a CSV file and map the columns automatically, so a long catalog takes seconds to load.

### Will the price list print correctly?

Yes. The PDF is a print-ready portrait page in A4 or US Letter. A short list fits one page, and a long list paginates automatically so rows are not cut in half. Print at 100% scale for a crisp, professional result.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     4. Voice rules from the shopify-community answer-thread skill: first person, measured proof from
        real exports, a screenshot under each step, no teaser lines. Check with
        python3 scripts/check-blog-voice.py --tools --only price-tag-generator -->

---
title: Free Price Tag Template Maker
description: "Free price tag maker: pick a template, add price, sale, SKU, and a barcode or QR code, then print on Avery label sheets or download PNG, PDF, or SVG."
---

# Free Price Tag Template Maker

Make printable price tags with your product name, price, sale, SKU, and a barcode or QR code. Download one tag as a PNG, PDF, or SVG, tile many tags onto a sheet, or print straight onto Avery label sheets. There is no signup and no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Make a Price Tag

[![Watch How to Make a Price Tag](https://img.youtube.com/vi/G85DooLc_BI/maxresdefault.jpg)](https://youtu.be/G85DooLc_BI)

I tested this maker by laying out ten sweater and honey jar price tags on an Avery 5163 label sheet, starting at label 3, and measuring the PDF at 600 DPI. Every tag edge landed within 0.01 inch of the position in Avery's own template. The barcodes printed 1.09 to 1.25 inches wide, depending on the length of the SKU, with the thinnest bars about 0.19 mm thick, and each one decoded to its SKU.

1. **Fill in the product details.** Type the product name, the SKU, and the price. Add a compare-at price if the item is on sale, and the old price shows struck through. The optional lines for unit price, size, color, and country of origin only appear on the tag when you fill them in. Click **Fill example** to start from a finished sweater tag.

![The Product details form filled in for a Merino Wool Sweater with SKU WT-SWT-NVY-M, a price of 59.00, a compare-at price of 89.00, and size, color, and country of origin](/images/tools/price-tag-generator/pt-step-details.webp)

2. **Choose a size.** The presets are real print sizes: 6 x 4 cm and 8 x 6 cm shelf labels, a 2 x 1 inch mini sticker, a 2.25 x 1.25 inch thermal roll label, 3 x 2 and 4 x 3 inch tags, and A4 or A5 sheets. **Custom** takes any width and height. Then pick landscape or portrait.

![The Size and print section with preset buttons for 6 x 4 cm, 8 x 6 cm, 2 x 1 inch, 2.25 x 1.25 inch, 3 x 2 inch, 4 x 3 inch, A4, A5, and Custom, plus the orientation switch](/images/tools/price-tag-generator/pt-step-size.webp)

3. **Pick a template.** There are 15 designs, grouped into retail shelf labels and promo or boutique tags. Each one sets a matching color theme, which you can change later. The samples in the next section show six of them.

![The template picker showing the retail shelf label designs filled in with the example sweater tag](/images/tools/price-tag-generator/pt-step-template.webp)

4. **Add a barcode or QR code.** Under **Scannable code**, choose **Barcode** or **QR code**. The code uses your SKU unless you type a different value. Barcodes come in Code 128, EAN-13, UPC-A, Code 39, and ITF-14, with the digits printed under the bars.

![The Scannable code section with Barcode selected and the Code 128 format chosen](/images/tools/price-tag-generator/pt-step-scan.webp)

5. **Style it and download.** Pick a color theme and a font, and add a logo or product photo if you want one. **Download PNG** gives you an image, **PDF** prints the tag at its real size, and **SVG** is a vector file for print shops and design apps.

![The finished price tag preview with a 34% off badge, 59.00 in large type, 89.00 struck through, a Code 128 barcode, and the Download PNG, PDF, and SVG buttons](/images/tools/price-tag-generator/pt-step-preview.webp)

## Price tag samples and designs

These six tags came out of the maker with the same product filled in. Only the template changed.

![Six price tag samples for a Merino Wool Sweater at 59.00, down from 89.00: Shelf Clean, Grocery Unit, Jewelry Tag, Bold Sale, Boutique Swing, and Was / Now](/images/tools/price-tag-generator/pt-samples.webp)

Top row, left to right:

- **Shelf Clean** puts the price first, with the SKU and barcode along the bottom. It suits most retail shelves.
- **Grocery Unit** adds a strong header band and has room for a unit-price line such as `100 g = \$2.60`.
- **Jewelry Tag** is a dark swing tag with a punch hole, for small, high-value items.

Bottom row, left to right:

- **Bold Sale** is a loud red markdown tag with a SALE header.
- **Boutique Swing** is a dark hang tag with a punch hole and a percent-off badge.
- **Was / Now** shows the old and new price side by side in red.

The other nine are Shelf + Image (with a product photo), Minimal, Eco / Natural, Clothing Tag (with size and color chips), Holiday Sale, Sale Burst, Was / Now Split, Pennant, and Blank. Blank starts almost empty, so you add only the lines you want.

## How to write a price tag

A price tag has to answer what the item costs before a shopper picks it up. Put the lines in this order of size:

1. **Price**, the largest text on the tag, with the currency symbol.
2. **Product name**, short enough to fit on one or two lines.
3. **Old price**, struck through next to the new one when the item is on sale. A percent-off badge works too.
4. **Unit price**, for food and household goods, such as `100 g = \$2.60` or `per 1 pc`.
5. **Size, color, or origin**, for clothing. These are what a shopper checks before the fitting room.
6. **SKU and barcode**, so staff can restock and the till can scan the tag.

When you add a percent-off badge without an old price, the maker works out the old price from the discount. The badge and the struck price then always agree.

## Print price tags on Avery label sheets

Sticky price labels usually come on die-cut sheets, and the common way to print them is a Word template from the label maker. The **Bulk sheet** tab can do the same job without the Word table. Set **Sheet type** to **Avery label sheet** and pick the number printed on your label pack. The maker places one tag on each label, using the margins and spacing from Avery's own template files.

| Avery product | Label size | Labels per sheet | Paper |
| --- | --- | --- | --- |
| 5160 / 8160 | 1" x 2-5/8" | 30 (3 x 10) | US Letter |
| 5163 / 8163 | 2" x 4" | 10 (2 x 5) | US Letter |
| 22806 | 2" x 2" square | 12 (3 x 4) | US Letter |
| 5164 / 8164 | 3-1/3" x 4" | 6 (2 x 3) | US Letter |
| L7160 | 63.5 x 38.1 mm | 21 (3 x 7) | A4 |

1. **Open the Bulk sheet tab and choose Avery label sheet.** Pick your sheet from the **Label sheet** list.
2. **Set Start at label if the sheet is part used.** Labels count left to right, then down. Tags that do not fit carry on to a second sheet, starting from label 1.
3. **Add your products.** Drop in a CSV file with the columns Product, SKU, Price, Compare, Size, and Copies, one row per product. The **Download sample CSV template** link gives you a file to fill in, and the Copies column sets how many tags each product gets.

![The Bulk sheet controls with Avery label sheet selected, Avery 5163 / 8163 chosen, and Start at label set to 3](/images/tools/price-tag-generator/pt-step-label-controls.webp)

4. **Print the alignment test page first.** It draws only the label outlines. Print it on plain paper, hold it behind a label sheet, and look at both against a window. If the lines sit on the label edges, your printer is lined up.
5. **Print the label PDF at 100% scale.** Turn off "fit to page", because it shrinks the sheet and every tag drifts off its label. The dashed outlines in the preview show where the labels are, and they do not print.

![The label sheet preview with dashed label outlines, the first two labels marked as used, price tags on the rest, and the Download label PDF and Alignment test page buttons](/images/tools/price-tag-generator/pt-step-label-preview.webp)

Two things I noticed while testing the label sheets:

- **On Avery 5160, use a barcode rather than a QR code.** The barcode grows with the label, so on a 1 x 2-5/8 inch label it prints about 1.1 inches wide, which a handheld scanner reads. A QR code only gets about 0.3 inches on a label that short, and phones struggle with it. The maker measures the code on every tag and warns you when the bars or the QR would print too small to scan.
- **A few templates are tight on some labels.** On the 2 inch square (22806), Was / Now Split, Sale Burst, Clothing Tag, and Shelf Clean are marked. On 5164, Was / Now Split and Sale Burst are marked, and on L7160, Was / Now Split. The template list shows a badge on these, so check the preview before you print.

## Plain paper sheets and sizes

If you print on plain card instead of labels, keep **Sheet type** on **Free grid**. The maker tiles 2 x 1, 2.5 x 1.5, 3 x 2, or 4 x 3 inch tags onto A4 or US Letter paper with a small gap between them, and you cut them out yourself. Export the sheet as a PDF or a PNG.

For a single tag, the PDF matches the size you picked, so a 3 x 2 inch tag prints at 3 x 2 inches when you print at 100% scale. The same "fit to page" rule applies: turn it off, or the tag shrinks.

## Barcode and QR code tips

- **Pick the format your till expects.** EAN-13 and UPC-A are the retail product codes that point-of-sale systems read. Code 128 takes any text, so it suits your own SKUs. ITF-14 is for shipping cartons.
- **Keep the SKU short.** A shorter value gives thicker bars, and thicker bars scan more easily from a small tag.
- **Use a QR code for a link.** A QR code can open the product page, a size guide, or care instructions on the shopper's phone.

For a code on its own, use the [Barcode Generator](/tools/barcode-generator) for standalone barcode labels, or the [QR Code Generator](/tools/qr-code-generator) for QR codes with your logo and colors.

## Frequently Asked Questions

### Is this price tag generator free?

Yes. It is free with no signup and no watermark. Download as many price tags as you want as PNG, PDF, or SVG files.

### How do I make a price tag?

Type your product name, price, and any compare-at price, pick one of the 15 templates and a size, then download. The preview updates as you type. Use the Bulk sheet tab to print many tags at once.

### Can I print the price tags?

Yes. Every size is a real print size, such as 6 x 4 cm, 2 x 1 inch, or 3 x 2 inch. Download the PDF and print at 100% scale with fit to page turned off, so the tag comes out at its true size. For sticky labels, the Bulk sheet tab prints straight onto Avery label sheets.

### How do I add a barcode or QR code to a price tag?

Choose Barcode or QR code under Scannable code. The code uses your SKU or a value you type. Barcodes come in Code 128, EAN-13, UPC-A, Code 39, and ITF-14, with the digits printed under the bars, and the code is part of the PNG, PDF, and SVG files.

### Can I make a sale tag with a strikethrough old price?

Yes. Enter a compare-at price and it shows struck through next to the new price. You can also add a percent-off or amount-off badge, and the badge always matches the struck price.

### Is there a blank, editable price tag template?

Yes. The Blank template starts almost empty, and every template lets you edit the name, brand, price, sale, SKU, unit price, size, color, and country of origin.

### Can I make price tags for clothing or a boutique?

Yes. Clothing Tag shows size and color chips, Jewelry Tag and Boutique Swing are hang tags with a punch hole, and Bold Sale and Was / Now cover markdowns.

### Can I bulk-print many price tags at once?

Yes. The Bulk sheet tab takes a CSV file with one row per product and a copies count, and a sample file is provided. It tiles the tags onto A4 or US Letter paper, or places one tag on each label of an Avery label sheet.

### Which Avery label sheets can I print price tags on?

Five Avery layouts: 5160 / 8160 (1 x 2-5/8 inch, 30 per sheet), 5163 / 8163 (2 x 4 inch, 10 per sheet), 22806 (2 inch square, 12 per sheet), 5164 / 8164 (3-1/3 x 4 inch, 6 per sheet), and L7160 on A4 (63.5 x 38.1 mm, 21 per sheet). Set Start at label to use up a part-used sheet.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Print on Demand Profit Calculator
description: Work out your real print on demand profit and margin per order. Enter base cost, markup, ad spend per sale, and shipping to see your selling price, gross margin, and net profit.
---

# Free Print on Demand Profit Calculator

Print on demand removes the scariest part of selling merch: you never buy stock. Printful, Printify, Gelato, or SPOD prints and ships each item only after it sells. The trade-off is a high base cost per unit, because you pay retail-style pricing on a single item instead of a bulk-order rate. That base cost, plus the ad spend it takes to make a sale, decides whether your store earns real money. This free **print on demand profit calculator** does that math for you. Enter your base cost, your markup, your ad spend per order, and any shipping you absorb, and it shows your selling price, gross margin, and true net profit per item. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Print on Demand Profit Calculator

[![Watch how the free Print on Demand Profit Calculator works](https://img.youtube.com/vi/zR-SVqGgd0M/maxresdefault.jpg)](https://youtu.be/zR-SVqGgd0M)

The calculator has four inputs. Each one maps to a real cost in a print on demand order, so fill them in the way your store actually works.

- **Cost of item**: your base cost from the print provider. This is what Printful or Printify charges you to print and fulfil one unit, before your margin. For a t-shirt this is often \$8 to \$13; for a hoodie or an all-over print it is higher.
- **Markup %**: how much you add on top of the base cost to set your retail price. A 100% markup doubles the base cost. Print on demand usually needs a larger markup than a stocking store because the base cost is already high.
- **Customer acquisition cost (CAC)**: what you spend on ads to get one sale. If you spend \$200 on ads and get 8 orders, your CAC is \$25 per order. Organic sales from social or a marketplace audience lower this number. Not sure what yours is? Work it out by channel with our free [customer acquisition cost calculator](/tools/customer-acquisition-cost-calculator).
- **Shipping cost**: what you pay the provider to ship if you do not fully charge the customer. Enter \$0 if the buyer covers shipping in full.

Press calculate to see your selling price, gross profit, gross margin, and net profit after ads and shipping. If your net profit is thin, the base cost and ad cost together are eating the price, and you need a higher markup or a higher-value product.

## The Print on Demand Profit Formula

Want to check the numbers by hand? The calculator runs four formulas in order.

First, your retail price comes from the base cost and your markup:

$$
\text{Retail Price} = \text{Base Cost} \times \left(1 + \frac{\text{Markup \%}}{100}\right)
$$

Gross profit is the retail price minus the provider base cost:

$$
\text{Gross Profit} = \text{Retail Price} - \text{Base Cost}
$$

Gross margin turns that into a percentage of the retail price:

$$
\text{Gross Margin \%} = \frac{\text{Gross Profit}}{\text{Retail Price}} \times 100
$$

Net profit is the number that decides whether a design is worth running. It takes your ad spend and shipping out of the gross profit:

$$
\text{Net Profit} = \text{Retail Price} - \left(\text{Base Cost} + \text{CAC} + \text{Shipping}\right)
$$

For example, a \$12 base-cost tee at a 130% markup sells for \$28. Subtract the \$12 base cost, a \$9 customer acquisition cost, and \$1 shipping, and your net profit is \$6 per order.

## Why Print on Demand Margins Need a Bigger Markup

A classic retailer buys 500 shirts at \$4 each and sells them at \$25. Their margin is enormous because volume crushes the unit cost. A print on demand seller pays \$11 for that same shirt because it is printed one at a time. So the same \$25 retail price leaves a very different profit.

That single fact drives every print on demand pricing decision. Your base cost is high, so your markup has to be high just to reach a normal margin. Sell that \$11 shirt at \$22 and your gross margin is only 50%, which sounds fine until ad spend arrives. If it costs \$8 in ads to make the sale, your net profit is \$3. Price the same shirt at \$28 or \$30 instead, which the market often accepts for a good design, and the net profit doubles or triples with no change in cost.

The upside of print on demand is that risk is close to zero. You are not sitting on unsold stock, so you can test dozens of designs cheaply and scale only the winners. But that only works if you price with the base cost in full view. A **print on demand profit calculator** keeps the base cost and the ad cost on screen together, so you never launch a design that cannot make money.

## What Is a Good Profit Margin for Print on Demand?

A healthy print on demand store usually aims for a **profit margin of 30% to 40%** on apparel, and often higher on low-base-cost items like mugs, posters, and stickers where the markup can be aggressive. Because base costs are high, hitting those margins means charging retail prices with confidence, not racing to the bottom.

Product choice matters as much as pricing. A \$4 base-cost mug sold at \$18 has a far higher margin percentage than a \$13 base-cost hoodie sold at \$45, even though the hoodie earns more dollars per order. Many successful stores mix the two: low-base items for margin percentage and easy impulse buys, higher-ticket items for dollar profit. Run each product through the calculator so you know which is which before you build a collection around it.

## How to Improve Your Print on Demand Profit

- **Raise your retail price**: good designs command a premium. Test a higher price. Print on demand buyers are paying for the design, not the blank, so a strong graphic supports a price a plain shirt never could.
- **Lower your base cost**: compare providers and blanks. The same design on a slightly different garment, or with a different print method, can shave dollars off the base cost. At scale, some providers offer branded or bulk pricing that lowers your unit cost.
- **Sell higher-value bundles**: a matching set, a two-pack, or an upsell spreads a single ad cost across more revenue and lifts your average order value.
- **Build organic traffic**: short-form video, a niche audience, and marketplaces like Etsy bring sales that do not cost ad spend, which drops your customer acquisition cost and lifts net margin directly.

## Print on Demand Profit: A Worked Example

You sell a niche graphic tee. Printful charges you \$12 as the base cost. You apply a 130% markup, so your retail price is about \$28. Your gross profit is \$16, a gross margin of about 57%. Then ad spend arrives at \$9 per sale, and you absorb \$1 of shipping to offer a rounder price. Your net profit is \$16 minus \$9 minus \$1, which is \$6 per order. On 300 orders a month that is \$1,800 net, before payment fees.

Now improve two things. You add a matching sticker pack with a \$3 base cost sold at \$9, and you lift the tee to \$30 because the design supports it. The ad cost stays at \$9 because it is the same buyer. Net profit per order climbs well above \$6. That is the whole print on demand game in one example, and it is exactly what this calculator shows you before you launch a single design.

## Frequently Asked Questions

### What is a good profit margin for print on demand?

A healthy print on demand store usually targets a 30% to 40% profit margin on apparel, and often higher on low-base-cost items like mugs, posters, and stickers. Because base costs are high, reaching those margins means charging confident retail prices rather than racing competitors to the bottom. The right target is whatever leaves a net profit you are happy with after your base cost and real ad spend.

### How do I calculate print on demand profit?

Start with your retail price, then subtract every cost of the order: the base cost your print provider charges, the ad spend it took to win the sale, any shipping you absorb, and payment processing fees. What is left is your net profit. This calculator does it for you: enter base cost, markup, customer acquisition cost, and shipping, and it returns your selling price, gross margin, and net profit per item.

### Why is the base cost so high on print on demand?

Because each item is printed and shipped one at a time, you pay a per-unit price close to what a small order would cost, not the deep discount a bulk buyer gets for ordering hundreds of units. That is the trade-off for holding zero inventory and taking almost no upfront risk. It means your markup has to be larger than a stocking store's just to reach the same margin, which is why pricing with the base cost in full view matters so much.

### What costs should I include in a print on demand margin?

Include the provider base cost, shipping you do not pass to the buyer, customer acquisition cost (ad spend divided by orders won), payment processing fees, and any design or app subscriptions. Sample orders and the occasional reprint for a misprint or a return are worth a small buffer. Leaving ad cost out is the most common mistake, because it makes a thin-margin design look profitable.

### Is print on demand profitable?

Yes, when you price for the high base cost and keep ad spend under control. The model's strength is near-zero risk: you can test many designs cheaply and scale only the winners, and you never hold unsold stock. The stores that profit charge real retail prices for strong designs, mix low-base items for margin with higher-ticket items for dollar profit, and check every product's numbers before building a collection around it.

### How do I use this print on demand profit calculator?

Enter your provider base cost, the markup percentage you want to add, your customer acquisition cost per order (ad spend divided by orders), and any shipping you absorb. The tool calculates your selling price, gross profit, gross margin, and net profit after ads and shipping. If the net profit is thin, raise your markup, choose a lower-base product, or lift your average order value, then recalculate until the numbers work.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Shopify Profit Margin Calculator

Calculate your product profit margin, markup, and net profit instantly. You might run a Shopify store. You might have an Etsy shop or a physical retail business. Our free **Shopify profit margin calculator** helps you determine your exact earnings on every sale. Factor in shipping costs and customer acquisition costs. You can then see your true net profit. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free Profit Margin Calculator

[![Watch How It Works](https://img.youtube.com/vi/F3xOUPqr8GE/maxresdefault.jpg)](https://youtu.be/F3xOUPqr8GE)

This quick video walkthrough shows how to enter your costs. You will learn to apply a markup. You will instantly see your gross and net profit margins using our free calculator.

## How to Calculate Profit Margin Shopify

Understanding your numbers is critical for business growth. You might be wondering **how to calculate profit margin shopify**. Here is a quick guide on how to use our tool:

1. **Enter your cost of item**: This is how much it costs you to manufacture, purchase, or source one unit of your product.
2. **Enter your markup percentage**: This is the percentage you add to the cost to determine the final sale price.
3. **Add optional costs**: Enter your customer acquisition cost (marketing/sales cost per customer). Add your shipping cost. This gives you a more accurate net profit.
4. **View your results**: The **profit margin calculator shopify** instantly shows your sale price. It also shows gross profit, gross margin percentage, total cost, and net profit.

### The Profit Margin Formula

Do you want to calculate your gross **profit margin shopify** manually? Here is the standard formula:

$$
\text{Gross Margin \%} = \frac{\text{Sale Price} - \text{Cost of Item}}{\text{Sale Price}} \times 100
$$

For example, you sell a product for \$100. It costs you \$50 to make. Your gross profit is \$50.
((\$100 - \$50) / \$100) × 100 = 50% Gross Margin.

### The Markup Formula

Markup is the percentage of the cost you add to reach the selling price:

$$
\text{Sale Price} = \text{Cost of Item} \times \left(1 + \frac{\text{Markup \%}}{100}\right)
$$

For example, a product costs \$50. You apply a 100% markup:
\$50 × (1 + (100 / 100)) = \$100 Sale Price.

## Understanding Gross vs. Net Shopify Profit Margin

Shopify merchants and ecommerce sellers must know the difference between gross and net profit margins. This is essential for making sound pricing decisions.

**Gross profit margin** measures remaining revenue after subtracting the direct cost of producing your product. This cost is known as Cost of Goods Sold, or COGS. It tells you your product's profitability before considering other business expenses.

**Net profit margin** paints the full picture. It factors in every business expense. This includes marketing spend, shipping fees, platform subscriptions, payment processing fees, and other overhead. This number truly reflects what ends up in your pocket.

- **Gross Profit**: Revenue minus the direct cost of the product. This is your product-level profitability.
- **Net Profit**: What remains after deducting all additional costs like advertising, fulfillment, and operational expenses. A negative net profit means you are losing money on every order.

Many online sellers only look at gross margins. They ignore indirect costs. You must incorporate shipping, customer acquisition cost, and operational overhead. This gives a realistic view of your store's financial health. This is especially true if you calculate your **shopify dropshipping profit margin**.

## Key Costs to Include in Profit Margin Calculations

Accurate margin calculations require more than just product cost. Here are essential cost categories every Shopify seller should track:

- **Cost of Goods Sold (COGS)**: The direct expense of manufacturing, purchasing, or sourcing your product. This is the baseline for computing gross profit.
- **Shipping & Fulfillment Costs**: Delivery expenses can quickly erode margins. This happens especially if you offer free shipping. Include packaging, postage, and warehousing fees.
- **Customer Acquisition Cost (CAC)**: The total amount spent on marketing and advertising divided by new customers gained. High CAC relative to your product margin signals an unsustainable business model. Work yours out by channel with our free [customer acquisition cost calculator](/tools/customer-acquisition-cost-calculator).
- **Operational Expenses**: These include platform subscription fees (like Shopify plan costs). They also include payment gateway fees, returns handling, and recurring store overhead.

Include all these in your analysis. This ensures the "profit" you see is real profit. It is not an inflated number ignoring half your expenses.

## Strategies to Improve Your Profit Margins

Knowing your margins is only the first step. Here are proven strategies ecommerce sellers use to boost profitability:

- **Optimize Your Pricing**: Regularly benchmark your prices against competitors. Check market trends. Dynamic pricing, bundling, and tiered pricing can unlock higher revenue per sale.
- **Reduce Your Cost of Goods**: Negotiate better rates with suppliers. Order in larger quantities for volume discounts. Source alternative materials that maintain quality at a lower cost.
- **Increase Average Order Value (AOV)**: Use upselling and cross-selling. Offer minimum-order thresholds for free shipping. This encourages customers to spend more per transaction.
- **Lower Customer Acquisition Cost**: Invest in organic channels like SEO and content marketing. Optimize ad targeting to reduce wasted spend. Focus on customer retention to increase lifetime value.
- **Minimize Shipping Costs**: Negotiate carrier rates. Use flat-rate shipping where advantageous. Pass a portion of shipping costs to the buyer strategically.

A healthy ecommerce profit margin typically falls between 20% and 40%. This depends on your industry, product type, and business model. Aiming for at least a 20% net margin is a strong benchmark for sustainable growth.

## Frequently Asked Questions

### What is profit margin?

Profit margin is a financial metric. It shows the percentage of revenue remaining after deducting costs. It indicates how efficiently a business converts sales into actual profit.

### What is a good profit margin for Shopify?

A "good" profit margin varies heavily by industry. A 20% margin might be excellent in grocery retail. It might be poor in software. Standard ecommerce sellers often wonder **what is a good profit margin for shopify**. A 10% to 20% net profit margin is generally healthy. Many successful Shopify stores aim for at least 20% net margin. This ensures sustainable profitability after all expenses.

### How does this calculator work?

Our free tool takes your product cost and markup. It calculates the final selling price. It then calculates the gross profit and margin. Input your marketing and shipping costs. The tool deducts those from the gross profit to show your final net profit.

### Is profit margin the same as markup?

No. **Markup** is the percentage added to your cost to get the selling price. **Profit margin** is the percentage of the selling price that is profit. A 100% markup on a \$50 item gives a \$100 sale price. This results in a 50% profit margin.

### What costs should I include in my margin calculations?

For accurate results, include the cost of goods sold (COGS). Also include shipping and fulfillment fees. Add customer acquisition costs like marketing and advertising spend. Finally, include operational expenses like platform subscriptions and payment processing fees. This comprehensive approach reflects true profitability.

### How do I calculate customer acquisition cost (CAC)?

Divide your total marketing and advertising spend over a given period by the number of new customers acquired. For example, you spent \$1,000 on ads last month. You gained 50 new customers. Your CAC is \$20 per customer.

### How can I improve my Shopify store's profit margins?

Focus on three key areas. Optimize your pricing strategy based on competitor analysis and demand. Reduce your cost of goods by negotiating with suppliers or sourcing alternatives. Increase average order value through upselling and cross-selling. Lowering customer acquisition cost through organic marketing channels also significantly boosts net margins.

### What is a revenue multiplier?

A revenue multiplier is also called a cost multiplier. It shows how many times your cost is multiplied to reach the selling price. For example, a 2x multiplier means your selling price is twice your cost. This is equivalent to a 100% markup and a 50% profit margin. It is a quick way to gauge pricing efficiency at a glance.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     4. The "## Frequently asked questions" answers must match FAQ_ITEMS in page.tsx word for word. -->

---
title: Free Proforma Invoice Template
description: Create a quote-style proforma invoice with a valid-until date, optional customs fields and Incoterms 2020, then download a print-ready PDF. Free, no signup.
---

# Free Proforma Invoice Template

Fill in a **proforma invoice template** and download a print-ready PDF in about two minutes. Add your business and buyer details, list each product with its price, add any freight or insurance, and set a valid-until date. It is free, runs entirely in your browser, and needs no signup.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## What Is a Proforma Invoice?

A proforma invoice is a preliminary invoice a seller sends before the sale is final. The name comes from the Latin for "as a matter of form": it is shaped like an invoice, but it is a quote rather than a bill. It lists the goods, the quantities, and the prices you expect to charge, but it does not ask anyone for money yet.

The single most important thing to understand is what a proforma is not. It is not a tax invoice. It is not a demand for payment. The buyer does not record it as a payable and the seller does not record it as a sale. It has no accounting value on its own. That is why a good proforma states this in plain language on its face, and why this tool prints a disclaimer on every proforma it makes.

Because the sale is not yet agreed, the prices on a proforma are provisional. Sellers give the document a validity or expiry date, often 30 days, so the buyer knows how long the quoted prices hold. Once the buyer confirms the order, the seller replaces the proforma with a real commercial or tax invoice.

The US government trade office explains the document in the same terms. See the [trade.gov guide to the pro forma invoice](https://www.trade.gov/pro-forma-invoice) and the [Investopedia definition of a pro forma invoice](https://www.investopedia.com/terms/p/pro-forma-invoice.asp) for the authoritative descriptions this tool follows.

## When to Use a Proforma Invoice

A proforma is used before the sale is finalised. There are five common cases, and they all share the same feature: the price is still provisional.

1. **A firm quote.** You give a prospective buyer a document that looks like the final invoice so they can see the full cost, including shipping, before they commit.
2. **Advance or prepayment.** Many exporters ask for a deposit or full prepayment before they ship. The buyer pays against the proforma, and the commercial invoice follows once the goods are ready.
3. **A letter of credit.** Banks that open a letter of credit need a proforma invoice to set the terms and the amount before the goods move.
4. **An import licence or permit.** Some countries require an importer to obtain a licence before certain goods can enter. The licence application needs a proforma showing what is being imported and its value.
5. **Provisional customs valuation.** Customs can use a proforma to estimate the duties and taxes on a shipment before the final commercial invoice exists. This is an estimate, not the final assessment.

In none of these cases is the proforma a completed sale. It is the document that gets the deal moving.

## How to Fill Out a Proforma Invoice

This **simple proforma invoice template** walks through each block in order. Here is what goes in each one.

[![Watch How It Works](https://img.youtube.com/vi/cHiwKBGtVt4/maxresdefault.jpg)](https://youtu.be/cHiwKBGtVt4)

1. **Your business (seller).** Your legal business name, full address, and email. For an international quote, add your tax, EORI, or VAT registration number.
2. **Buyer.** The legal name and full address of the prospective buyer. Add their tax or EORI number for a cross-border quote.
3. **Proforma number and date.** Use your own numbering. This tool defaults to a `PI-` prefix so a proforma is never mistaken for a commercial invoice or a tax invoice.
4. **Valid Until date.** The date the quoted prices lapse. This is the field that makes a proforma a proforma: the prices are provisional, so they expire.
5. **Line items.** One row per product. Give a plain description, the quantity, and the unit price. For an international quote you can also add the HS tariff code, the country of origin, the quantity unit, and the net weight per unit.
6. **Charges.** Freight, insurance, and any other named charge such as packing, each entered on its own line so the buyer can see them.
7. **Disclaimer.** The statement that marks the document as a proforma. The default wording says it is not a tax invoice and not a demand for payment. You can edit it to match your local phrasing.
8. **Notes.** Your advance-payment or bank instructions, and anything else the buyer needs to confirm the order.

## A Worked Example

Say you are quoting a buyer for ten benchtop meters at \$250.00 each, and you will ship them for a flat freight charge of \$120.00.

- Ten units at \$250.00 each is a subtotal of **\$2,500.00**.
- Add freight of \$120.00.
- The proforma total is **\$2,620.00**.

There is no sales tax on this quote, because a proforma records no completed sale. The total is simply the goods value plus the itemised freight. This tool computes the subtotal and total for you as you type, and prints the freight as its own line so the buyer sees exactly what makes up the \$2,620.00.

## Proforma Invoice vs Commercial Invoice

These two documents look almost identical, which is why they are so often confused. The difference is timing and purpose.

A **proforma invoice** comes first. It is sent before the sale is final, its prices are provisional, and it carries no signed declaration. It is a quote, used to arrange payment, an import licence, or a letter of credit.

A **commercial invoice** comes second. It is issued after the sale is agreed, it states the actual price paid, it is the document customs assesses duty against, and it carries a signed declaration from the seller. It has real accounting and legal weight.

In short: the proforma is the estimate, and the commercial invoice is the record of the completed sale. If you need the second document, use our [commercial invoice generator](/tools/commercial-invoice-generator) instead. If you just need a plain quote with no customs fields, the [quote generator](/tools/quote-generator) is simpler.

## International Proforma Invoices and Incoterms

If your quote crosses a border, the buyer and their customs broker will want to estimate duties before they commit. You can add the international trade fields to any proforma:

- **HS tariff codes** per line, so the buyer can look up the duty rate. Six digits is the international minimum set by the World Customs Organization.
- **Country of origin** per line, which also affects the duty rate.
- **An Incoterms 2020 rule**, which sets who pays for freight and insurance and where the risk passes. There are exactly eleven rules. Seven work for any mode of transport: EXW, FCA, CPT, CIP, DAP, DPU, and DDP. Four are for sea and inland waterway transport only: FAS, FOB, CFR, and CIF.
- **Shipment weights and package counts**, so the carrier can quote the freight.

When you leave these fields blank, they disappear from the document, so a domestic proforma stays clean and short. Fill them in and the customs columns appear, in preview and in the exported PDF.

## Tips for a Clean Proforma

- **Mark it clearly.** The title should say PROFORMA INVOICE, not INVOICE. This tool does that automatically.
- **Keep the disclaimer.** It protects both sides by making clear the document is not a bill.
- **Set a realistic validity.** Thirty days is common. If your costs move quickly, use a shorter window.
- **State your payment terms.** If you want a deposit, say so in the notes, with the bank details.
- **Number it separately.** Do not reuse your invoice numbers. A `PI-` prefix keeps your books tidy.

## Frequently asked questions

### What is a proforma invoice?

A proforma invoice is a preliminary invoice a seller sends before the sale is final. It looks like a normal invoice and lists the goods, quantities and prices, but it is a quote, not a bill. It is not a tax invoice and it is not a demand for payment. Buyers use it to arrange payment, apply for an import licence, or open a letter of credit, and customs can use it for a provisional valuation of the goods.

### What is the difference between a proforma invoice and a commercial invoice?

A proforma invoice is sent before the sale is final. It is a quote used to arrange payment, an import licence, or a letter of credit, its prices are provisional, and it carries no signed declaration. A commercial invoice is issued after the sale is agreed, states the actual price paid, is the document customs assesses duty against, and carries a signed declaration. The proforma comes first; the commercial invoice replaces it once the order is confirmed.

### Is a proforma invoice a legal document or a demand for payment?

No. A proforma invoice is not a demand for payment and it is not a tax invoice, so the buyer does not record it as a payable and the seller does not record it as a sale. It has no accounting value on its own. It becomes a real invoice only when you issue a commercial or tax invoice after the order is confirmed. This tool prints a disclaimer on the document that states this in plain language.

### When should I use a proforma invoice?

Use one before the sale is finalised. The common cases are giving a buyer a firm quote, arranging an advance or prepayment, supporting a letter of credit at the bank, applying for an import licence or permit, and giving customs a provisional valuation so they can estimate duties and taxes. In every case the price is still provisional, which is why the document shows a valid-until date.

### Does a proforma invoice expire?

It usually does. Because the prices on a proforma are provisional, sellers give it a validity or expiry date, often 30 days. After that date the quote lapses and prices can change. This tool has a Valid Until field that prints in the document header so the buyer knows how long the quoted prices hold.

### What should a proforma invoice include?

It should carry your business and the buyer's details, a proforma number and date, a valid-until date, a description of the goods with quantities and unit prices, any freight or insurance charges, and the total. For an international quote you can add HS tariff codes, country of origin, an Incoterms 2020 rule, and shipment weights so the buyer and their customs broker can estimate duties. Mark the document clearly as a proforma invoice and state that it is not a tax invoice.

### How many Incoterms 2020 rules are there?

There are exactly eleven. Seven work for any mode of transport: EXW, FCA, CPT, CIP, DAP, DPU and DDP. Four are for sea and inland waterway transport only: FAS, FOB, CFR and CIF. DAT was renamed DPU in the 2020 edition, and DDU and EXQ were withdrawn in earlier editions, so none of those three should appear on a current proforma or commercial invoice.

### Is this proforma invoice generator free?

Yes. It is completely free, needs no signup, and creates unlimited proforma invoices. Everything runs in your browser, so your business, buyer and product data never leaves your computer. The exported PDF carries no watermark and no branding.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Purchase Order Generator

Create a clear, professional **purchase order** to send to a supplier in a couple of minutes. Our free **purchase order generator** lets you add the vendor, the items you want to buy with their agreed prices, a delivery date, and payment terms, then download a tidy PDF. It is built for Shopify and ecommerce sellers who restock inventory from wholesalers and manufacturers. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Make a Purchase Order

[![Watch How It Works](https://img.youtube.com/vi/cHiwKBGtVt4/maxresdefault.jpg)](https://youtu.be/cHiwKBGtVt4)

This **purchase order template** is built around the buyer-to-supplier order. Fill it in like this:

1. **Add your company details**: Your business name, logo, and address. On a purchase order you are the buyer, so this is who the order comes from.
2. **Add the vendor**: Enter the supplier you are ordering from. This field is labelled Vendor on the purchase order document type.
3. **Set the PO number and dates**: Use a unique PO number and add the order date and the delivery date you expect.
4. **List what you are ordering**: Add one line per product with the quantity and the agreed unit price. The tool adds up the line totals and the order total for you.
5. **Add terms and notes**: Set payment terms, such as Net 30, and add any shipping or packaging instructions.
6. **Download the PDF**: Click Download PDF and email it to your supplier.

## What Is a Purchase Order?

A purchase order is a commercial document a buyer sends to a seller to order goods or services. It states exactly what the buyer wants: the products, the quantities, the agreed unit prices, where to ship, and when delivery is expected. A purchase order is an official offer to buy. Once the supplier accepts it, the PO becomes a binding agreement between the two parties.

For a store owner, the purchase order is the start of the restocking process. You decide what inventory you need, you agree pricing with your supplier, and you put that agreement in writing as a PO. That written record protects both sides if the delivery, the price, or the quantity is ever in dispute.

## Purchase Order vs Invoice

A purchase order and an invoice cover the same order, but from opposite directions and at different times.

- A **purchase order** is created by the **buyer**, **before** the goods ship. It says "here is what I want to buy from you, at these prices."
- An **invoice** is created by the **supplier**, **after** the goods ship. It says "here is what you owe me for that order."

The two documents are linked by the PO number. A well-run supplier prints your PO number on their invoice, so you can match the bill back to the order you actually placed. If you also sell to other businesses and need to send invoices yourself, our [free invoice generator](/tools/invoice-generator) uses the same engine as this tool.

## What to Include on a Purchase Order

A complete purchase order has a few more fields than a basic sales document, because price and timing both matter:

- **A unique PO number** for tracking and matching.
- **Buyer and vendor details**: your company and the supplier, with addresses.
- **A ship-to address**, which can differ from your billing address if you drop-ship or use a third-party warehouse.
- **Line items**: product, quantity, and agreed unit price for each.
- **Order total** so both sides agree on the value.
- **Delivery date** and **payment terms** such as Net 15 or Net 30.
- **Notes**: packaging, labelling, or shipping instructions.

## The Three-Way Match

Larger and more careful buyers use a simple control called the three-way match before they pay any supplier. They compare three documents:

1. The **purchase order** (what you agreed to buy).
2. The **goods received note** or packing slip (what actually arrived).
3. The **supplier invoice** (what you are being billed).

If all three agree on items, quantities, and prices, the invoice is safe to pay. If they do not, you have caught an error before money left your account. Even a one-person store benefits from this habit. It stops you paying for short shipments or for prices higher than you agreed.

## Tips for Better Purchase Orders

- **Number your POs in a simple sequence.** A clear running number such as PO-2026-001 keeps your records easy to search.
- **Confirm pricing first.** A purchase order should reflect prices you have already agreed with the supplier, not a guess. That is what makes it binding and useful.
- **State the delivery date clearly.** A specific expected date gives you a reference if the supplier is late.
- **Keep a copy.** Save the PDF for your own records, then check it against the [packing slip](/tools/packing-slip-generator) when the stock arrives and against the supplier invoice before you pay.

## Frequently Asked Questions

### What is a purchase order?

A purchase order, or PO, is a document a buyer sends to a supplier to order goods or services. It lists the items, quantities, agreed prices, and delivery details. Once the supplier accepts it, a PO becomes a binding agreement.

### What is the difference between a purchase order and an invoice?

A purchase order is sent by the buyer before the order is fulfilled and states what they want to buy. An invoice is sent by the supplier after fulfillment and requests payment. The PO number usually appears on the matching invoice.

### What should a purchase order include?

A PO number, your company and the vendor details, a ship-to address, a line for each item with quantity and agreed unit price, the delivery date, and payment terms.

### Why do businesses use PO numbers?

A PO number ties the order, the goods received, and the supplier invoice together. Matching these three documents before paying is a simple control that catches overcharges and duplicate bills.

### Is this purchase order generator free?

Yes, it is 100% free, needs no signup, and lets you create unlimited purchase orders.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free QR Code Generator

> Instantly generate customizable QR codes. Create them for links, Wi-Fi, vCards, emails, phone numbers, SMS, and plain text. You need no signup.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free QR Code Generator

[![Watch How It Works](https://img.youtube.com/vi/pzdGaHqFs0M/maxresdefault.jpg)](https://youtu.be/pzdGaHqFs0M)

This quick video walkthrough demonstrates how to select data types. You will see how to customize styles and gradients. You can add your logo or fetch one from a domain. Finally, download print-ready QR codes.

## The Ultimate Shopify QR Code Generator

Use our free QR code generator to create custom, professional QR codes in seconds. Drive traffic. Track scans. Grow your Shopify store's sales.

You might run a Shopify store. You might run an Etsy shop. Creating unlimited QR codes is a proven way to bridge the physical and digital shopping experience. You might be looking for a reliable **QR code generator Shopify** merchants can trust. This easy-to-use tool allows you to design, customize, and generate QR codes for any purpose.

Use our **Shopify free QR code generator** to create scannable codes. Put them on product packaging, in-store displays, flyers, emails, or social media. It is a versatile **QR code maker**. It lets you send shoppers directly to your product listings. You can send them to a specific collection or a special discount page. You might want to **make a QR code** that is basic. You might want a fully branded version with your store's logo. This **Shopify QR code generator free** tool gives you full control over your designs.

### How to Create a QR Code for Your Shopify Store (Step-by-Step)

You want to know how to **create qr code shopify** assets that actually convert. The process is incredibly straightforward. Here is a quick guide on how to use the **best qr code generator for shopify**. You can create your custom code in minutes:

1. **Select Your Data Type:** Decide where you want to send your customers. Input a direct link to your store (URL). Input a plain text message. Use a vCard with your business contact info. You can even use Wi-Fi credentials for your physical pop-up shop.
2. **Enter Your Destination Link:** You might be creating a **shopify qr code** for a specific product. Grab the exact URL from your storefront. We highly recommend adding UTM parameters. Add tags like `?utm_source=qr&utm_medium=packaging`. This lets you track scans directly in your Shopify Analytics dashboard.
3. **Customize the Design:** Do not settle for a boring black-and-white square. Use the customization options to change the dot style. Modify the corner shapes. Apply your specific brand colors.
4. **Add Your Logo:** Upload your brand's logo or a custom icon. Placing a logo in the center of the QR code increases brand recognition. It builds trust. This makes customers more likely to scan it.
5. **Download and Test:** Download your design in high resolution. _Crucial step:_ Always test the downloaded image with your smartphone camera before sending it off to the printers!

### Top Ways to Use a Shopify QR Code to Boost Sales

A QR code is more than just a digital link. It is a powerful tool. It drives business goals. It tracks offline campaigns. It facilitates frictionless transactions. Here are the top ways to leverage them:

1. **QR Codes for Shopify Product Packaging:** Do not let the customer journey end when they unbox their order. Print a custom QR code on your product inserts, tags, or boxes. Link this code to video tutorials or care instructions. Link it to a landing page asking for a product review. This turns a one-time buyer into an engaged community member.
2. **Direct to Shopify Checkout:** Reduce friction by sending customers straight to the checkout page. You can generate a Shopify cart permalink. This automatically adds specific items to the cart. Turn that long link into a clean QR code. This is perfect for limited-edition drops or in-person pop-up events.
3. **Auto-Apply Discount Codes:** Reward offline shoppers or event attendees with exclusive discounts. Take your Shopify discount shareable link. For example, use `yourstore.com/discount/SUMMER20`. Convert it. When scanned, the discount applies automatically to their session. This significantly boosts conversion rates.
4. **Offline Campaign Tracking:** Are you printing flyers, posters, or business cards? Use unique QR codes for each physical medium. Use different UTM tags for each. Check your analytics later. You will know exactly which physical location or ad drove the most traffic and revenue to your store.

### Key Features of Our Generator

- Instantly generate QR codes for any link, text, phone number, or SMS.
- **Bulk Generation:** Upload a simple CSV file. Instantly generate and download multiple custom QR codes in a single ZIP file.
- Customize QR codes with your Shopify store logo, brand colors, and unique shapes.
- Create high-quality codes for print marketing like packaging and stickers. Create them for digital use.
- Link directly to product pages, discount codes, or special promotional offers.
- Enjoy unlimited QR code generations and downloads. There are no hidden fees or expirations.

### Understanding QR Code Capacity & Limits

QR codes do have a character limit. This depends on the data type and error correction level. At maximum capacity with the lowest error correction:

- **Numeric only (0-9):** up to 7,089 characters
- **Alphanumeric:** up to 4,296 characters
- **Binary/Byte:** up to 2,953 characters (bytes)

**Pro Tip for Best Scannability:** Readability drops as data increases. The _sweet spot_ for best reliability is keeping the embedded text under 300 characters. You might have massive amounts of text. Host it on a webpage instead. Generate a QR code for that URL.

## Frequently Asked Questions

**What is a QR Code?**

QR stands for "quick response". QR codes are two-dimensional barcodes. They can store information like text, URLs, and contact info. They are easily scannable using a smartphone camera. The camera extracts the data and displays it on your screen instantly.

**How can QR codes support my Shopify business?**

QR codes bridge your offline marketing with your online store. Use them on product packaging, business cards, flyers, or at pop-up events. Direct customers to specific product pages. Offer discount codes. Allow swipe payments. They provide a frictionless way for shoppers to interact with your brand.

**Do the QR codes generated here expire?**

No. Our generated QR codes are completely free. They offer unlimited usage. They do not expire. They are static codes. This means they point directly to the data you input. If you need to change the destination URL, you must generate a new code.

**What size should I download my QR code?**

The minimum recommended size for a QR code is 2x2 centimeters. For stickers, thank-you cards, or packaging inserts, a size between 320px and 480px is perfect. You might need the code for a large sign or poster. Scale it up or download it in SVG format. This allows for infinite scaling without quality loss.

**How do I make sure my QR code scans correctly?**

Make sure there is sufficient contrast between the QR code dots and the background. Use dark dots on a light background. Keep the embedded data under 300 characters. Leave a small padding border around the code. Always test-scan your QR code with your phone camera before printing it.

**How do I use this free QR code generator?**

Creating a code is instant. It requires no sign-up. First, select your desired data type. Choose a Website URL, Wi-Fi network, or vCard. Input the relevant details. Next, customize the design. Adjust the shapes. Add brand colors. Upload your store logo. Finally, preview the result. Download your high-quality, print-ready file directly to your device.

**How can I track my QR code scans?**

You want to measure the effectiveness of your offline marketing. We recommend adding tracking parameters to your destination URLs. Append UTM tags to your link before generating the code. Add `?utm_source=qr-code&utm_medium=flyer` for example. You can track exactly how many scans and sales were driven by that specific physical asset. Check this within Shopify Analytics or Google Analytics.

**Can I use QR codes for in-person payments?**

Yes! QR codes are an excellent tool for facilitating swipe-free, contactless payments in retail environments. As a merchant, you can generate a QR code that links directly to a shareable Shopify cart or checkout page. This allows in-store customers to simply scan the code. They can securely complete the transaction on their own mobile devices. They do not need a physical payment terminal.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Quote Generator
description: Create a professional price quote in minutes. Add your logo, client details, and line items with prices, then download a clean PDF. Free, no signup.
---

# Free Quote Generator

Create a professional **price quote** in a couple of minutes. Our free quote generator replaces the usual **quote template** download. Add your logo, the client you are quoting, the products or services with prices, and a valid-until date, then download a tidy PDF. No signup is required, and there is no watermark on the document.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Make a Price Quote

[![Watch How It Works](https://img.youtube.com/vi/cHiwKBGtVt4/maxresdefault.jpg)](https://youtu.be/cHiwKBGtVt4)

A quick walkthrough of the generator: pick a template, add your business name and logo, enter who you are quoting, list the items with quantities and prices, set a valid-until date, then download a print-ready PDF. It is completely free and needs no sign-up.

![Free quote generator preview showing a QUOTE document with the business name, quote number, Valid Until date, line items with prices, subtotal, tax, and total, next to the editor with template options](/images/tools/quote-generator/og.webp)

To be clear up front: this page is about **business quotations**, the documents you send a client with prices on them. If you are looking for motivational quote designs for social media, this is not that. This is the quote template you use to win work.

Fill the generator in like this:

1. **Add your business details**: Enter your business name, logo, and address. This is the header your client sees at the top of the quote, so it should look like it came from a real company.
2. **Add the client**: Enter who the quote is for. On the quote document type, this section is labelled Quote For.
3. **Set the quote number and dates**: Use a unique quote number such as QT-2026-001, add the issue date, and set the Valid Until date. Most quotes are valid for 14 to 30 days.
4. **List your line items**: Add one line per product or service with a quantity and a unit price. The tool calculates each line total, the subtotal, tax, any discount, and the final total live as you type.
5. **Add terms and notes**: State what the price includes, any deposit required, and how the client can accept the quote.
6. **Style it**: Pick a template and set your brand color so the quotation matches your business.
7. **Download the PDF**: Click Download PDF and email it to your client or print it.

Your business details and default notes are saved in your browser, so your second quote takes seconds.

## What to Include on a Quote Template

A complete quotation covers who, what, how much, and for how long:

- **Your business name, logo, and contact details** so the client knows exactly who the offer is from.
- **The client's name and details** under a Quote For heading.
- **A unique quote number** and the issue date for tracking and follow-up.
- **A valid-until date**. Prices change, so cap how long the offer stands.
- **Line items**: each product or service with a quantity and unit price.
- **Subtotal, tax, discount, and total** so the client sees one clear number.
- **Notes and terms**: deposits, payment terms, exclusions, and how to accept.

A vague quote loses work. A line that reads Logo design, 3 concepts, 2 revision rounds, \$450 is much stronger than Design work, \$450.

## Quote vs Estimate vs Invoice

These three documents show up at different points in the same sale, and mixing them up causes disputes.

- A **quote** is a fixed price offer sent before the work. Once the client accepts it, that price stands. Use it when the scope is clear.
- An **estimate** is an educated approximation sent before the work. The final cost can move as the job takes shape. If that fits your situation better, use our [free estimate generator](/tools/estimate-generator), which runs on this same engine with an ESTIMATE title and an Estimated Total.
- An **invoice** is the request for payment after the work is done or the goods are shipped. When your quote is accepted and the job is complete, our [free invoice generator](/tools/invoice-generator) turns the same line items into a bill.

A typical flow: send the quote, the client accepts, you do the work, then you invoice. Inside this tool you can switch the document type from Quote to Invoice and keep everything you typed, which is the same convert-to-invoice flow paid apps sell.

## Why a Generator Beats a Word or Excel Quote Template

Most of what ranks for quote templates is a static Word or Excel file behind a download button. Those files have real drawbacks:

- **Formulas break.** One deleted cell and your Excel quote template totals are wrong. This tool recalculates the subtotal, tax, and total on every keystroke.
- **Formatting drifts.** Word templates fall apart when a line item wraps or a logo is resized. The PDF here is laid out the same way every time.
- **No valid-until logic.** A static file will not remind you that open-ended quotes are risky. The Valid Until field is built into the document.
- **Every quote starts from zero.** The generator remembers your business details in your browser, so repeat quotes are fast.

If you sell physical products, the same engine also produces the paperwork around the quote: a [purchase order](/tools/purchase-order-generator) when you buy the stock, an [order form](/tools/order-form-generator) when the customer commits, and a [packing slip](/tools/packing-slip-generator) when you ship.

## Tips for Quotes That Win Work

- **Send it fast.** The first professional quote in the inbox often frames the client's budget. A generator beats formatting a document from scratch.
- **Keep the validity window short.** 14 to 30 days protects you from cost changes and nudges the client to decide.
- **Break the price into line items.** Itemised quotes feel more honest and are easier to approve than one lump sum.
- **State exclusions in the notes.** What is not included matters as much as what is. It prevents scope creep later.
- **Number quotes in a sequence.** QT-2026-001, QT-2026-002, and so on keeps follow-ups and records simple.
- **Follow up before it expires.** A quick note a few days before the valid-until date closes a surprising number of quotes.

## Frequently Asked Questions

### What is a price quote?

A price quote is a document a business sends to a potential client before any work starts or goods ship. It lists the products or services, the quantities, the unit prices, and a fixed total the client can accept. Once the client accepts it, the quoted price is the agreed price.

### What should a quote template include?

Your business name and logo, the client's details, a unique quote number, the issue date, a valid-until date, a line for each product or service with quantity and unit price, the subtotal, tax, and total, plus notes covering payment terms, deposits, and what the price includes.

### What is the difference between a quote and an estimate?

A quote is a fixed price offer. Once the client accepts it, you are expected to honor it. An estimate is an educated guess at the cost, and the final amount can change as the work becomes clearer. Use a quote when the scope is fixed and an estimate when it is not.

### What is the difference between a quote and an invoice?

A quote is sent before the sale to propose a price. An invoice is sent after the work is done or the goods are delivered to request payment. A common flow is quote first, client accepts, then invoice at the end. You can switch this tool to the invoice type to bill the same line items.

### How long should a quote be valid for?

Most businesses keep a quote valid for 14 to 30 days. Costs, supplier prices, and availability change, so an open-ended quote is risky. This tool has a Valid Until date field, so pick a date that protects you and creates gentle urgency for the client to decide.

### Is a quote legally binding?

A quote itself is an offer, not a contract. It generally becomes binding once the client accepts it, because acceptance forms an agreement on the scope and price. That is why the valid-until date and clear notes about what is included matter so much.

### Is this quote generator free?

Yes, it is 100% free with no signup and no watermark. Create as many quotes as you need, preview them live, and download each one as a PDF. Your business details are saved in your browser so the next quote is even faster.


---

<!--
Writing rules for this file:
- First "## " heading is the article start (page.tsx slices from there).
- Escape currency $ as \$ (remark-math).
- No em dashes. Use a regular hyphen.
- No filler words: honestly, genuinely, blocker.
- Keep sentences short. The "## Frequently asked questions" ### blocks must
  match the FAQ_ITEMS array in page.tsx word for word.
-->

---
title: Free Online Raffle Ticket Generator and Maker
description: Make raffle tickets online for fundraisers, churches, schools, sports 50/50, and holiday draws. Each ticket has a fill-in Name and Phone counterfoil with a matching number. Draw a winner, then download a true-size PNG, PDF, or SVG, or a numbered sheet.
---

## Make raffle tickets online in minutes

[![Watch how the free Raffle Ticket Generator works](https://img.youtube.com/vi/kV2yg7a3stw/maxresdefault.jpg)](https://youtu.be/kV2yg7a3stw)

A raffle ticket does two jobs at once. It is the ticket the buyer keeps, and it is the counterfoil the organiser keeps to draw the winner and reach them. This free online raffle ticket generator builds both halves in one design: a main body with the prize and the drawing details, and a tear-off counterfoil with blank lines for the buyer's name and phone, joined by a dashed perforation line. You create the ticket in your browser, number a whole run, and download a print-ready file. There is no signup and no watermark.

Most "raffle ticket template" results are static files you open in Word or a design app and edit by hand. This raffle ticket maker works differently. The live preview updates as you type, the perforation and cut guides are drawn for you, and the export is sized so a printed ticket comes out at its true finished size. When the draw comes, you can pick the winning number on the same page, fairly and at random.

## How to make raffle tickets online

You can design raffle tickets online and have a printable sheet ready in a few minutes. The steps below follow the controls from top to bottom.

1. **Type your raffle details.** On the **Single ticket** tab, fill in the prize, the organising group, the drawing date and time, where the draw happens, and the price per ticket with an optional multi-buy deal like "5 for \$20". Click **Fill example** to see a finished ticket first, or **Reset** to start blank. Upload your logo here if you have one.

![The Single ticket tab with the Fundraiser example loaded: Riverside Animal Shelter, a \$500 gift card prize, a drawing date of May 23, a \$5.00 price, and the 5 for \$20 multi-buy line](/images/tools/raffle-ticket-generator/step-details.webp)

2. **Choose a template and colors.** Pick one of the eight styles in the **Template** gallery, such as Fundraiser, Church / School, Sports 50/50, or Gala. Each one shows only the fields that style needs. Then pick a color theme and a font, or set your own accent and text color.

![The Template gallery with eight raffle ticket styles, the Fundraiser style selected, and the Color theme swatches below it](/images/tools/raffle-ticket-generator/step-templates.webp)

3. **Set up the Name and Phone counterfoil.** Leave **Fill-in counterfoil** switched on to give each ticket a tear-off stub with blank Name and Phone lines and the same ticket number as the body. Turn the Email line on or off, and choose which end of the ticket the stub sits on.

![The Fill-in counterfoil switch turned on, the Email line switch, and the counterfoil side buttons, next to a ticket preview with Name, Phone, and Email lines on the stub](/images/tools/raffle-ticket-generator/step-counterfoil.webp)

4. **Pick the ticket size.** Under **Finished size & orientation**, choose a print-shop size such as the classic 2 x 5.5 inch raffle ticket, or type a custom width and height in inches. Switch between portrait and landscape to change where the counterfoil sits.

![The Finished size and orientation picker with the 2 x 5.5 inch preset selected and the Portrait and Landscape buttons](/images/tools/raffle-ticket-generator/step-size.webp)

5. **Number the run and download a sheet.** Switch to the **Numbered sheet** tab. Type a start number like `A-0001` and how many tickets you need, pick US Letter or A4 paper, and the preview tiles every ticket with its own number on the body and the stub. Click **Download sheet PDF**, print at 100 percent scale, and cut along the dashed guides. For one ticket on its own, use the PNG, PDF, or SVG buttons on the Single ticket tab instead.

![The Numbered sheet tab with A-0001 as the start number and a count of 24, and the sheet preview showing numbered tickets on a US Letter page with the Download sheet PDF button](/images/tools/raffle-ticket-generator/step-numbered-sheet.webp)

6. **Draw the winner.** On the same Numbered sheet tab, click **Draw a winner**. The panel picks a random number from your run and lists the draw order, so you can draw again for second and third prize without repeating a number.

![The Draw a winner panel showing a winning ticket number, the Draw again and Reset draws buttons, and a draw order list of three numbers](/images/tools/raffle-ticket-generator/step-draw-winner.webp)

## What goes on a raffle ticket

A good raffle ticket sells the prize at a glance and tells the buyer when and where the draw happens. The tool gives you a field for each part, and every template shows only the fields that style needs, so no field on the form goes unused.

- **Prize.** What you can win. This is the biggest, most important line on the ticket. Make it specific, like "Win a \$500 Visa Gift Card" or "Grand Prize: A Weekend for Two".
- **Organising group or cause.** The club, church, school, or charity running the raffle, and who the money helps.
- **Raffle title.** A short name for the draw, like "Spring Fundraiser Raffle" or "50/50 Cash Raffle".
- **Drawing date and time.** When the winner is picked. Buyers want to know this before they pay.
- **Where drawn or contact.** Where the draw happens, or how to buy more tickets.
- **Price and multi-buy.** The per-ticket price and a bulk deal, like "\$5 each" and "5 for \$20". Both show on one price line.
- **Need not be present to win.** The classic reassurance that buyers can win even if they leave early. Edit or clear it to match your rules.
- **License or permit number.** An optional line for a raffle license or gaming permit, where your area requires one.
- **Fine print or rules.** One short line of rules, like "Winner drawn at random. Prize as shown."
- **Serial number.** The unique ticket number, printed on both the body and the counterfoil.

You do not have to fill every field. Any field you leave empty is hidden from the ticket, so a stripped-down minimal ticket and a full charity ticket both come out clean.

## Printable raffle tickets with name and phone number

The counterfoil, also called the stub, is what makes a raffle ticket different from a flyer or an event ticket. On an event ticket the stub just repeats the serial. On a raffle ticket it is a fill-in slip. It carries the same serial number as the body, plus blank ruled lines for the buyer to write their **Name** and **Phone**. An **Email** line is on by default, and you can switch it off if you only want name and phone.

In practice, the buyer fills in their details on the counterfoil, tears it off along the perforation, and drops it in the box. They keep the body of the ticket as their proof. At the draw, you pull a counterfoil or pick a number, read the serial, and the matching stub tells you who won and how to reach them. Because the body and the counterfoil read one shared serial number, they can never disagree. Number A-0042 on a ticket always matches counterfoil A-0042.

You control the counterfoil. Turn it on or off with a switch. Add or remove the email line. Move it to either end of the ticket. On a landscape ticket the counterfoil sits on the left or the right; on a portrait ticket it sits on the top or the bottom, and the control relabels itself to match what you see. The perforation line and its notches are drawn as part of the image, so they survive the export and print on the real ticket.

## Numbered raffle tickets for a whole run

A single ticket is fine for a mockup, but a real raffle needs a numbered run. Switch to the Numbered sheet tab, set a start value and a count, and the tool builds the full sequence.

The start value keeps any prefix you type. Type a plain number like `100` and you get 100, 101, 102, and so on. Type `A-0001` and the tool keeps the `A-` prefix and the four-digit zero padding, so you get A-0001, A-0002, A-0003, up through the count you set. This is how raffle books are numbered, and it means you can sell tickets in order and match a returned counterfoil to its record. You can number a run of up to five hundred in one export. For a bigger raffle, make a second run that starts where the first one ended.

Every ticket on the sheet is the same design with its own number, printed on both the body and the counterfoil.

## Raffle draw online: a random ticket number picker

When the draw comes, you have two fair ways to pick a winner. The classic way is to pull the paper counterfoils from a box. The tool also has a built-in Draw a winner panel on the Numbered sheet tab, so it doubles as a random ticket generator for the draw.

The panel draws from the same start number and count you used for the sheet. Click Draw a winner and the tool picks a uniformly random number from that range using your browser's secure crypto random generator, which is the random source browsers provide for security work, not a simple shuffle. Each drawn number is removed from the pool, so if you draw again for a second or third prize, it never repeats a winner. The full draw order is listed so you can read out first, second, and third place, and Reset draws clears the list for a new raffle. Everything runs in your browser; no numbers are sent anywhere.

If you sold the tickets in number order and stopped partway, set the count to the number you sold before you draw, so an unsold number cannot win.

## Real print-shop sizes

Ticket stock is a real physical size, so the presets here match what print shops cut. The finished sizes are drawn from vendor product pages at UPrinting and GotPrint.

| Preset | Size (inches) | Best for |
| --- | --- | --- |
| Classic raffle ticket | 2 x 5.5 | Portrait raffle books |
| Wide raffle ticket | 5.5 x 2 | Landscape tickets with a side counterfoil |
| Large raffle ticket | 8.5 x 3.5 | A big, high-value prize look |
| Compact raffle ticket | 2.75 x 5.5 | A slightly wider portrait ticket |
| Custom | Your inches | Any size that fits the sheet |

The single-ticket PDF is sized to the exact finished inches, where 1 inch equals 72 points. A 2 by 5.5 inch ticket exports a 2 by 5.5 inch PDF page. Print at 100 percent scale with no fit-to-page and the ticket comes out at its true size, ready to trim.

## The numbered sheet fits the page

When you print a run, you want a full sheet of tickets you can cut apart, not one ticket per page. The Numbered sheet tab tiles your tickets edge-to-edge on a US Letter or A4 page and centers the grid, so the layout always fits the paper and never spills off the edge. If you pick a custom size too big to fit even once, the tool warns you instead of clipping.

Dashed cut guides are drawn on the sheet as part of the image, so they survive the export. Run a paper cutter or scissors along the guides to separate the tickets, and each ticket already shows its own perforation line for the counterfoil. A multi-page run exports as a ZIP of PNGs or a single multi-page PDF.

## Eight raffle ticket templates

One page covers a whole family of raffle tickets because the gallery has eight styles, and each one fills the fields that style needs.

- **Fundraiser.** A cause-forward layout with a big prize line and a beneficiary lockup, for a charity draw.
- **Church / School.** A community tone with a contact-to-buy line and a "need not be present to win" note.
- **Sports 50/50.** A bold, jersey-accent card built for a 50/50 cash raffle with a clear price line.
- **Holiday.** A festive palette with a decorative border, for a holiday hamper or gift raffle.
- **50/50 Cash.** A layout that leads with the split-pot mechanic and a large per-ticket price.
- **Gala / Black-tie.** An elegant serif with gold rules, for a black-tie grand-prize raffle.
- **Kids / Classroom.** A playful, rounded card with a lighter font, for a classroom toy raffle.
- **Minimal.** A neutral, logo-led layout that shows every field, as a clean starting point.

Each template comes with a signature color theme and font, and every one renders both a body and a matching fill-in counterfoil. Click Fill example to load realistic sample data for the selected style, or Reset to clear back to a blank ticket.

## Add your logo, colors, and a QR code

Upload your organisation's logo and it shows in the live preview and in every export, above the details, with a remove button that restores the default lockup. The logo stays in your browser; it is never uploaded to a server.

Every template has a look you can change. Switch between the built-in color themes, set a custom accent and text color, and pick from a large font list. Your choices apply to the live preview and to every export, single or bulk.

The Fundraiser, Sports 50/50, and Minimal templates include a QR field. When you enter a rules or buy-tickets URL, the tool renders a real QR code that decodes to exactly that link and bakes it into the PNG, PDF, and SVG export. This is a working code, not a decorative pattern, so a buyer can scan the printed ticket to open your rules page or an online buy link.

## Raffle rules template

Buyers ask the same questions before they pay: when is the draw, how will I know if I won, and what happens if the winner cannot be reached. Written rules answer those questions once. A ticket only has room for one line, so put one short rule in the **Fine print / rules** field and keep the full rules on a printed sheet at the sales table or on a web page that the QR code links to.

Copy the template below and replace each part in square brackets. Delete any line that does not apply to your raffle.

> **[Raffle title] - official rules**
>
> 1. This raffle is run by [organising group] to raise money for [cause].
> 2. Tickets cost [price] each or [multi-buy deal]. Ticket sales close at [time] on [date].
> 3. Each ticket has a number printed on the ticket and on its counterfoil. Write your name and phone number on the counterfoil before you hand it in.
> 4. The winning number will be drawn at random at [place] on [date] at [time]. [Second and third prizes are drawn after the grand prize.]
> 5. You do not need to be present to win. We will call the winner on the phone number on the counterfoil within [number] days.
> 6. If the prize is not claimed by [date], we will draw a new winner.
> 7. The prize is [prize description]. [It cannot be exchanged for cash.]
> 8. Ticket buyers must be [age] or older.
> 9. [License or permit number: (number), if your area requires one.]
> 10. Questions: contact [name] at [phone or email].

A raffle is a form of lottery, and lotteries are regulated. The rules are not the same everywhere. Some states, provinces, and countries require a license or permit to run a paid raffle, especially for nonprofits, and some set limits on prize values, ticket prices, or who can sell. There can be reporting or record-keeping duties too.

This tool gives you an optional license or permit number field so you can print the number when you have one. It is a design tool, and this template is not legal advice. Before you sell tickets, check the rules for your state or country, and talk to your organisation's board or a local authority if you are not sure. Keeping your counterfoils on file is good practice either way, since they are your record of who bought which number.

## Tips for a clean raffle

- Print a single test ticket first and measure it with a ruler to confirm your printer is at 100 percent scale.
- Use a slightly heavier cardstock, around 200 to 250 gsm, so the counterfoil tears cleanly along the perforation.
- Keep the fine print short. Long paragraphs shrink the rest of the ticket to fit.
- Number your run in the Numbered sheet tab rather than editing the number by hand, so the body and counterfoil always match.
- Collect the counterfoils in a sealed box, and use the Draw a winner panel or a physical draw so the pick is fair and public.
- Running a raffle at an event? The [event ticket generator](/tools/event-ticket-generator) makes the entry tickets, and the [gift certificate generator](/tools/gift-certificate-generator) makes a voucher for a donated prize.

## Frequently asked questions

### Is this raffle ticket generator free?

Yes, it is 100% free with no signup and no watermark. Design and download as many raffle tickets as you want as PNG, PDF, or SVG files, one at a time or as a numbered printable sheet.

### How do I make raffle tickets online?

Type your prize, drawing date, and price on the Single ticket tab, pick a template and a size, and leave the fill-in counterfoil switched on. Then open the Numbered sheet tab, set a start number and how many tickets you need, and download the sheet as a PDF. Print it at 100% scale and cut along the dashed guides.

### How does the ticket numbering work?

You set a start value and a count, and the tool builds the sequence. A plain number like 100 gives 100, 101, 102, and so on. A value like A-0001 keeps the A- prefix and the zero padding, so you get A-0001, A-0002, A-0003. The same number prints on the ticket body and on its tear-off counterfoil, so a returned stub always matches its ticket. You can number a run of up to 500 in one export.

### Can I print raffle tickets with a name and phone number line?

Yes. Each ticket has a fill-in counterfoil, the tear-off stub separated by a dashed perforation line. It has blank ruled lines for the buyer's Name and Phone, plus an Email line you can switch off, and the same serial number as the ticket body. The organiser keeps the counterfoils, and when a number is drawn they find the matching stub to see who won and how to reach them.

### Can I do the raffle draw online with this tool?

Yes. On the Numbered sheet tab there is a Draw a winner panel that picks a uniformly random number from your start-to-count range using your browser's secure crypto random generator. Each drawn number is removed from the pool, so drawing again never repeats a winner. It runs in your browser and sends no numbers anywhere. You can also draw the classic way by pulling the paper counterfoils from a box.

### Is there a raffle rules template?

Yes. The Raffle rules template section on this page has ten numbered rules with blanks for your price, draw date, prize, and contact details. Put one short line on the ticket in the Fine print / rules field and keep the full rules at the sales table or on a web page that the ticket's QR code links to.

### What paper should I print raffle tickets on?

Use a heavier cardstock, around 200 to 250 gsm (about 75 to 90 lb cover), so the ticket feels sturdy and the stub tears cleanly along the perforation. Print at 100% scale with no fit-to-page. A print shop can also add a real perforation line along the counterfoil seam if you want a clean tear.

### Do I need a license or permit to run a raffle?

It depends on where you are. Raffles are a form of lottery or gaming, and the rules vary a lot by state, province, and country. Some places require a license or permit for a paid raffle, especially for nonprofits, and some limit prize values or ticket sales. This tool includes an optional license or permit number field, but it is not legal advice. Check your local rules before you sell tickets.

### Which raffle ticket styles can I make?

The gallery has eight templates: Fundraiser, Church / School, Sports 50/50, Holiday, 50/50 Cash, Gala / Black-tie, Kids / Classroom, and a Minimal layout. Each fills the fields that style needs, from a beneficiary lockup for a charity draw to a split-pot line for a 50/50, and every one renders both a body and a matching fill-in counterfoil.

### Can I add my own logo, colors, and a QR code?

Yes. Upload a logo and it shows in the live preview and in every export, with a remove button to restore the default. You can switch color themes, set a custom accent and text color, and choose from a large font list. On the Fundraiser, Sports 50/50, and Minimal templates you can enter a rules or buy-tickets URL, and the tool bakes in a real scannable QR code that decodes to exactly that link.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Rate Sheet Template Maker
description: Rate sheet template you fill in online. List your services with a rate and a unit like /hr or /project, see the format and samples, and download a PNG, PDF, or CSV. Free, no signup, no watermark.
---

# Rate Sheet Template Maker

Fill in a free **rate sheet template** for your service business in minutes. List each service, add a rate, and set the unit next to it, then pick one of 20 templates and download a print-ready PNG, PDF, or CSV. The tool runs entirely in your browser, and there is no signup and no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## What is a rate sheet?

[![Watch how the free Rate Sheet Maker works](https://img.youtube.com/vi/sPiumdEIezM/maxresdefault.jpg)](https://youtu.be/sPiumdEIezM)

A **rate sheet** is a single, one-page document that lists the services a business offers next to the price of each one. Freelancers, agencies, consultants, contractors, and media sellers share it with prospects, attach it to proposals, and hand it out as a leave-behind after a first call. It answers the one question every new client asks first: what do you charge?

The detail that sets a rate sheet apart from a plain product price list is the **unit**. Services are rarely priced as a flat each-price. A developer bills by the hour, a copywriter by the word, a designer by the project, a media buyer by the thousand impressions, and a retainer by the month. A good rate sheet shows the amount and the unit together, so a client reads \$120/hr, \$1,500/project, or \$0.35/word and understands the basis instantly. This tool threads a unit into every row, so your rates read the way you actually sell.

## How to make a rate sheet

Making a rate sheet with this tool takes four short steps.

1. **List your services.** Type each service name, an optional detail line, a rate, and a unit. The unit is optional and free-form, so you can pick a preset like /hr or /project or type your own, such as /retainer or per seat.

![The rate sheet editor with the Design section open: Brand Identity, Logo Design, and Landing Page Design rows, each with Service name, Detail, Rate, and Unit fields](/images/tools/rate-sheet-generator/step-services.webp)

2. **Group into sections.** Add a section heading such as "Design", "Development", or "Add-ons & Terms" to organise a longer sheet. Every template renders the heading in its own style.

![The Development section with its section name field above the Front-end Build, Care & Bug-fix Retainer, and Shopify Theme Setup rows and its Add row button](/images/tools/rate-sheet-generator/step-sections.webp)

3. **Pick a template and style.** Choose from 20 templates, spanning clean business tables, elegant serif looks, bold branded headers, warm artisan styles, dark premium themes, and vibrant tinted designs. Then set an accent color, a font, one or two columns, and your currency.

![The template gallery with Modern Business selected, and the style controls below it: accent color swatches, the Font menu, the currency picker, and the Layout toggle for 1 column or 2 columns](/images/tools/rate-sheet-generator/step-template.webp)

4. **Download.** Export a crisp PNG for the web, a print-ready PDF for A4 or US Letter, or a CSV that opens in Excel and Google Sheets.

![The live rate sheet preview with the Download PNG, PDF, and CSV buttons underneath and the note that the PDF is a print-ready portrait page with no watermark](/images/tools/rate-sheet-generator/step-download.webp)

The live preview updates as you type, so the finished page is always in front of you before you export it.

## Rate sheet format: what goes on it, in order

Most rate sheets follow the same order from top to bottom, and every template in this tool lays your content out in this order.

1. **Header with your logo and business name.** Upload a logo and it renders at the top and embeds in the export. The logo never leaves your browser.
2. **Title.** "Rate Sheet" is the default. "Service Rates", "2026 Rates", or "Rate Card" work too.
3. **Effective date.** A subtitle like "Effective January 2026" tells clients the rates are current and gives you room to revise later.
4. **Sections.** Buyers scan by category, so group services into Design, Development, Content, or whatever fits your offer.
5. **Service lines.** Each line has the service name, a short detail line, and the rate with its unit. Use the detail line for what is included, the turnaround, or the number of revision rounds. It sits under the service name in a muted style.
6. **Terms and add-ons.** A last section for rush fees, included revisions, and work you quote separately.
7. **Contact footer.** Add a phone, a website, and a social handle so a prospect can reach you straight from the page.

## Rate sheet sample and examples

The three samples below show a filled-in rate sheet for common service businesses. The first is the tool's built-in example: click **Fill example** above the editor to load it. The other two use the same fields, so you can type them in or import them as a CSV. All rates are placeholders that show the format, not market prices. Replace them with your own.

### Freelance and agency rate sheet sample

The built-in example is "Northwind Studio", titled "Rate Sheet" with the subtitle "Effective January 2026", in the Modern Business template with one column.

![The Northwind Studio rate sheet in the Modern Business template, showing Design, Development, Content, and Add-ons & Terms sections, rates with units such as per project, per hour, and per word, and the contact footer at the bottom](/images/tools/rate-sheet-generator/sample-freelance.webp)

| Section | Service | Detail | Rate |
| --- | --- | --- | --- |
| Design | Brand Identity | Logo, color, type, and a mini guide | \$2,500/project |
| Design | Logo Design | Three concepts, two revision rounds | \$1,200/project |
| Design | Landing Page Design | Figma mockup, desktop and mobile | \$650/page |
| Development | Front-end Build | React or Next.js, from your design | \$120/hr |
| Development | Care & Bug-fix Retainer | Up to 6 hours of fixes each month | \$600/mo |
| Development | Shopify Theme Setup | Install, configure, and launch | \$1,500 flat |
| Content | Blog Article | Researched long-form, SEO-ready | \$0.35/word |
| Content | Social Post | Copy plus one graphic | \$85/post |
| Content | Product Descriptions | Ecommerce catalog copy | \$18/each |
| Content | Email Newsletter Sends | List of subscribers | \$9/1,000 |
| Add-ons & Terms | Rush Delivery | Under 48 hours, added to the base rate | +25% |
| Add-ons & Terms | Enterprise Scope | Multi-team or ongoing programs | Custom |
| Add-ons & Terms | Revisions Included | Two rounds per deliverable | Free |

The footer carries a phone number, the website, and a social handle. One page mixes /project, /hr, /word, and /mo.

For an agency, keep the layout to one column for a formal, proposal-ready look, and use a clean business or corporate template. For a solo creative, a two-column layout or a warmer template can feel more personal.

### Media and influencer rate card sample

A creator or a newsletter publisher would title this one "Rate Card" and price most lines per post or per 1,000 subscribers.

| Section | Service | Detail | Rate |
| --- | --- | --- | --- |
| Sponsored Content | Feed Post | One image or carousel, one revision | \$450/post |
| Sponsored Content | Short Video | Up to 60 seconds, raw files included | \$900/post |
| Sponsored Content | Story Set | Three frames with a link | \$300/post |
| Newsletter | Sponsored Slot | Top placement in one issue | \$25/1,000 |
| Newsletter | Dedicated Send | A full email about your product | \$1,200 flat |
| Add-ons | Ad Usage Rights | Use in paid ads for 30 days | +30% |
| Add-ons | Monthly Partnership | Four posts each month | \$1,500/mo |

### Contractor and home services rate sheet sample

A trade business usually prices labor by the hour or day, a service call as a flat fee, and larger jobs by quote.

| Section | Service | Detail | Rate |
| --- | --- | --- | --- |
| Service Calls | Service Call | Diagnosis and first 30 minutes on site | \$95 flat |
| Labor | Standard Labor | Weekdays 8 am to 5 pm | \$85/hr |
| Labor | After-Hours Labor | Evenings and weekends | \$125/hr |
| Labor | Full-Day Crew | Two workers for eight hours | \$1,100/day |
| Materials | Parts and Materials | Billed at cost plus handling | Cost +15% |
| Estimates | Large Projects | Written quote after a site visit | Custom |

To load this sample without typing, copy the lines below into a plain text file, save it as `contractor-rates.csv`, and import it in the tool. The Section, Service, Detail, Rate, and Unit columns map on their own.

```csv
Section,Service,Detail,Rate,Unit
Service Calls,Service Call,Diagnosis and first 30 minutes on site,95,flat
Labor,Standard Labor,Weekdays 8 am to 5 pm,85,/hr
Labor,After-Hours Labor,Evenings and weekends,125,/hr
Labor,Full-Day Crew,Two workers for eight hours,1100,/day
Materials,Parts and Materials,Billed at cost plus handling,Cost +15%,
Estimates,Large Projects,Written quote after a site visit,Custom,
```

## Pricing your services by unit

The unit you choose signals how you like to work and shapes how a client reads the number.

- **Hourly (/hr).** Best for open-ended or support work where scope is hard to fix up front. Pair it with a monthly retainer for ongoing clients.
- **Per project (/project) or flat.** Best for defined deliverables like a logo, a landing page, or a theme setup. Clients prefer a fixed number because it caps their risk.
- **Per unit of output (/word, /page, /post, /each).** Best for content and production work that scales with volume. It keeps a large order easy to quote.
- **Per thousand (/1,000).** Common in media, email, and advertising, where pricing is quoted against impressions, sends, or reach.
- **Per month (/mo).** Best for retainers and care plans. State what the retainer includes, such as a number of hours or a scope of support.

You do not have to price every line the same way. The strength of a rate sheet is that it can mix units on one page, so a design line reads \$2,500/project while a development line reads \$120/hr and a content line reads \$0.35/word. For rates that depend on scope, enter a non-numeric value like "Custom" or a modifier like "+25%" and it renders exactly as typed, with no stray currency symbol.

## Rate sheet vs price list vs rate card vs invoice

These documents overlap, so it helps to be precise.

- A **rate sheet** lists your services and their rates, usually by unit, so a client can see what you charge before they hire you. It is the standard tool for freelancers, agencies, and consultants.
- A **price list** is the same kind of published document but is more common for physical products at a fixed each-price. If you sell products rather than services, build one with our [price list generator](/tools/price-list-generator), which shares this engine and all 20 templates.
- A **rate card** is another name for a rate sheet, used most often in advertising, media, and influencer work to publish standard prices for placements or posts. The layout is identical.
- An **invoice** is a billing document for one specific job, with the client, the quantities delivered, taxes, and a total due. A rate sheet quotes; an invoice collects.

Put simply, use a rate sheet to quote your services, a price list to publish product prices, a rate card to publish media rates, and an invoice to charge for work delivered. When a client asks for a price on one specific job, send a [quote](/tools/quote-generator) built from your rates, then bill with an [invoice](/tools/invoice-generator) when the work is done.

## Fast data entry: paste and CSV import

You do not have to type every line by hand.

- **Paste a list.** Paste one service per line. Separate the fields with a comma, a pipe, or a tab, and the last value on each line is read as the rate. End a line with a colon, such as "Design:", to start a new section.
- **CSV import.** Upload a spreadsheet with Section, Service, Detail, Rate, and Unit columns. The Unit column is optional and maps only when it is present, so an old file without units still imports cleanly. It even accepts the export from our [SKU generator](/tools/sku-generator), so you can turn a catalog into a starting point in seconds.

Importing replaces the current list, so you can rebuild a whole rate sheet from a spreadsheet in one step, then fine-tune the design. Keep the exported CSV as your master copy, and re-import it when your rates change instead of rebuilding the page.

## Terms and validity best practice

A rate sheet is a business template, not a contract, so a few notes keep it clear and useful. Add an effective date so clients know the rates are current. State what a rate includes, such as the number of revision rounds or the turnaround time, in the detail line or a Terms section. If your rates depend on scope, say so with a "Custom" or "quoted separately" line rather than inventing a number. When you raise rates, update the sheet, change the effective date, and re-export. Because everything runs in your browser and nothing is stored, you keep full control of your pricing and your data.

## Tips for a rate sheet that wins work

- **Lead with value, not just numbers.** A short detail line that names the outcome makes a rate feel fair.
- **Keep units consistent within a section.** Mixing /hr and /project in the same block can confuse a scanner; group by how you price.
- **Round to clean numbers.** \$120/hr reads more confidently than \$118.50/hr.
- **Use one accent color.** A single brand color across headings and rates looks intentional and on-brand.

## Frequently asked questions

### What is a rate sheet?

A rate sheet is a single, one-page document that lists the services a business offers next to the price of each one. Freelancers, agencies, consultants, and contractors share it with prospects, attach it to proposals, and print it as a leave-behind. Because services are often priced by a unit, a rate sheet shows the unit too, such as \$120 per hour or \$1,500 per project.

### What is the format of a rate sheet?

A rate sheet runs from top to bottom: your logo and business name, a title such as "Rate Sheet", and an effective date. Then come sections of services, where each line shows the service name, a short detail line, and the rate with its unit, such as \$120/hr or \$1,500/project. A terms section and a contact footer with your phone, website, and social handle close the page.

### Is there a rate sheet sample I can start from?

Yes. Click Fill example in the tool to load a filled-in freelance and agency rate sheet with 13 services across Design, Development, Content, and Add-ons & Terms, priced with units like /project, /hr, /word, and /mo. Edit the names and rates to make it yours. This page also shows a media rate card sample and a contractor rate sheet sample you can copy or import as a CSV.

### What is the difference between a rate sheet, a price list, and an invoice?

A rate sheet lists your services and their rates, usually by unit, so a client can see what you charge before they hire you. A price list is the same kind of published document but is more common for physical products at a fixed each-price. An invoice is a billing document for one specific job, with the client, the quantities delivered, taxes, and a total due. Use a rate sheet to quote your services, a price list to publish product prices, and an invoice to collect payment.

### How do I make a rate sheet?

List each service, add a rate, and set the unit next to it, such as /hr, /project, /word, or flat. Group services into sections like Design, Development, and Content if you want headings. Then pick a template, choose an accent color and font, and download. The live preview updates as you type, so you see the finished page before you export it.

### Is this rate sheet generator free, with no watermark?

Yes. It is 100% free with no signup and no watermark on the export. You can download as many rate sheets as you like as PNG, print-ready PDF, or CSV. Your service and rate data never leaves your browser.

### What is a rate card and is it the same thing?

A rate card is another name for a rate sheet, used most often in advertising, media, and influencer work to publish standard prices for placements or posts. The layout is the same: services or placements on one side and the rate on the other. Build a rate card here by naming your placements and setting a unit such as /post, /1,000, or flat.

### Can I export the rate sheet to CSV or Excel?

Yes. The CSV button under the preview downloads a spreadsheet with Section, Service, Detail, Rate, and Unit columns that opens in Excel, Google Sheets, or Numbers. You can also import a CSV, or paste a list, to fill the rate sheet in seconds, and the Unit column maps automatically when it is present.

### Will the rate sheet print correctly?

Yes. The PDF is a print-ready portrait page in A4 or US Letter. A short rate sheet fits one page, and a long one paginates automatically so no service row is cut in half. Print at 100% scale for a crisp, professional result.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     4. Voice rules from the shopify-community answer-thread skill: first person, measured proof from
        real exports, a screenshot under each step, no teaser lines. Check with
        python3 scripts/check-blog-voice.py --tools --only receipt-generator
     5. Never target or mention brand-name receipt queries (receipts that copy a real store). -->

# Free Receipt Maker: POS, Thermal & PDF Receipts

Make a receipt for a sale your shop has made. Add your logo, the items, tax, and the payment method, pick a thermal till roll or an A4 page, and download a PDF or PNG with no watermark and no signup.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to make a receipt

[![Watch How It Works](https://img.youtube.com/vi/NXLugEEy7fk/maxresdefault.jpg)](https://youtu.be/NXLugEEy7fk)

I tested this receipt maker with a three-item coffee shop order on the In-Store POS template. I set the paper to 80 mm, downloaded the PDF, and checked the file. The page came out exactly 80 mm wide, the length followed the number of items, and the barcode at the bottom decoded to the order number, #1001.

1. **Pick a template, a font, and a paper width.** There are four templates: Online Order, In-Store POS, Classic Sales, and Branded Logo. In-Store POS, Classic Sales, and Branded Logo start on 80 mm thermal paper, and Online Order starts on an A4 page. On the three thermal templates, the paper width setting changes it to 58 mm, 80 mm, or A4. Online Order always stays on A4. The switches turn the barcode, a signature line, and the transaction codes on or off.

![The receipt template picker with In-Store POS selected, the Courier font, the 80mm paper width, and switches for the barcode, signature line, and transaction codes](/images/tools/receipt-generator/rc-step-template-controls.webp)

2. **Add your store details.** Type the store name, address, phone, and website, and upload a logo if you have one. The maker saves these in your browser, so they are filled in the next time you open it.

![The Store tab with the store name Aroma Cafe, the logo upload, and the address and phone fields](/images/tools/receipt-generator/rc-step-store-tab.webp)

3. **Fill in the receipt details.** On the **Details** tab, set the receipt number, date, and time, an optional customer, the currency and tax, shipping and a tip, the payment method, and a footer message such as your return policy.

![The Details tab with the receipt number, date, customer fields, currency and tax settings, payment method, and footer message](/images/tools/receipt-generator/rc-step-details-tab.webp)

4. **Add the items.** On the **Items** tab, type each product with a quantity and a unit price. Add a discount if you give one, and the subtotal, tax, and total add up as you type.

![The Items tab with three coffee shop products, quantities and prices, a discount field, and the running totals](/images/tools/receipt-generator/rc-step-items-tab.webp)

5. **Download the receipt.** Choose **PDF** or **PNG** and click **Download**. You can also print it straight from the browser.

![The live preview of a thermal In-Store POS receipt for Aroma Cafe on 80mm paper, with the PDF and PNG format switch and the Download PDF button](/images/tools/receipt-generator/rc-preview-pos.webp)

## POS and thermal receipts (58 mm and 80 mm)

Till printers use rolls of thermal paper, and the two common widths are 58 mm (about 2.3 inches) and 80 mm (about 3.1 inches). The In-Store POS, Classic Sales, and Branded Logo templates match that look: a narrow column, a till-style font, and a barcode of the order number at the bottom. Classic Sales prints in all capitals like an old dot-matrix till.

The PDF is cut to the real paper width, so an 80 mm receipt is an 80 mm wide page. The length depends on how many items you add, the same way a printed till roll gets longer with a bigger order. To print it on a thermal printer, open the PDF and print at 100% scale so the width stays at 58 or 80 mm.

## Online order receipts on A4

The Online Order template is A4 wide (210 mm) and as long as the order needs, with a logo header and a product table. This layout suits a receipt you email to a customer or attach to an order, where a narrow till roll would look out of place.

![The Online Order receipt template on an A4 page, with a logo header, a product table, and totals](/images/tools/receipt-generator/rc-preview-order.webp)

You can switch templates at any time. The details you typed stay in place, and the preview redraws in the new style.

## Add your logo

Upload a PNG, JPG, SVG, or WebP file up to 2 MB, or paste a link to an image. The logo appears at the top of the receipt in the preview and in the downloaded PDF or PNG. The Branded Logo template puts the logo first and adds an accent color to match your brand.

## Download a PDF with no watermark

Every download is free and has no watermark, logo stamp, or page limit. You do not need an account. The receipt is built in your browser, so the details you type are not sent to a server. Your store profile is saved in your own browser only.

## What goes on a receipt

A receipt is proof that a customer paid. It needs these parts:

- **Your business name and contact details**, so the customer knows who to ask about the sale.
- **The receipt number, date, and time**, so you can find the sale in your records.
- **Each item with a quantity and price**, then the subtotal.
- **Discounts, tax, shipping, and tips**, each on its own line.
- **The total paid and the payment method**, such as card, cash, or Shopify Payments.
- **A footer message**, which is a good place for your return policy.

A receipt is not an invoice. An invoice asks for payment before the customer pays, and a receipt confirms the payment afterwards. To bill a customer first, use the [free invoice generator](/tools/invoice-generator).

## Receipts for other businesses

The same receipt maker has versions set up for particular trades, with the right fields and wording already in place:

- [Cash receipt generator](/tools/cash-receipt-generator) for cash sales
- [Donation receipt generator](/tools/donation-receipt-generator) for charities and gifts
- [Hotel receipt generator](/tools/hotel-receipt-generator) for room stays
- [Taxi receipt generator](/tools/taxi-receipt-generator) for rides
- [Parking receipt generator](/tools/parking-receipt-generator) for parking fees
- [Gas receipt generator](/tools/gas-receipt-generator) for fuel
- [Grocery receipt generator](/tools/grocery-receipt-generator) for food shops
- [Pharmacy receipt generator](/tools/pharmacy-receipt-generator) for prescriptions and health products
- [Rent receipt generator](/tools/rent-receipt-generator) for landlords
- [Itemized receipt generator](/tools/itemized-receipt-generator) for detailed line-by-line receipts

## Frequently Asked Questions

### Is this receipt maker free?

Yes. It is free with no signup, no watermark, and no limit on how many receipts you make.

### Can I download my receipt as a PDF?

Yes. Download the receipt as a PDF or a PNG, or print it from your browser. Thermal receipts download at their real paper width of 58 mm or 80 mm.

### Can I add my store logo?

Yes. Upload a PNG, JPG, SVG, or WebP logo, or paste a link to an image. The logo appears in the preview and in the downloaded receipt.

### Does the receipt include a barcode?

Yes. The receipt can show a CODE128 barcode of the order number, or of the receipt number when you leave the order number empty, like a till receipt. Turn it off with the switch above the form.

### What are the transaction codes on the receipt?

They are short reference numbers like the ones a shop receipt prints at the bottom. The maker builds them from your order number, or from the receipt number when the order number is empty, so the same receipt always shows the same codes.

### What currencies are supported?

37 currencies, including USD, EUR, GBP, INR, CAD, AUD, and JPY. Amounts are formatted for each currency, with no decimals for currencies such as JPY.

### Is my receipt data stored on a server?

No. The receipt is built in your browser and is not sent to a server. Your store profile is saved only in your own browser.

### Can I use this as a Shopify receipt maker?

Yes. It supports Shopify Payments, order numbers, customer details, shipping, discounts, and a return-policy footer, so it suits manual, wholesale, and in-person Shopify orders.

### Do I have to re-enter my store details every time?

No. The maker saves your store name, logo, and address in your browser, so they are ready next time.

### Can I add tax, discounts, shipping, and tips?

Yes. Enter a tax rate and pick a label such as Sales Tax, VAT, or GST. Add a percentage or flat discount, shipping, and a tip, and the totals update as you type.

### What size is a thermal receipt?

Thermal till rolls are usually 58 mm (about 2.3 inches) or 80 mm (about 3.1 inches) wide. Pick the width your printer uses, and the PDF comes out at that width.

### What is the difference between a receipt and an invoice?

An invoice asks for payment before the customer pays. A receipt confirms the payment afterwards. This tool makes receipts; use the invoice generator to bill a customer first.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (-). Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Rent Receipt Generator - Monthly Rent Receipts Online

Need a rent receipt for a tenant or your own records? PinFlow's **free rent receipt generator** makes a clean monthly rent receipt in seconds. Add the tenant, landlord, property, and rent paid, then download a PDF or PNG as proof of rent payment. No signup required.

## How to Make a Rent Receipt

[![Watch How It Works](https://img.youtube.com/vi/NXLugEEy7fk/maxresdefault.jpg)](https://youtu.be/NXLugEEy7fk)

1. **Add the landlord or property**: Enter the landlord name or property name and address.
2. **Add the tenant**: Enter the tenant name in the customer field.
3. **Set the rental period**: Write the month in the item line, like "Rent - June 2026".
4. **Enter the amount**: Add the rent paid as the line amount.
5. **Pick the payment method**: Choose bank transfer, cash, card, or check.
6. **Download**: Save the rent receipt as a PDF or PNG, or print it.

## What a Rent Receipt Should Include

A clear rent receipt usually shows:

- **Tenant name**: Who paid the rent.
- **Landlord or property name**: Who received the rent.
- **Property address**: The rented home or unit.
- **Rental period**: The month or dates the rent covers.
- **Amount paid**: The rent total in numbers.
- **Payment method**: Bank transfer, cash, card, or check.
- **Paid in full note**: A short line confirming the rent is settled.

## Rent Receipt Template vs This Maker

A blank rent receipt template means typing the same details every month. This rent receipt generator fills the layout for you. Change the month and amount, then download. It works as a reusable monthly rent receipt without a Word or PDF template to manage.

## Who Needs a Rent Receipt Maker?

- **Landlords**: Give tenants proof of rent payment each month.
- **Tenants**: Keep a record of rent paid for a deposit or a claim.
- **Property managers**: Issue house rent receipts across many units.
- **Roommates**: Show a share of rent was paid for a shared home.

## Rent Receipt Generator FAQ

**Is the rent receipt generator free?**
Yes. Create and download rent receipts for free, with no signup and no watermark.

**Can I make a monthly rent receipt?**
Yes. Write the month in the item line, like "Rent - June 2026", and reuse it each month with a new date and amount.

**Does it work as proof of rent payment?**
Yes. The receipt shows the tenant, landlord, property, amount, and a paid in full note, which is what most tenants and landlords need as proof.

**What formats can I download?**
You can download a PDF or a PNG, or print the rent receipt from your browser.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Return Form Generator

Create a clear **return form** for your customers in about a minute. Our free **return form generator**, sometimes called an RMA form, lets you add the return-from address, the items being sent back, and the reason for the return, then download a tidy PDF. It is built for Shopify and ecommerce stores that want a simple, professional returns process. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Make a Return Form

[![Watch How It Works](https://img.youtube.com/vi/cHiwKBGtVt4/maxresdefault.jpg)](https://youtu.be/cHiwKBGtVt4)

This **return form template** is built around a customer sending a product back. Fill it in like this:

1. **Add your store details**: Enter your business name, logo, and the address the return should be sent to. This is where the goods come back.
2. **Add the customer**: Enter the customer and their address. On a return form this field is labelled Return From, because the goods travel from the customer to you.
3. **Add an RMA or order number**: Reuse the original order number, or assign an RMA number, so the return links back to the purchase.
4. **List the items being returned**: Add one line per product with the quantity. You can use the description field to record the reason, such as wrong size or damaged.
5. **Download and share**: Click Download PDF. Email it to the customer to print, or include it in the original parcel so it is ready if they need to return anything.

## What Is a Return Form?

A return form is the document a customer includes when they send a product back to a seller. It records which items are being returned, the original order they came from, and the reason for the return. With that information, the seller can identify the parcel when it arrives and process the right outcome, whether that is a refund, a replacement, or an exchange.

A return form is often called an RMA form. RMA stands for Return Merchandise Authorization, which is the seller's approval for the customer to return the goods. Many stores issue an RMA number with each approved return. That number travels on the form and ties the returned parcel to the customer, the order, and the agreed resolution.

## Why Returns Forms Matter for Ecommerce

Returns are a normal part of selling online, especially in clothing, footwear, and other categories where fit and feel are hard to judge from a photo. A simple, clear returns process protects both sides. The customer knows what to do, and you receive parcels you can identify and process quickly.

Without a form, a returned box can arrive with no order number and no reason, which means slow handling and a frustrated customer waiting for a refund. A one-page return form removes that friction. It is also a quiet trust signal at the point of purchase. A buyer who can see that returns are easy is more comfortable ordering in the first place.

## Return Form vs Return Label

These two work together but are not the same thing.

- A **return form** is the paperwork that goes inside the box. It lists the items, the order, and the reason for the return.
- A **return label** is the shipping label on the outside of the box that addresses the parcel back to you.

Many returns use both: the customer puts the completed form inside, sticks the label on the outside, and ships it. This tool creates the return form. The shipping label itself is generated through your carrier or shipping app, since it needs real postage.

## What to Include on a Return Form

A useful return form is short and complete:

- **Your return address**, so the customer knows where to send the goods.
- **The customer and return-from address.**
- **An RMA or original order number** to link the return to the purchase.
- **A line for each item** being returned, with quantity.
- **The reason for return** and the requested outcome: refund or exchange.
- **A note** with any return-window or condition rules, such as items must be unworn with tags attached.

## Tips for a Smoother Returns Process

- **Set a clear return window.** State how many days a customer has to start a return, and put it on the form so there is no confusion.
- **Ask for a reason.** Return reasons are useful data. A pattern of "too small" might mean your sizing guide needs work.
- **Use one number across the return.** Keep the same RMA or order number on the form, in your emails, and in your records so the return is easy to trace.
- **Pair it with the original paperwork.** A return is easier when it matches the original [packing slip](/tools/packing-slip-generator) and, if you sell to businesses, the original [invoice](/tools/invoice-generator).

## Frequently Asked Questions

### What is a return form?

A return form, also called an RMA form, is the document a customer includes when sending a product back. It lists the items being returned, the original order, and the reason, so the seller can process a refund or exchange.

### What does RMA stand for?

RMA stands for Return Merchandise Authorization. It is the seller's approval for a customer to send an item back, usually tracked with an RMA number that links the return to the original order.

### What is the difference between a return form and a return label?

A return form is the paperwork that travels inside the box and lists the items and reason for the return. A return label is the shipping label on the outside that gets the parcel back to you. Many returns use both.

### What should a return form include?

The customer and return-from address, the original order or RMA number, a line for each item being returned, the reason for the return, and whether the customer wants a refund or exchange.

### Is this return form generator free?

Yes, it is 100% free, needs no signup, and lets you create unlimited return forms.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Reverb Fee Calculator
description: Work out Reverb's 5% selling fee (capped at \$500) plus processing and your exact net payout, add cost for profit and margin, or reverse-solve the price to a target payout.
---

# Free Reverb Fee Calculator

Know what a Reverb sale really leaves you before you list your gear. Our free **Reverb fee calculator** applies the 5% selling fee on the item plus shipping (capped at \$500) and payment processing of 3.19% + \$0.49, with a lower Preferred-seller rate of 2.99% + \$0.49. Enter your price and it shows every fee and your exact net payout. Add your item cost and it also shows profit and margin. The same engine covers Etsy, Depop, Mercari, and more. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Reverb Fee Calculator

[![Watch how the free Reverb Fee Calculator works](https://img.youtube.com/vi/gbN1mcMZb04/maxresdefault.jpg)](https://youtu.be/gbN1mcMZb04)

This quick walkthrough shows the calculator in action. For Reverb, it applies the 5% selling fee plus payment processing and shows your net payout, or reverse-solves the price to hit a target take-home.

The tool has two modes:

1. **Price to payout**: Enter your item price and, if you charge it, shipping. The calculator lists the selling fee, processing, and your net payout. Add your item cost to see profit and margin too.
2. **Net to price**: Enter the payout you want to keep, and the calculator solves for the listing price that leaves you exactly that after fees.

A **seller tier** selector switches between the standard and Preferred processing rates. The tool opens on Reverb, and the platform dropdown lets you compare against Etsy or another marketplace. Reverb's selling-fees page is linked with the date we checked it.

## How Reverb Fees Work in the US

Reverb charges sellers two things on a sale:

- A **5% selling fee** on the item price plus any shipping you charge, **capped at \$500**.
- **Payment processing** of **3.19% + \$0.49** for standard sellers, or **2.99% + \$0.49** for Preferred sellers.

Both come out of the sale. The selling fee is the marketplace's cut for connecting you to buyers; the processing fee is the cost of running the card. The calculator shows each as its own line so you can see where the money goes.

## The \$500 Selling-Fee Cap

The 5% selling fee stops growing once it reaches \$500. That happens at a \$10,000 sale (item plus shipping). Above that, the selling fee stays \$500 no matter how expensive the instrument, so a \$20,000 vintage guitar still pays only the \$500 cap in selling fee, plus processing. The cap protects high-value gear from an unlimited percentage, and the calculator applies it automatically so your fee never overstates.

## A Worked Example

Sell a **\$200** item with **\$15** shipping:

- Selling fee: 5% of \$215 = **\$10.75**
- Processing (standard): 3.19% of \$215 + \$0.49 = about **\$7.35**
- Total fees: about **\$18.10**
- Net payout: about **\$196.90** before your own item cost

Switch the tier to Preferred and processing drops to 2.99% + \$0.49, trimming the fee slightly. The calculator prints the exact figures so you never estimate by hand.

## The Preferred-Seller Rate

Reverb offers established, high-volume sellers a **Preferred-seller processing rate of 2.99% + \$0.49** instead of the standard 3.19% + \$0.49. The 5% selling fee is unchanged. If you qualify, switch the tier selector to Preferred to see your lower net cost. If you are not sure whether you qualify, use the standard rate for a conservative estimate that will not understate your fees.

## Fees the Calculator Does Not Include

The tool models Reverb's selling fee and payment processing, which are the core per-sale costs. It does not add optional promoted-listing spend (Reverb Bump), shipping-label purchases you absorb, or tax handling, since those depend on choices you make per sale. Add any promotion cost separately when you budget.

## Using the Reverse Mode

Switch to the **Net to price** tab, type the payout you want to keep, and the calculator solves for the listing price that leaves you exactly that after Reverb's selling fee and processing. Because there is both a percentage and a fixed processing fee, you cannot simply add 5% back on; the tool handles the exact reconciliation and shows the breakdown so you can confirm it.

## Frequently Asked Questions

The FAQ section on this page answers the common questions in full and is marked up as structured data. In short: Reverb charges a 5% selling fee on item plus shipping capped at \$500, plus processing of 3.19% + \$0.49 (2.99% + \$0.49 for Preferred sellers), and the reverse mode solves the price you need to net a target. Always confirm the live figure on Reverb's selling-fees page before you rely on it.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Reverse Sales Tax Calculator

Back the sales tax out of any total in seconds. Our free **reverse sales tax calculator** takes a gross price that already includes tax and finds the price before tax and the exact tax amount. It is built for Shopify sellers and ecommerce merchants who need clean numbers for bookkeeping, payout reconciliation, and tax remittance. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Reverse Sales Tax Calculator

[![Watch How It Works](https://img.youtube.com/vi/ie0_k7rP3ZU/maxresdefault.jpg)](https://youtu.be/ie0_k7rP3ZU)

This quick video walkthrough shows how to back the sales tax out of a total. You will learn to enter your gross price, set the tax rate or pick a state preset, and instantly read the price before tax using our free calculator.

![Free reverse sales tax calculator backing a 4% New York tax out of a $1,593.75 total to show $1,532.45 before tax and $61.30 sales tax, with a step-by-step solution](/images/tools/reverse-sales-tax-calculator/reverse-sales-tax-calculator-example.webp)

This **reverse tax calculator** needs just two numbers. Here is how to use it:

1. **Enter the total price**: This is the gross amount the customer paid, with tax already included.
2. **Set the sales tax rate**: Type the rate as a percent, like 6.25. You can also pick a state or province preset to fill the statewide base rate for you.
3. **Adjust the rate if needed**: The preset fills the base rate, but the field stays editable. Add your local city or county rate to match your real combined rate.
4. **Read your results**: The tool instantly shows the price before tax, the sales tax amount, and a step-by-step solution.

## The Reverse Sales Tax Formula

The math for backing tax out of a total is simple. This is the **reverse sales tax formula**:

$$
\text{Price before tax} = \frac{\text{Total}}{1 + \frac{\text{Tax rate}}{100}}
$$

$$
\text{Sales tax} = \text{Total} - \text{Price before tax}
$$

The key step is dividing, not subtracting. A common mistake is to take the tax percent off the total directly. That gives the wrong answer because the tax was charged on the smaller pre-tax price, not the larger gross total.

### Worked Example

Say a customer paid a total of **\$858** and your sales tax rate is **7.25%**.

First convert the rate to a decimal, then divide the total by 1 plus that decimal:

$$
\text{Price before tax} = \frac{858}{1 + \frac{7.25}{100}} = \frac{858}{1.0725} = 800
$$

Then subtract the pre-tax price from the total to find the tax:

$$
\text{Sales tax} = 858 - 800 = 58
$$

So the price before tax is **\$800** and the sales tax is **\$58**. As a shortcut, dividing by 1.0725 backs out a 7.25% tax in one step.

## How to Calculate Tax From a Total

If you want to know **how to calculate tax from total** by hand, follow the same two steps. First divide the total by $1 + \text{rate}$ to get the list price. Then subtract the list price from the total to get the tax. The calculator above does this for you and shows every step in the solution panel.

## Why Ecommerce Sellers Back Tax Out of Gross Sales

Online sellers often see one gross number and need to split it apart. Here is why that matters:

- **Bookkeeping**: Your accounting records need revenue and tax recorded separately. The reverse calculation gives you both from a single payout figure.
- **Tax remittance**: When you file, you owe the tax you collected, not a slice of your total sales. Backing the tax out tells you the correct amount to remit.
- **Payout reconciliation**: Shopify, Stripe, and PayPal often report gross totals. A **reverse sales tax calculator** helps you reconcile those payouts against your real product revenue.
- **Pricing checks**: If you sell tax-inclusive prices, this tells you the true product price hiding inside the sticker.

If you sell a mix of taxable and non-taxable products on Shopify, the harder job is splitting your revenue before you ever get to the tax. Shopify has no taxable or non-taxable field in its reports, but you can build the split yourself in about five minutes: [how to build a Shopify sales tax report for taxable and non-taxable sales](/blog/shopify-sales-tax-report).

## US State and Canada Sales Tax Rate Notes

The presets in this tool use **base statewide rates** in the US and **combined federal plus provincial rates** in Canada. Local city, county, and district taxes can push the real rate higher, so always confirm your combined rate.

- Popular US lookups include **reverse sales tax calculator NJ** (New Jersey 6.625%), **NY** (New York 4% state, often around 8% combined), **CA** (California 7.25%), **TX** (Texas 6.25%), **FL** (Florida 6%), and **OH** (Ohio 5.75%).
- Canadian sellers can pick **Quebec** (14.975%), **British Columbia** (12%), or **Ontario** (13% HST).

Here are the base rates behind some of the most searched presets:

| Region           | Base rate | Type       |
| ---------------- | --------- | ---------- |
| California (CA)  | 7.25%     | State base |
| Texas (TX)       | 6.25%     | State base |
| Florida (FL)     | 6%        | State base |
| New York (NY)    | 4%        | State base |
| New Jersey (NJ)  | 6.625%    | Statewide  |
| Ohio (OH)        | 5.75%     | State base |
| Quebec, Canada   | 14.975%   | GST + QST  |
| Ontario, Canada  | 13%       | HST        |
| British Columbia | 12%       | GST + PST  |

Because rates change and local rates vary, treat the presets as a starting point and edit the rate field to match the exact rate on the order.

## FAQ

### How do I calculate sales tax from a total?

Divide the total by 1 plus the tax rate as a decimal. That gives the price before tax. Then subtract that price from the total to get the sales tax. For example, a \$107 total at a 7% rate is $107 \div 1.07 = 100$ before tax, and $107 - 100 = 7$ in tax.

### Is there a free reverse sales tax calculator?

Yes. This is a 100% **free reverse sales tax calculator**. There is no signup, no account, and no limit on how many calculations you run.

### What is the reverse sales tax formula?

The formula is $\text{Price before tax} = \frac{\text{Total}}{1 + \text{Tax rate}}$. Then $\text{Sales tax} = \text{Total} - \text{Price before tax}$. You divide first, then subtract.

### Why can I not just subtract the tax percent from the total?

Because the tax was applied to the smaller pre-tax price, not the larger total. Subtracting the percent from the gross total overstates the tax. Dividing by $1 + \text{rate}$ is the correct way to reverse it.

### Can I use this for any state or country?

Yes. Pick a US state or Canadian province preset to fill the base rate, or type any rate manually. The tool works for any sales tax, VAT, or GST percentage you enter.

### Does the calculator handle local and combined rates?

Yes. The presets load the statewide base rate, but the rate field stays editable. Enter your full combined rate, including city and county tax, for an exact result.

### How do I reverse sales tax in Excel?

Use the same formula in a spreadsheet. If the total is in cell A1 and the tax rate percent is in B1, the price before tax is `=A1/(1+B1/100)` and the sales tax is `=A1-A1/(1+B1/100)`. This calculator runs that reverse sales tax formula for you, so you do not need an Excel sheet at all.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free ROAS Calculator

Work out your return on ad spend in seconds. Our free **ROAS calculator** takes your ad spend and ad revenue and shows your ROAS as a clean ratio and a percent. Add your gross margin and it unlocks your break-even ROAS, target ROAS, profit, and ROI. It is built for Shopify sellers and DTC media buyers running Meta, Google, and TikTok ads who need to know if their campaigns actually make money. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the ROAS Calculator

[![Watch How It Works](https://img.youtube.com/vi/XrUdltAbEh0/maxresdefault.jpg)](https://youtu.be/XrUdltAbEh0)

This free **return on ad spend calculator** needs just two numbers to start, plus three optional inputs that unlock the advanced metrics. Here is how to use it:

1. **Enter your ad spend**: The total amount you spent on this ad, campaign, or channel.
2. **Enter your ad revenue**: The revenue attributed to that ad spend. The tool instantly shows your ROAS as a ratio and a percent, plus your ACoS.
3. **Add your gross margin % (optional)**: Revenue minus product cost (COGS), as a percent. This unlocks your break-even ROAS, gross and net profit, net margin, and ROI.
4. **Add your target net margin % (optional)**: The profit margin you want to keep after ad spend. This unlocks your target ROAS.
5. **Add a monthly revenue goal (optional)**: We show the ad budget needed to hit that revenue at your target ROAS.
6. **Read your results**: The hero number is your ROAS. The cards below show break-even ROAS, target ROAS, net profit, and the budget to hit your goal. A verdict line tells you if the campaign is profitable.

![ROAS calculator results showing 3.50x return on ad spend, ACoS, break-even ROAS, target ROAS, net profit, net margin, ROI, and the ad budget to hit a revenue goal](/images/tools/roas-calculator/roas-calculator-results.webp)

## How to Calculate ROAS by Hand

If you want to know **how to calculate ROAS** without a tool, it is a single division. Follow these steps:

1. **Find your ad revenue**: Total the revenue your ads drove over a date range. Use your ad platform or analytics attribution.
2. **Find your ad spend**: Total what you paid the platform over the same range.
3. **Divide revenue by spend**: ROAS = ad revenue / ad spend.
4. **Express it two ways**: As a ratio like 4.0x, and as a percent by multiplying by 100, so 4.0x is 400%.

That is the whole **roas calculation**. The hard part is not the math, it is judging the number against your margins, which is why this tool layers break-even and target ROAS on top.

## The ROAS Formula

This is the core **ROAS formula**, used by every tool in this space:

$$
\text{ROAS} = \frac{\text{Ad revenue}}{\text{Ad spend}}
$$

To read it as a percent, multiply by 100. A ratio of 4.0x is the same as 400%.

There is also a conversion-based version of the **roas equation** when you do not have a single revenue figure but you do know your orders and average order value:

$$
\text{ROAS} = \frac{\text{Conversions} \times \text{Average order value}}{\text{Ad spend}}
$$

Both formulas give the same answer. Use whichever inputs you have on hand. In a spreadsheet, if ad revenue is in cell A1 and ad spend is in B1, your ROAS is `=A1/B1`.

### Worked Example

Say you spent **\$1,000** on a Meta campaign and it drove **\$4,000** in revenue:

$$
\text{ROAS} = \frac{4000}{1000} = 4.0\text{x} = 400\%
$$

Now a fuller example with margins. You spend **\$4,285.71** and earn **\$15,000**, so your ROAS is **3.50x**. With a **50%** gross margin, your break-even ROAS is **2.00x**. If you want to keep a **15%** net margin after ad spend, your target ROAS is **2.86x**. Since 3.50x beats both, the campaign is profitable.

## Break-Even ROAS

Your **break-even ROAS** is the point where ad revenue exactly covers product cost plus ad cost. Below it you lose money, above it you profit. The formula is simple:

$$
\text{Break-even ROAS} = \frac{1}{\text{Gross margin}}
$$

![Profit at different ROAS levels chart plotting net profit against ROAS, with the break-even, target, and your current ROAS points marked on the curve](/images/tools/roas-calculator/roas-calculator-profit-curve.webp)

Use your gross margin as a decimal. This is why a **break even roas calculator** only needs your margin, not your spend. Here is how it scales:

| Gross margin | Break-even ROAS |
| ------------ | --------------- |
| 30%          | 3.33x           |
| 50%          | 2.00x           |
| 70%          | 1.43x           |

A high-margin brand breaks even at a low ROAS. A thin-margin brand needs a much higher ROAS just to avoid losing money. Always compare your actual ROAS to this number first.

## Target ROAS: Build In Your Profit Margin

Break-even keeps you at zero. **Target ROAS** is the ROAS you need to hit a profit goal after ad spend. It builds your desired net margin into the number:

$$
\text{Target ROAS} = \frac{1}{\text{Gross margin} - \text{Target net margin}}
$$

With a 50% gross margin and a 15% target net margin, your target ROAS is 1 / (0.50 - 0.15) = **2.86x**. Set that figure as your **target roas** (tROAS) bidding goal in Google or Meta so the platform optimizes toward profitable spend, not just any conversion.

## What Is a Good ROAS?

The honest answer to **what is a good ROAS** is: it depends on your margins. There is no single industry number that fits every store. Use this scale as a rough guide:

- **Below your break-even ROAS**: a loss. Every sale costs more than it earns.
- **2x to 4x**: common for many ecommerce brands. Often profitable on healthy margins.
- **4x and up**: strong. Comfortable profit on most DTC margins.
- **8x or higher**: excellent, but may signal you are under-spending and leaving growth on the table.

By platform, DTC brands often see Meta land around 1.8x to 3.0x and Google Search around 3.5x to 6.0x, though this varies widely. The rule stays the same: compare your ROAS to your own break-even, not to an average.

## ROAS vs ROI vs ACoS vs MER

These four metrics get mixed up constantly. Here is the one-line version of each:

- **ROAS**: ad revenue / ad spend. Revenue earned per ad dollar.
- **ROI**: net profit / total cost. Profit per dollar after all costs. The **roas vs roi** difference is that ROAS ignores product and overhead cost, so a high ROAS can still mean a low ROI on thin margins.
- **ACoS**: ad spend / ad revenue. The inverse of ROAS, shown as a percent. A 4x ROAS is a 25% ACoS. If you came here for an **acos calculator**, the cost-per-revenue-dollar card above is your ACoS.
- **MER**: total revenue / total ad spend, also called blended ROAS. It judges all your ad spend together instead of one campaign.

A common related metric is **roas vs cpa**: CPA (cost per acquisition) is spend per order, while ROAS is revenue per ad dollar. They answer different questions.

## How to Improve Your ROAS

If your ROAS is below your target, a few levers move it the most:

- **Raise your average order value** with bundles, upsells, and free-shipping thresholds.
- **Lift your conversion rate** with faster pages, better product photos, and clearer offers.
- **Cut the worst-performing ad sets** and shift budget to your winners.
- **Refresh creative** before fatigue drives your costs up.

Small gains on AOV and conversion rate compound, because both raise revenue without raising ad spend.

## Why ROAS Matters for Shopify Sellers

ROAS ties your ad budget directly to your product margin. Your gross margin sets a hard ceiling on how much you can pay to acquire a sale, and your break-even ROAS is that ceiling expressed as a ratio. Knowing it stops you from scaling a campaign that looks busy but loses money on every order.

Pair this with the rest of your store math. Use our [Profit Margin Calculator](/tools/profit-margin-calculator) to set the margins that feed this tool, the [Break-Even Calculator](/tools/break-even-calculator) to find the units and revenue you need to cover costs, and the [Facebook Ads Calculator](/tools/facebook-ads-calculator) and [Instagram Ads Calculator](/tools/instagram-ads-calculator) to forecast spend on each platform. This **marketing roi calculator** turns those margins into a clear go or no-go for your ads.

## Frequently Asked Questions

### What is ROAS?

Return on ad spend: the revenue you earn for every dollar spent on ads. ROAS = ad revenue / ad spend. A 4x ROAS means \$4 of revenue for every \$1 of ad spend.

### How do I calculate ROAS?

Divide the revenue from your ads by the amount you spent on them. Example: \$4,000 revenue / \$1,000 spend = 4.0x (400%).

### What is a good ROAS?

It depends on your margins. Many ecommerce brands aim for 4x or higher, but a high-margin brand can profit at 2x while a low-margin brand may need 8x. Compare it to your break-even ROAS, not an industry average.

### What is break-even ROAS?

The ROAS where ad revenue exactly covers product cost plus ad cost, so you make no profit and no loss. Break-even ROAS = 1 / gross margin. A 50% margin needs 2.0x.

### What is target ROAS?

The ROAS you need to hit a desired profit margin after ad spend. With a 50% gross margin and a 15% target net margin, your target ROAS is 1 / (0.50 - 0.15) = 2.86x.

### What is the difference between ROAS and ROI?

ROAS measures revenue per ad dollar. ROI measures net profit per dollar after all costs. A campaign can have a high ROAS but low ROI if margins are thin.

### What is the difference between ROAS and ACoS?

They are two sides of the same ratio. ROAS is revenue / ad spend; ACoS is ad spend / revenue. A 4x ROAS equals a 25% ACoS.

### Is this ROAS calculator free?

Yes, 100% free, no signup, unlimited calculations.


---

# Free Shipping Label Template Generator

Create a clean, printable shipping label with your From and To addresses, package details, and an optional barcode or QR. This is a formatted label template, not a prepaid carrier label, so use it for professional, readable single shipping labels and pair it with carrier postage when you need a scannable shipping barcode. To tile many small address labels onto one Avery sheet, use the address label generator instead.

## What is a shipping label and what information goes on one?

![Free shipping label generator preview showing a USPS Priority Mail label with the ship-to address printed largest, order ID, weight, ship date, FRAGILE and PERISHABLE handling badges, and a return address, next to the editor form with PDF, PNG, and SVG download buttons](/images/tools/shipping-label-generator/shipping-label-example.webp)

A shipping label is the printed slip on the outside of a parcel that tells everyone who handles it where the package is going, who sent it, and what is inside. A complete label is easy to read at a glance and keeps the most important block, the recipient address, the largest.

A standard shipping label includes:

- **Ship-from (sender / return) address** - your name or store, street, city, state or province, ZIP or postal code, and country.
- **Ship-to (recipient) address** - the destination name and full address, printed largest so it is the first thing a courier reads.
- **Package details** - weight, dimensions (length x width x height), and an order ID or reference.
- **Carrier and service** - the carrier name and service level (these are visual on this template; real routing comes from carrier postage).
- **Tracking number** - a reference you can print for your records, optionally encoded as a barcode or QR.
- **Special handling** - warnings such as FRAGILE, THIS SIDE UP, DO NOT BEND, or PERISHABLE.

Our generator gives you every one of these fields with a live preview, so you can see the finished label update as you type.

## Standard shipping label sizes (4x6, half-sheet, A6)

Picking the right size is the difference between a label that prints cleanly and one that is cut off. These are the sizes merchants use most:

- **4 x 6 inches** - the universal thermal label size for Zebra, Rollo, and DYMO printers, and the size most platforms generate. This is the keyword most people search for and the default you want for parcels.
- **4 x 6.75 inches** - a 4x6 label with a small tear-off slip, common on integrated postage sheets.
- **US Letter half-sheet (8.5 x 5.5 inches)** - half of a standard Letter page, easy to print on a normal inkjet or laser printer and tape on.
- **A6 (105 x 148 mm)** and **A4** - the international equivalents for label sheets and full-page printing.

This tool offers all of these as one-click presets, plus a custom size in inches, centimeters, or millimeters, and it sizes the exported PDF to the label so it prints at true scale.

## How to print a 4x6 shipping label at home (thermal vs inkjet)

There are two common ways to print labels at home, and the right settings matter more than the printer.

**Thermal label printer (Zebra, Rollo, DYMO).** Load 4 x 6 inch direct-thermal labels, choose the 4x6 preset here, and download the PDF. In the print dialog set the paper size to 4 x 6 and the scale to 100% (never "fit to page" or "shrink to fit"). Thermal printers need no ink, so a high-contrast black-and-white template like our Thermal 4x6 design prints crisp, dark text and a clean barcode.

**Inkjet or laser printer with sheets.** If you do not have a thermal printer, use the US Letter half-sheet or A4 preset and print on plain paper or a full-sheet adhesive label, then trim and tape it on with clear packing tape (keep tape off the barcode). Print at 100% scale here too.

The golden rule for any printer: **print at actual size / 100% scale**. Because the exported PDF page is sized to the label in inches, 100% scale gives you a label at its true physical size every time.

## Shipping label vs packing slip vs delivery note

These documents travel with an order but do different jobs, and using the right one looks more professional:

- **Shipping label** (this tool) - goes on the outside of the box with the From / To addresses so it can be delivered.
- **[Packing slip](/tools/packing-slip-generator)** - goes inside the box and lists the items shipped (quantities, no prices) so the customer can check the contents.
- **[Packing list](/tools/packing-list-generator)** - a fuller itemized contents document for wholesale, freight, and customs.
- **[Delivery note](/tools/delivery-note-generator)** - confirms what was delivered and often has a signature line for proof of delivery.
- **[Return form](/tools/return-form-generator)** - the RMA slip a customer uses to send an item back.

Most parcels carry a shipping label on the outside and a packing slip inside. Generate both with the matching tools so your fulfillment documents share one clean look.

## How to use this shipping label generator in 3 steps

[![Watch How It Works](https://img.youtube.com/vi/x9xYjcSbGrY/maxresdefault.jpg)](https://youtu.be/x9xYjcSbGrY)

This quick walkthrough shows how to fill in your From and To addresses, add package details, pick a template and size, and download a print-ready shipping label. It is completely free and needs no sign-up.

1. **Fill From and To.** Enter your return address and the recipient address. Country is a full dropdown, and the state field becomes a dropdown for US states and Canadian provinces.
2. **Add package details and pick a design.** Set the order ID, weight, dimensions, carrier, and any handling badges, then choose one of the ten templates and a size preset (4x6, 4x6.75, half-sheet, A6, or custom). Optionally switch on a barcode or QR.
3. **Download or print.** Export a print-ready PDF, PNG, or SVG, or hit Print. To make many labels at once, open the Bulk CSV tab, download the template, and upload a row per recipient.

## Tips for a label that ships cleanly

- **Placement.** Apply the label flat on the largest face of the box, away from seams, tape edges, and corners so scanners get a clean read. One label per parcel.
- **Barcode legibility.** Keep the barcode area free of tape and printed at 100% scale. The high-contrast Thermal 4x6 template gives the darkest bars; avoid colored backgrounds behind a barcode.
- **Make the recipient the biggest block.** Couriers read the ship-to address first, so the templates intentionally print it largest. Keep your return address smaller in a corner.
- **Always include a return address.** If a parcel cannot be delivered, the return address is how it gets back to you.
- **Double-check the ZIP / postal code and country** before printing a batch - a single wrong code can misroute a shipment.

## Frequently asked questions

### Is this a real carrier shipping label?

No. This tool makes a clean, printable formatted label with your From / To addresses and package details. It is not a prepaid carrier label - it carries no real postage and no carrier tracking. Buy postage from USPS, UPS, FedEx, DHL, or your platform when you need a scannable carrier label, and use this for a professional address and package label.

### What is the tracking number field for?

It is a visual field so you can print a tracking number you already have (for example one you bought from a carrier or your store platform) onto the label for reference. The optional barcode or QR is generated from that number or your order ID, so it is a self-generated code, not a carrier-scannable shipping barcode.

### Can I print a 4x6 shipping label?

Yes. Pick the 4x6 inch thermal preset (also 4x6.75, A6, A4, US Letter half-sheet, or a custom size). Download the print-ready PDF, which is sized to the label in inches, and print at 100% scale with no fit-to-page so it comes out at its true size on a thermal printer (Zebra, Rollo, DYMO) or an inkjet sheet.

### Can I add a barcode or QR code?

Yes. Switch the barcode/QR control to Barcode (CODE128) or QR code. The code is built from your tracking number or order ID and is baked into the export so it shows on the printed label. Remember it is a reference code you generate, not a carrier scan code.

### Is it free and is there a watermark?

It is 100% free with no email, no signup, and no watermark. Design and download as many labels as you want as PDF, PNG, or SVG. Unlike tools that email you the PDF behind a signup gate, the download here is instant and in your browser.

### Can I bulk-generate labels from a spreadsheet?

Yes. Open the Bulk CSV tab, download the CSV template, fill one recipient per row, and upload it. Each row inherits the sender, carrier, size, and style from the form, and you can export every label as a multi-page PDF or a ZIP of PNG files.

## Sources and further reading

- [USPS - Shipping label and address format guidance](https://www.usps.com/ship/shipping-labels.htm)
- [UPS - How to create and print labels](https://www.ups.com/us/en/support/shipping-support/shipping-labels.page)


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Shopify Fee Calculator
description: Work out Shopify Payments processing by plan and your exact net payout, see the transaction fee a third-party gateway adds, add cost for profit, or reverse-solve to a target.
---

# Free Shopify Fee Calculator

Know exactly what a Shopify sale leaves you before you price it. Our free **Shopify fee calculator** takes your sale price and your plan, then shows the Shopify Payments processing fee, any third-party transaction fee, and your exact net payout. Add your item cost and it also shows profit and margin. The same engine covers Etsy, Stripe, Square, PayPal, and more. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Shopify Fee Calculator

[![Watch how the free Shopify Fee Calculator works](https://img.youtube.com/vi/gbN1mcMZb04/maxresdefault.jpg)](https://youtu.be/gbN1mcMZb04)

This quick walkthrough shows the calculator in action. For Shopify, pick your plan to load the Shopify Payments card rate, add any third-party gateway fee, and get your net payout, or reverse-solve the list price for a target take-home.

The tool has two modes:

1. **Price to payout**: Enter your sale price, pick your plan, and choose Shopify Payments or a third-party gateway. The calculator lists each fee and your net payout. Add your item cost to see profit and margin too.
2. **Net to price**: Enter the payout you want to keep, and the calculator solves for the price that leaves you exactly that after fees.

Use the **plan** and **payment gateway** selectors to match your setup. The tool opens on Shopify, and the platform dropdown lets you compare against other processors. Shopify's pricing page is linked with the date we checked it.

## How Shopify Fees Work in the US

Shopify's cost to sell has two separate parts, and it is easy to confuse them:

- **Card processing**: the fee to run the card, charged whenever a card is used.
- **Transaction fee**: an extra Shopify fee that applies only if you do not use Shopify Payments.

On **Shopify Payments**, the transaction fee is **0%**. You pay only card processing at your plan's rate:

- **Basic**: 2.9% + \$0.30 online (2.6% + \$0.10 in person)
- **Grow** (formerly Shopify): 2.7% + \$0.30 online (2.5% + \$0.10 in person)
- **Advanced**: 2.5% + \$0.30 online (2.4% + \$0.10 in person)

If you route payments through a **third-party gateway** instead, Shopify adds a transaction fee on top of that gateway's own processing: **2% on Basic, 1% on Grow, 0.6% on Advanced**. That extra fee is exactly why most stores stay on Shopify Payments.

## A Worked Example

Take a **\$50** online sale on the **Basic** plan using Shopify Payments:

- Card processing: 2.9% + \$0.30 = **\$1.75**
- Transaction fee: **0%** (\$0.00)
- Net payout: **\$48.25**

Now switch to a third-party gateway on Basic. Shopify adds a 2% transaction fee, which is **\$1.00** on that \$50 sale, on top of whatever the external gateway charges to process the card. The calculator shows both scenarios so the difference is obvious.

## Should You Upgrade Your Plan?

Higher plans lower both the processing rate and the third-party transaction fee, but they cost more per month. Upgrading pays off only once your card volume is large enough that the per-sale saving beats the higher subscription. Use this calculator to find the saving on a typical order, multiply by your monthly orders, and compare that total against the difference in plan price. Do the math before you upgrade rather than assuming a bigger plan is always cheaper.

## Fees the Calculator Does Not Include

The tool models Shopify Payments card processing and the third-party transaction fee, which are the per-sale costs. It does not add your monthly subscription, app charges, chargeback fees, or currency-conversion costs, since those depend on your store rather than the single sale. Add them separately when you budget, and confirm the live rates on Shopify's pricing page.

One caveat on the third-party gateway option: the calculator deducts only Shopify's transaction fee (2% on Basic, 1% on Grow, 0.6% on Advanced), not the outside processor's own card fee. Your real net is lower by whatever that gateway charges to run the card, usually around 2.9% + \$0.30. So the third-party net payout shown here is your take-home before that external processing fee, not after it. Add the gateway's own rate yourself when you compare it against staying on Shopify Payments.

## Shopify vs Other Platforms

Because Shopify Payments charges 0% transaction fee, selling on your own Shopify store is often cheaper per sale than a marketplace that takes a listing or selling cut and then processing on top. Switch the platform dropdown to compare the same order against Etsy, Stripe, or Square, and the calculator re-computes each breakdown. If you sell on both your store and a marketplace, this shows how much more you keep by driving buyers to your own checkout.

## Frequently Asked Questions

The FAQ section on this page answers the common questions in full and is marked up as structured data. In short: Shopify Payments processing is 2.9% + \$0.30 online on Basic and lower on higher plans, the transaction fee is 0% on Shopify Payments but 2% / 1% / 0.6% by plan on a third-party gateway, and the reverse mode solves the price you need to net a target. Always confirm the live figure for your plan and region on Shopify's pricing page before you rely on it.


---

<!-- Content rules for this file:
     1. The first "## " heading is the slice point; text above it is not rendered.
     2. No em dashes anywhere. Use a regular hyphen.
     3. Escape every currency dollar sign as \$ so remark-math does not read it as inline math.
     4. No AI-padding filler words; state points directly. -->

A Shopify profit calculator answers the one question your dashboard never quite does: after everything, how much do I actually keep on an order? Revenue is easy to see. Profit hides behind a stack of costs that each look small on their own and add up to most of the sale. This tool adds them all up for you, in real time, with the real Shopify plan and payment fees baked in and fully editable.

## What net profit per order really means on Shopify

[![Watch how the free Shopify Profit Calculator works](https://img.youtube.com/vi/LT4TtU0WEUE/maxresdefault.jpg)](https://youtu.be/LT4TtU0WEUE)

Net profit per order is the money left in your pocket after a single order has paid for itself. It is not gross margin, and it is not your Shopify payout. Gross margin only subtracts the cost of the product. Your Shopify payout only subtracts the payment fee. Net profit subtracts everything: the product, the packaging, the shipping label, the pick-and-pack time, the payment processing fee, a slice of your returns, the ad spend that won the order, and the per-order share of the subscriptions you pay every month to keep the store running.

The formula this calculator uses is straightforward once each piece is named:

- **Net revenue** is the selling price times units per order, minus any discount.
- **Total cost** is product cost plus shipping, fulfillment, payment processing, third-party gateway fee, a returns provision, marketing, and the per-order share of your plan and apps.
- **Net profit** is net revenue minus total cost.
- **Net margin** is net profit divided by net revenue.

Because the subscription costs (your Shopify plan and your apps) are monthly, the tool spreads them across your monthly order volume. Ship 400 orders a month on the \$39 Basic plan and each order carries about 10 cents of plan cost. Ship 40 and each order carries about 98 cents. Volume changes the answer, which is why order volume is one of the inputs.

## The full cost stack behind one Shopify order

Most thin calculators stop at revenue, cost of goods, and ads. The costs they skip are the ones that quietly turn a healthy-looking margin into a loss. Here is the full stack this tool models:

1. **Product cost (COGS and packaging).** What you pay to make or buy the unit, plus the box, mailer, tissue, and inserts.
2. **Shipping.** What you pay the carrier, net of any shipping the customer covered.
3. **Fulfillment.** Pick, pack, and handling, whether that is your own labour or a per-order 3PL fee.
4. **Payment processing.** The Shopify Payments card rate plus the fixed per-transaction fee.
5. **Third-party gateway fee.** Only if you use an external gateway instead of Shopify Payments. Shopify adds a transaction surcharge on top.
6. **Returns provision.** Your return rate times the cost of a return: the return shipping you eat plus the share of product cost you cannot recover.
7. **Marketing.** The acquisition cost per order, also called cost per acquisition or CPA.
8. **Plan and apps.** The monthly subscriptions, divided across your monthly orders.

Turn on the optional returns block and the tool computes the returns cost as your return rate times the sum of return shipping and the restocking loss (the percent of product cost written off on a returned item). A 5% return rate with \$6 of return shipping and 20% restock loss on a \$13.50 product adds about 44 cents to every order's cost, whether that order is returned or not, because you are provisioning across all of them.

## Shopify plan and payment fees, explained

Shopify's current plan lineup is Basic, Grow, Advanced, and Plus. The mid plan was renamed to Grow, so if you have seen it called "Shopify" or "Standard" in an older guide, that is the same tier. Each plan pairs a monthly subscription with a Shopify Payments card rate. Higher plans cost more per month but charge a lower rate per sale.

| Plan | Monthly (US) | Shopify Payments online card | Third-party gateway fee |
|------|--------------|------------------------------|-------------------------|
| Basic | \$39 | 2.9% + \$0.30 | 2.0% |
| Grow | \$105 | 2.7% + \$0.30 | 1.0% |
| Advanced | \$399 | 2.5% + \$0.30 | 0.6% |
| Plus | from \$2,300 | about 2.15% + \$0.30 (negotiated) | 0.2% |

These are Shopify's published US figures as of 2026 and are the editable defaults in the tool. If you are on annual billing, a legacy rate, a negotiated Plus contract, or outside the US, open the Advanced fees panel and override any value. The defaults are a convenience, not a quote, and non-US region presets are starting points you should confirm against Shopify's local pricing page.

One rule matters most: the **third-party gateway fee applies only when Shopify Payments is off.** When you use Shopify Payments, that surcharge is zero and the tool sets it to zero automatically. When you switch to an external gateway, Shopify adds its transaction fee on top of whatever the outside processor charges to run the card, so your real cost is the surcharge plus the gateway's own rate.

A worked example keeps it concrete. On a \$50 online sale on Basic with Shopify Payments, processing is 2.9% of \$50 plus \$0.30, which is \$1.45 + \$0.30 = \$1.75. Switch that same sale to a third-party gateway and Shopify adds 2.0% of \$50, another \$1.00, before the external processor's own fee.

## When to upgrade your Shopify plan

Because a higher plan trades a bigger subscription for a smaller card rate, there is always a monthly order volume where the upgrade starts to pay for itself. Below that volume the cheaper plan wins; above it the pricier plan wins. This is the plan-crossover question, and it is the one most calculators ignore.

The tool computes it directly. It holds your product constant, works out each plan's contribution per order using that plan's card rate, and finds the volume where the extra subscription is covered by the lower fees. The math is the difference in monthly price divided by the difference in contribution per order. It then tells you, in plain language, roughly when Grow overtakes Basic and when Advanced overtakes Grow, and it highlights the cheapest plan at your current volume. If a plan never wins at your product's margin, the tool says so instead of showing a nonsense number.

Read the plan-crossover chart the same way: three lines for monthly profit against monthly order volume, with a marker at your current volume. Where the lines cross is where the recommended plan changes.

## Break-even CPA and break-even ROAS

Ad platforms speak in CPA and ROAS, so the break-even block does too.

- **Break-even CPA** is the most you can pay to acquire one order and still break even. It is the order's contribution before any acquisition cost is applied. Spend less than this to win the order and you profit; spend more and you lose money on it.
- **Break-even ROAS** is your net revenue divided by the break-even CPA, shown as a multiple like 2.13x. Any real return on ad spend above the break-even figure is profitable at your current price and cost stack.
- **Break-even price** is the selling price at which net profit is exactly zero, solving for price while the revenue-based fees scale correctly. It is the floor you cannot discount below without losing money on the order.

These three numbers turn a static margin into an operating rulebook. If your break-even ROAS is 2.13x, you know at a glance that a campaign running at 3x is safe and one running at 1.8x is burning cash.

## What is a good profit margin for a Shopify store?

The verdict badge uses a common rule of thumb: a net margin of 20% or more per order reads as healthy, 5% to 20% as thin, and below 5% or negative as a loss. Treat this as a starting point, not a law. Net margins vary widely by category, price point, and how heavily you lean on paid acquisition. A high-ticket, low-return-rate product can run comfortably at a lower percentage because the absolute dollars are large, while a cheap impulse item may need a fat margin to survive its shipping and processing costs. Use the badge to spot orders that need attention, then judge the actual dollars against your own targets.

## Shopify fee calculator vs Shopify profit calculator

These two tools answer different questions, and it is worth being precise about which you need.

The **Shopify fee calculator** works out only Shopify's cut on a single sale: the payment processing fee, plus a third-party surcharge if you use an external gateway. Its output is your net payout, the money Shopify deposits.

The **Shopify profit calculator** on this page treats that fee as one input among many. It then subtracts your product cost, shipping, fulfillment, returns, ads, and subscriptions to show what is actually left as profit and margin. In short, the fee calculator tells you what Shopify keeps; the profit calculator tells you what you keep. Run the fee calculator when you only care about the payout on one sale, and run this profit calculator when you want the full picture per order and per month.

## How to use this calculator

Enter your selling price and unit costs, add your per-order shipping, fulfillment, and ad cost, and set your monthly orders and app spend so the subscriptions get spread correctly. Pick your Shopify plan and region, and toggle Shopify Payments on or off to match how you take money. Turn on the returns block if returns are a real cost for you. The results update live: net profit per order, the full cost breakdown, the profit waterfall, break-even CPA, ROAS and price, the plan comparison, and your projected monthly profit.

Everything runs in your browser. Use the share button to copy a permalink that reopens with your exact inputs, copy a text summary for a spreadsheet or a supplier, or export the full breakdown as a CSV. Nothing is sent to a server, and there is no signup and no watermark. This is a planning tool, not accounting, tax, or GAAP advice, so confirm anything you file with a professional.

## Frequently asked questions

### How is net profit per order calculated on Shopify?

Start with the net revenue after any discount, then subtract every cost of that order: product cost (COGS plus packaging), shipping, fulfillment, payment processing, a returns provision, ad cost, and the per-order share of your Shopify plan and app subscriptions. What is left is net profit per order.

### What is the difference between the Shopify fee calculator and this profit calculator?

The Shopify fee calculator works out only Shopify's cut on a single sale (the payment processing fee and any third-party surcharge). This profit calculator uses that fee as one input and then subtracts all your other costs to show the true net profit and margin left per order.

### What are the Shopify payment processing fees in 2026?

With Shopify Payments in the US, the online card rate is 2.9% + \$0.30 on Basic, 2.7% + \$0.30 on Grow, and 2.5% + \$0.30 on Advanced. If you use a third-party gateway instead, Shopify adds a transaction fee of 2.0% on Basic, 1.0% on Grow, and 0.6% on Advanced. Every rate in this tool is editable so you can match your exact plan.

### How do I know when to upgrade my Shopify plan?

A higher plan costs more per month but charges a lower card rate, so it pays off once you do enough volume. This calculator shows the break-even order volume where Grow overtakes Basic and where Advanced overtakes Grow, and highlights the cheapest plan at your current monthly orders.

### What is break-even CPA and break-even ROAS?

Break-even CPA is the most you can pay to acquire one order and still make zero profit. Break-even ROAS is your net revenue divided by that CPA, shown as a multiple. Any real ROAS above the break-even number means the order is profitable at your price and cost stack.

### Is a 20% net margin good for a Shopify store?

A net margin of 20% or more per order is a common rule-of-thumb target for a healthy ecommerce store, but it is guidance, not a rule. Benchmarks vary widely by category, price point, and how much you spend on ads. Treat the verdict badge as a starting point.

### Does the third-party fee always apply?

No. Shopify's third-party transaction fee applies only when you use an external payment gateway instead of Shopify Payments. When Shopify Payments is on, that surcharge is zero, and this tool turns it off automatically.

### Is this Shopify profit calculator free and private?

Yes. It is 100% free with no signup, and it runs entirely in your browser. Calculating, sharing a permalink, and exporting a CSV never send your numbers to a server. It is a planning tool, not accounting, tax, or GAAP advice.


---

<!--
  Writing rules for this article:
  - No em dashes anywhere. Use a hyphen.
  - Escape currency dollar signs as \$ (remark-math treats a bare $ as math).
  - Short sentences. First "## " heading is where page.tsx starts rendering.
  - The "### question" blocks must match the FAQ_ITEMS array in page.tsx.
-->

---
title: "Free Size Chart Generator - Clothing Size Chart Templates"
description: Build a branded product size chart, toggle cm and inch, and copy a self-contained HTML embed or download a PNG. Free, no signup, no watermark.
---

# Free Size Chart Maker

Build a clean product size chart in your browser and paste it straight onto your product page. Pick a category preset, edit the table, choose a theme, and export. This size chart maker is free, needs no signup, and never adds a watermark.

<!-- IMPORTANT: this first "## " heading must stay here. page.tsx uses extractBlogContent() which
     slices the markdown from the first "\n## " and drops everything above it (h1, intro). Without a
     "## " heading before it, the YouTube thumbnail below would never render on the page. -->

## How to use this size chart maker

[![Watch how to make a product size chart](https://img.youtube.com/vi/EGIp5tKV-QA/maxresdefault.jpg)](https://youtu.be/EGIp5tKV-QA)

This short video walks through the whole flow. You pick a category preset, edit the rows and columns inline, choose a theme and colors, add your logo, then export a self-contained HTML embed or a PNG. No signup and no watermark.

![Free size chart maker with the style controls on the left and a live preview of a red Modern Striped Acme Kids size chart on the right, showing Size, Age, Height, Chest, and Waist columns for toddler and youth sizes, plus theme, header color, accent color, font, and logo options](/images/tools/size-chart-generator/size-chart-example.webp)

## What this size chart generator does

A good size chart cuts returns and answers the one question every shopper asks before they buy. This tool is a size chart maker and size chart template builder in one. You do three things:

- Pick a category preset so the table starts full, not empty.
- Edit the rows, columns, and values inline until they match your product.
- Export a self-contained HTML embed and a PNG, with no watermark.

The chart is a simple table. Each row is a size like S, M, L or a numeric size. Each column is a measurement like Chest, Waist, or Length. The first column always holds the size label. Everything updates in a live preview as you type.

## How to make a size chart for clothing

Making a size chart template takes about five minutes.

1. **Pick a category preset.** Start with T-shirt, Men's shirt, Women's top, Dress, Pants, Shoes, Kids, Baby, Hat, Ring, Bra, Jacket, or Leggings. The table fills with sample rows, columns, and values that you replace with your own measurements.

![The Category preset grid with 13 buttons from T-Shirt to Leggings, with Dress selected and the live preview showing the Dress Size Chart with US sizes 2 to 12](/images/tools/size-chart-generator/step-preset.webp)

2. **Edit the table.** Rename column headers, edit any cell, and add, remove, or reorder sizes and columns. Cells accept ranges like 32-34 and fractions like 16 1/2.

![The Table section with the Size column header field, the Bust, Waist, Hip, and Length measurement columns with their ruler icons, and the grid of sizes and values below](/images/tools/size-chart-generator/step-table.webp)

3. **Set your units.** Toggle between inches and centimeters. The numbers convert for you.

![The Units section with Centimeters (cm) selected and the preview headers reading Bust (cm), Waist (cm), and Hip (cm) with the converted values](/images/tools/size-chart-generator/step-units.webp)

4. **Style it.** Choose a theme, set your header and accent colors, pick a font, and add a logo, title, subtitle, and footer note.

![The Style section with the four themes Minimal, Modern Striped, Classic Bordered, and Bold Header, the header and accent color pickers, the font menu, and the title, subtitle, and footer note fields](/images/tools/size-chart-generator/step-style.webp)

5. **Export.** Click Copy HTML embed to grab a paste-ready block, download a PNG, copy a plain table for Google Sheets, or print.

![The export buttons under the live preview: Copy HTML embed, PNG, Table, and Print, with the note that the embed has no external CSS or JS](/images/tools/size-chart-generator/step-export.webp)

## Size chart templates for each category

Each preset is a size chart template with its own size labels and measurement columns. This is what each one loads:

| Preset | Size labels | Measurement columns |
| --- | --- | --- |
| T-Shirt | S to 2XL | Chest, Length, Sleeve |
| Men's Shirt | S to 2XL | Neck, Chest, Waist, Sleeve |
| Women's Top | XS to XL | Bust, Waist, Hip |
| Dress | US 2 to 12 | Bust, Waist, Hip, Length |
| Pants / Jeans | 28 to 38 | Waist, Hip, Inseam |
| Shoes | US 6 to 11 | EU, UK, Foot Length |
| Kids | 2T to 7 | Age, Height, Chest, Waist |
| Baby | Newborn to 9-12M | Age, Height, Weight |
| Hat | S to XL | Head Circumference |
| Ring | US 5 to 10 | Diameter (mm), Circumference (mm) |
| Bra | 32A to 36D | Band, Cup, Underbust, Bust |
| Jacket / Coat | S to 2XL | Chest, Waist, Sleeve, Length |
| Leggings | XS to XL | Waist, Hip, Inseam |

The values in each preset are a starting point. Measure your own garments or fit model and type your numbers over them, because sizes differ from brand to brand.

### Dress size chart

The Dress preset puts US numeric sizes 2, 4, 6, 8, 10, and 12 in the first column, under the header US Size. Next to each size are four columns in inches: Bust, Waist, Hip, and Length. The sample row for a US 8 reads bust 35.5, waist 28, hip 38.5, and length 37.5. Bust, waist, and hip describe the body, while length describes the dress, so say that in the subtitle. If you sell in letter sizes, rename the size labels to XS, S, M, and so on.

### Shirt size chart

Three presets cover shirts. The **T-Shirt** preset is the default: sizes S to 2XL with Chest as a body range, such as 38-40 inches for a medium, plus garment Length and Sleeve. The **Men's Shirt** preset is for dress shirts, with Neck, Chest, Waist, and Sleeve ranges, such as a 15-15.5 inch neck for a medium. The **Women's Top** preset uses Bust, Waist, and Hip ranges for sizes XS to XL. Pick the one closest to your cut and delete the columns you do not measure.

### Bra size chart

The Bra preset lists six sizes, 32A, 32B, 34B, 34C, 36C, and 36D. Band and Cup are text columns, so they stay as typed when you switch units. Underbust and Bust are measurement columns in inches, and they convert. The sample row for 34B reads underbust 29-30 and bust 35-36, which becomes 73.7-76.2 and 88.9-91.4 after the switch to centimeters. Add a row for every band and cup you stock.

Some shops prefer a bra size grid, with bands down the side and cups across the top. You can build that layout in the same table: rename the size column header to Band, type 32, 34, 36 as the size labels, rename the measurement columns to the cup letters A, B, C, and so on, delete any you do not need, and type the bust range for each band and cup in the cells. Make sure every cup column shows the ruler icon if you want the bust ranges to convert to cm. The Band and Cup columns start as text, so click the icon on those two if you rename them to cup letters.

## What to put in a clothing size chart

Keep the chart short and useful. A shopper wants to find their size in a few seconds.

- **Size labels.** Use the labels your customers already know, such as S, M, L or numeric sizes.
- **Two or three key measurements.** For tops, chest or bust, length, and sleeve. For bottoms, waist, hip, and inseam. For shoes, foot length with US, EU, and UK equivalents.
- **Body vs garment.** Say whether the numbers are body measurements or flat garment measurements. This is the single most common source of confusion.
- **A fit note.** A short line like size up if you are between sizes prevents a lot of returns.

You do not need to list every possible measurement. A focused clothing size chart template beats an overloaded one.

The size also goes on the garment itself. The [care label maker](/tools/care-label-generator) prints it on the sewn-in label, next to the fibre content and care symbols.

## Types of size charts you can make

Not every product is measured the same way. A t shirt size chart, a shoe size chart, and a ring size chart each use different numbers, and shoppers expect the ones they already know. The presets below match the 13 categories in the tool, so pick the closest one and edit from there. Each section covers which measurements to include and how to take them.

### Clothing and apparel (t-shirts, tops, shirts, dresses)

The core measurements are chest or bust, waist, hip, length, sleeve, and shoulder. Take chest and bust around the fullest point with the tape level and snug but not tight. Waist goes around the natural waistline, hip around the widest part of the seat, and length runs from the shoulder seam down to the hem. The most important choice is body versus garment. Body measurements describe the person, while garment or flat measurements describe the item laid flat on a table. A flat garment measurement is often taken across one side, so a 20 inch flat chest is roughly a 40 inch body circumference. Always label which one you used, because mixing the two is the biggest cause of size confusion in a clothing size chart template.

### Pants, jeans, and leggings

Bottoms use waist, hip, inseam, and rise. Waist is measured around where the garment sits, which may be the natural waist or lower. Hip is the widest part of the seat. Inseam runs from the crotch seam to the hem along the inside of the leg and controls the length. Rise is the distance from the crotch seam up to the top of the waistband, and it separates a low rise from a high rise. For leggings, a stretch note helps, since the relaxed and stretched measurements differ.

### Shoes

Shoe charts are built from foot length. Have the shopper stand on a sheet of paper, mark the back of the heel and the tip of the longest toe, then measure the distance between the two marks. Measure both feet late in the day and use the larger one. Foot length maps to a size number, but US, UK, and EU numbering all differ, and exact conversions vary by brand, so it is safest to publish a foot length column in cm or inches alongside the US, UK, and EU sizes rather than rely on numbers alone.

### Rings

Ring size maps to the inside diameter and inside circumference of the band. To measure, wrap a strip of paper around the base of the finger, mark where it overlaps, and measure that length in millimeters to get the circumference, or measure the inside of a ring that already fits to get the diameter. A ring size chart usually lists the US or UK size next to the diameter and circumference in mm, since circumference equals diameter times pi.

### Bras

Bra size is a band plus a cup. The band comes from the underbust measurement, taken snugly around the ribcage directly under the bust. The cup comes from the difference between the bust measurement, taken around the fullest point, and the band. A larger difference means a larger cup letter. Listing both the underbust and bust ranges next to each size helps shoppers land on the right combination.

### Hats

Hats are sized by head circumference. Wrap the tape around the head about a finger width above the ears and eyebrows, where the hat will actually sit, and keep it level. Record the number in both cm and inches, since hat sizing labels vary by region and brand.

### Kids and baby

Children's items are sized by age, height, and weight rather than a single body measurement, and the ranges overlap. List the age band next to a height range and a weight range so parents can cross-check. Because kids grow quickly and fit between sizes often, a short note suggesting they size up helps parents choose.

## International size conversions (US, UK, EU)

Sizes are not universal. Alpha sizes like S, M, and L map to different body measurements across brands, and numeric sizes differ by region, so a US 8 is not a UK 8 or an EU 8. Shoes and apparel both carry this problem. Rather than trust a single label, the tool lets you add US, UK, and EU columns side by side so shoppers can find their region and read across to a measurement. The most reliable approach is to keep an actual measurement column, in cm or inches, as the anchor and treat the regional size numbers as a guide. That way the chart stays accurate even when two brands disagree on what a number means.

## Inches or centimeters

Show the unit your customers expect. Shoppers in the US and UK usually think in inches. Most of the rest of the world uses centimeters. The safest move is to publish both.

This tool converts for you. Type your numbers once in inches, then toggle to centimeters to produce a second chart from the same data. One inch equals 2.54 cm, and the tool rounds to one decimal so the numbers stay clean. Columns you mark as text, like Age or EU shoe size, are never converted by mistake.

### Convert a bust size from inches to cm

One inch is exactly 2.54 centimeters, so multiply the bust measurement in inches by 2.54. A 36 inch bust is 36 x 2.54 = 91.44 cm, which the chart shows as 91.4. A 34 inch bust is 86.36 cm, shown as 86.4. To go the other way, divide centimeters by 2.54. The same rule converts underbust, waist, hip, and every other column marked with the ruler icon. Band sizes such as 34 and cup letters are labels, not lengths, so they do not convert.

## How to add a size chart to Shopify

The HTML embed is the fastest way to get a chart onto a Shopify product page.

1. Build and style your chart, then click Copy HTML embed.
2. In Shopify, open the product and find the Description box.
3. Click the code icon labeled Show HTML in the description toolbar.
4. Paste the block where you want the chart to appear and save.

Because the embed carries its own inline styles, it renders the same on your theme, in a blog post, or inside an Etsy listing. There is no app to install and no external stylesheet to load. On WooCommerce, paste the same block into the product description in the Text or Code editor.

That embed is per product, which is fine until you have a lot of them. If you want one chart that attaches itself to every product of a given type, so new arrivals are covered without you touching them, that is a different setup using Shopify metaobjects. I built and tested it on a Dawn store and wrote up the whole thing, including the French translation and a size recommender: [how to add a size chart in Shopify without an app](/blog/shopify-size-chart). If you would rather show the chart in a popup next to the price, see [how to add a size chart popup in Shopify](/blog/shopify-size-chart-popup).

## Size chart maker vs a paid app

The Shopify App Store has hundreds of size chart apps, and many charge a monthly fee for a feature you can get here for free.

- **This size chart maker** is free, client side, and gives you a portable HTML block and a PNG you own. Nothing phones home, and there is no watermark.
- **A paid app** bundles auto-assignment, a fit quiz, and a support team behind one subscription. That is worth paying for if you want someone to call. It also adds a recurring cost and another script on your storefront.

Many merchants start with a free size chart template, paste the embed on their key products, and only move to a paid app once they have hundreds of listings.

## Tips for a size chart that reduces returns

- Measure a real sample and round to sensible values.
- Match the size labels on the chart to the labels on the product.
- Add one line telling shoppers how to measure themselves.
- Keep the same measurements across your catalog so charts look consistent.
- Publish the chart as an image and as text, so it is readable and also searchable.

## Frequently asked questions

### Is this size chart maker really free?

Yes. Every category preset, the cm and inch conversion, the styled themes, the HTML embed, and the PNG download are 100% free. There is no signup, no email, and no watermark on your size chart.

### How do I add a size chart to my Shopify or Etsy product page?

Build your chart, click Copy HTML embed, then paste the block into your product description. On Shopify, open the product, switch the description editor to Show HTML with the code icon, and paste. On Etsy or a blog, paste the block into any HTML section. The embed is self-contained, so it renders the same chart anywhere with no extra CSS or apps.

### Does the cm and inch toggle actually convert the numbers?

Yes. Switching units converts every numeric measurement using 1 inch = 2.54 cm and rounds to one decimal, then updates the unit suffix in each header. Ranges like 32-34 and fractions like 16 1/2 are converted without breaking. Columns you mark as text, such as Age or EU shoe size, are left exactly as typed.

### Can I make a t-shirt size chart with this tool?

Yes. The T-shirt preset is the default and pre-fills sizes S through 2XL with chest, length, and sleeve measurements. Edit any value, add or remove sizes and columns, switch to centimeters, and you have a t shirt size chart ready to paste onto a product page in a couple of minutes.

### What size chart templates are included?

There are 13 category presets: t-shirt, men's shirt, women's top, dress, pants and jeans, shoes, kids, baby, hat, ring, bra, jacket, and leggings. Each one loads real sample rows, columns, and values, so you never start from an empty grid. You can rename, add, remove, and reorder everything.

### Does it have dress, shirt, and bra size chart templates?

Yes. The Dress preset lists US sizes 2 to 12 with bust, waist, hip, and length. For shirts there are three presets: T-Shirt (chest, length, sleeve), Men's Shirt (neck, chest, waist, sleeve), and Women's Top (bust, waist, hip). The Bra preset lists sizes 32A to 36D with band, cup, underbust, and bust. Replace the sample values with your own measurements.

### How do I create a size chart for clothing?

Pick the preset closest to your garment, measure a real sample in each size, and type your numbers over the sample values. Keep two to four measurements that decide the fit, say whether they are body or garment measurements, and add a short fit note. Then copy the HTML embed into your product description or download a PNG.

### How do I convert a bust size from inches to cm?

Multiply the inches by 2.54, because one inch is exactly 2.54 centimeters. A 36 inch bust is 91.44 cm, and a 34 inch bust is 86.36 cm. In this tool, click Centimeters (cm) and every measurement column converts at once, rounded to one decimal, so 36 inches shows as 91.4.

### Should I list sizes in cm or inches?

List whatever your customers expect and, ideally, show both. Shoppers in the US and UK usually think in inches, while most of the rest of the world uses centimeters. This tool lets you flip between the two instantly, so it is easy to publish one chart in inches and a second in centimeters from the same data.

### Can I download the size chart as an image?

Yes. Click the PNG button to get a crisp raster of the styled chart, including your logo, title, table, and footer note. You can also copy a plain tab-separated table that pastes straight into Google Sheets, or use Print for a clean, chart-only page.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free SKU Generator
description: Create consistent, human-readable SKU codes for your product catalog. Build a SKU format, bulk-generate from a product list or a variation matrix, and export CSV. Free, no signup.
---

# Free SKU Generator

Build clean, consistent **SKU codes** for every product in your catalog. Set a format once, using a prefix, the product name, and attributes like color and size, then generate a single SKU, a whole pasted list, or every size and color combination at once. Copy any code, copy them all, or export a CSV that opens in Excel, Google Sheets, or Shopify. It is 100% free, runs entirely in your browser, and there is no signup and no watermark.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, video, etc.). -->

## How to Use the Free SKU Generator

[![Watch How It Works](https://img.youtube.com/vi/1TPJFKRY0Wg/maxresdefault.jpg)](https://youtu.be/1TPJFKRY0Wg)

This quick video walkthrough shows you how to set your SKU format, generate a single SKU, a pasted list, or a full variation matrix, and export them all as a CSV in seconds.

![Free SKU generator with a format panel showing an ACME prefix, 3 letters kept per word, and a dash separator, a live preview of the SKU ACME-TSH-S-RED, and a results table of generated SKU codes such as ACME-DEN-NAV-M for a Denim Jacket, ready to copy or export as CSV](/images/tools/sku-generator/sku-generator-example.webp)

## What Is a SKU?

A **SKU** (Stock Keeping Unit) is a short code you assign to each product or variant so you can track it across your store, your point of sale, and your reports. You create it yourself, so a good SKU is readable by your team. For example, `SHOE-RED-42` tells you at a glance that this is a red shoe in size 42.

A SKU is different from a barcode. You design and control a SKU, while a UPC or EAN barcode is a standardized number used by scanners and retailers. Most stores keep both: a readable SKU for the team and a barcode for the register.

## How to Create a SKU

Making a SKU takes about a minute with the generator above.

1. **Set a prefix (optional)**: Add a brand or store code like `ACME` that goes in front of every SKU.
2. **Choose characters per segment**: Decide how many leading letters each word contributes. The default is 3, so "Running Shoes" becomes `RUN`.
3. **Pick a separator**: Join segments with a dash, underscore, slash, dot, or nothing at all.
4. **Add attributes**: Add up to four attributes such as color, size, category, or material. Each one extends the SKU.
5. **Set the case and options**: Choose UPPERCASE, lowercase, or Normal, and turn on remove-vowels for shorter codes.
6. **Add a running number (optional)**: Turn on the sequential suffix to append a zero-padded number like `001`, `002`.
7. **Generate**: Add one SKU, paste a list of names, or build a variation matrix, then export the table as a CSV.

The live preview updates as you type, so you always see the format before you generate. A short reading of the format, such as `ACME-NAME-COLOR-001`, shows the structure at a glance.

## Single, Bulk, and Variation Modes

One keyword covers a few different needs, and this generator handles all of them.

- **Single**: Enter one product name and its attributes to add a single SKU to the table. Good for one-off products.
- **Bulk paste**: Paste many product names, one per line, and get one SKU per line, all at once. The shared attributes apply to every line, and the sequential number keeps counting.
- **Variation matrix**: Enter up to three axes, for example Size (S, M, L) and Color (Red, Blue), and the tool creates a SKU for every combination. Two axes with 3 and 2 values give you 6 SKUs, one per variant.

Every generated SKU is added to a results table with a running total. You can copy a single code, copy all of them, clear the table, or export a CSV.

## What Makes a Good SKU

A good SKU is short, consistent, and easy to read. Follow these rules and your whole catalog stays uniform.

- **Keep it short**: Aim for a code that is easy to type and scan by eye. Two or three characters per segment is usually enough.
- **Start with letters**: Begin with a letter, not a zero, so spreadsheets do not drop leading zeros.
- **Be consistent**: Use the same segment order and the same separator for every product.
- **Avoid spaces and symbols**: Stick to letters and numbers. This tool removes spaces, punctuation, and emoji automatically so every SKU is valid.
- **Do not encode data that changes**: Never bake the price or the supplier into a SKU, because those change over time.
- **Make it meaningful**: Encode stable traits like brand, category, color, and size so the code is readable at a glance.

## SKU vs Barcode vs UPC

These three terms are often mixed up, so here is the quick version.

- **SKU**: An internal code you design. It can carry meaning and is unique inside your own store.
- **UPC or EAN**: A standardized barcode number, often bought from GS1, used across retailers and scanners worldwide.
- **Barcode**: The scannable image of bars. It can encode a UPC, an EAN, or even your own SKU using a format like Code 128.

Once you have your SKUs, you can turn any of them into a scannable label with our free [Barcode Generator](/tools/barcode-generator), or print shelf tags with the built-in code using the [Price Tag Generator](/tools/price-tag-generator).

## A Few SKU Examples

Here are common formats you can build with the generator.

- **Name only**: "Yoga Mat" at 3 characters becomes `YOG`.
- **Prefix plus name**: Prefix `ACME` plus "Yoga Mat" becomes `ACME-YOG`.
- **Name plus attributes**: "Running Shoes" with Color Red and Size 42 becomes `RUN-RED-42`.
- **Compact with remove-vowels**: "Shoes" becomes `SHS` instead of `SHO`.
- **With a running number**: Add a 3-digit suffix to get `RUN-RED-42-001`, then `-002`, and so on.

There is no cost for any of this. You can generate and export as many SKUs as you like for \$0.

## Frequently Asked Questions

### What is a SKU?

A SKU (Stock Keeping Unit) is a short, unique code you assign to each product or product variant so you can track it in your inventory, point of sale, and reports. Unlike a barcode number, a SKU is created by you and is meant to be readable by your team, for example SHOE-RED-42.

### How do I create a SKU?

Pick a consistent format made of segments. A common pattern is an optional prefix, the product name, one or two attributes like color and size, and an optional running number. This tool builds that format for you: set the rules once, then generate one SKU or hundreds at a time.

### Is this SKU generator free?

Yes, it is 100% free with no signup and no watermark. Everything runs in your browser, so your product names never leave your device. Generate as many SKUs as you want and export them as a CSV file.

### Can I bulk-generate SKUs?

Yes. Use Bulk paste to drop in a list of product names, one per line, and get one SKU per line. Or use the Variation matrix to enter axes like Size (S, M, L) and Color (Red, Blue) and generate a SKU for every combination automatically.

### What is the difference between a SKU and a barcode or UPC?

A SKU is an internal code you design and control, so it can carry meaning like brand, color, and size. A UPC or EAN barcode is a standardized number, often bought from GS1, used by retailers and scanners worldwide. Many stores keep both: a readable SKU for the team and a barcode for the register. You can turn a SKU into a scannable code with our Barcode Generator.

### What makes a good SKU?

Keep it short, consistent, and human-readable. Start with letters, not zeros, avoid spaces and special characters, use one separator throughout, and do not encode data that changes often like price. This tool sanitizes text and applies your rules to every SKU so the whole catalog stays uniform.

### Can I add a sequential number to each SKU?

Yes. Turn on the sequential number suffix, set a start value and the number of digits, and each generated SKU gets a zero-padded, auto-incrementing number, for example 001, 002, 003. It increments across every row you generate until you clear the table.

### Can I export the SKUs to Excel or Google Sheets?

Yes. Press Export CSV to download a spreadsheet-ready file whose columns match the on-screen table (item, attributes, and the generated SKU). Open it in Excel, Google Sheets, or import it into Shopify or your inventory system.


---

---
title: SMS QR Code Generator
---

<!-- IMPORTANT: This ## heading must stay the first "## " heading in the file. page.tsx uses
     extractBlogContent() which slices the markdown from the first "\n## " and discards everything
     above it. Without it, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free SMS QR Code Generator

[![Watch How It Works](https://img.youtube.com/vi/pzdGaHqFs0M/maxresdefault.jpg)](https://youtu.be/pzdGaHqFs0M)

This quick video walkthrough shows you how to enter a phone number, add an optional pre-filled text message, watch the QR code update live, and download a print-ready PNG or SVG in seconds.

## Turn a scan into a ready-to-send text message

An SMS QR code is the shortest path between a printed surface and a conversation. Someone points their phone at the code, the messaging app opens with your number already in the To field and a starter message already typed, and all they have to do is tap send. There is no number to copy down, no app to install and no form to fill in. For a store, a market stall, an event booth or a product insert, that removes almost every reason a customer would not get in touch.

This tool builds that code entirely in your browser. You type a phone number, optionally add a message, and the QR updates live. When it looks right, download it as a PNG for screens or an SVG for print. Nothing is uploaded, there is no account to create, and there is no watermark on the finished code.

## What an SMS QR code actually contains

A QR code is just a way of storing text as a pattern of squares. What makes a code an SMS code rather than a link is the exact text it stores. This tool writes the widely supported `sms:` format:

```
sms:+1234567890?body=Hello%2C%20I%27d%20like%20to%20know%20more
```

Three things are worth understanding in that string:

- `sms:` is the scheme. When a phone reads text that begins with `sms:`, it knows to open the messaging app rather than a browser, in the same way `tel:` triggers a call and `mailto:` opens email.
- `+1234567890` is the recipient. Keep the country code so the number works for people scanning from anywhere.
- `?body=...` is the optional pre-written message. The text is URL-encoded, which is why the spaces show up as `%20` and a comma as `%2C`. That encoding is what lets punctuation and spaces survive the scan intact. You never type the encoding yourself; the tool applies it when it builds the code.

Because the whole message is stored inside the code, the code does not point at any server and does not expire. It keeps working for as long as the number on it is in service.

## Pre-fill the number and the message

The two fields in the tool map straight onto the two parts of the payload.

The **phone number** is the only part a working code needs. Enter it with the country code so it is unambiguous. On scan, this becomes the recipient of the draft text.

The **message** is optional but is where most of the value is. A pre-written body means the customer does not have to think of what to say. That is what powers the classic text-to-join and review-request patterns: the body already reads `JOIN` or `I'd like to leave a review`, and the customer simply confirms and sends. Leave the field blank and the code still works; it just opens an empty message to your number.

As you type in either field, the preview redraws immediately, so you can confirm the code is generating before you commit to a design. Use the Fill example button to drop in a realistic number and message if you want to see the shape of a finished code first.

## Where SMS QR codes earn their place

- **Feedback and reviews.** Print a code on the receipt or the table with a body such as `I'd like to leave a review`. The customer scans while the experience is fresh and is one tap from messaging you.
- **Text-to-join campaigns.** Contests, loyalty programs and SMS lists usually work by texting a keyword to a number. An SMS code puts that keyword and number into the message for the customer, so the drop-off from mistyped keywords disappears.
- **Support and questions.** A shelf tag or packaging insert that reads scan to text our team turns a moment of confusion into a conversation instead of a lost sale.
- **Lead capture at events.** A booth poster with an SMS code lets a passer-by start a thread with your team without handing over their details on a clipboard.

In every case the win is the same: the friction of typing a number and composing a first message is gone, and the customer keeps full control because nothing sends until they tap send.

## How iPhone and Android handle SMS codes

On an iPhone, the Camera app has read QR codes since iOS 11 in 2017. Point it at an SMS code and a banner offers to open Messages with the number and body filled in. On Android, the camera or Google Lens does the same, opening whichever app is set as the default for text messages. The draft is prepared identically on both; the only difference is which messaging app opens.

One point to be clear about: scanning never sends the text on its own. It only opens the composer with everything prepared. The person always sees the draft and decides whether to send it. That is a feature, not a limitation, because it keeps the customer in control and keeps you on the right side of messaging etiquette.

## Design and print tips

The generator includes the same styling controls as the main QR tool: colours for the dots and corners, dot and corner shapes, quick templates, spacing and an optional centre logo. A few habits keep a code scannable once it leaves the screen:

- **Keep strong contrast.** A dark code on a light background reads fastest. Very light dots or a busy background photo behind the code are the usual reasons a scan fails.
- **Do not shrink it too far.** Around 2 to 3 cm square is the practical minimum on something held at reading distance, such as a receipt or a business card. Give it more room on a poster or a window seen from across a room.
- **Print from the SVG.** SVG is vector artwork and stays crisp at any size, so it is the right choice for anything going to print. Use the PNG for screens, email footers and social posts.
- **Test before you print a batch.** Scan your finished code with your own phone and confirm the number and message are exactly what you expect. It takes a few seconds and saves reprinting a run of flyers.

## Frequently asked questions

### How does an SMS QR code work?

An SMS QR code encodes a short piece of text in the format sms:NUMBER?body=MESSAGE. When a phone camera reads it, the phone recognises the sms: prefix and opens the messaging app with that number in the To field and the pre-written text already in the message box. Nothing is sent automatically; the person taps send when they are ready, so they stay in control of what leaves their phone.

### Does scanning the code send the text automatically?

No. Scanning only opens the messaging app with the recipient and the draft message filled in. The person always reviews the text and taps send themselves. This is deliberate: it removes the friction of typing a number and a message, without ever sending anything on someone's behalf.

### Will an SMS QR code work on both iPhone and Android?

Yes. iPhones have read QR codes from the Camera app since iOS 11 in 2017, and current Android phones scan them from the camera or Google Lens. On both, a code that starts with sms: opens the default messaging app with the number and message prepared. Behaviour is slightly different between platforms: iPhone opens Messages, and Android opens whichever app is set as the default for text messages.

### Can I pre-fill the message text as well as the number?

Yes. Fill in the Message field and it is written into the code after the number, URL-encoded so spaces and punctuation survive the scan. This is what makes SMS codes useful for keyword campaigns and review requests: the customer scans, and a message such as JOIN or a review link is already typed, so all they do is tap send.

### Do I need an app to scan it, and does it need an internet connection?

No app and no internet to scan. On a reasonably recent iPhone or Android the built-in camera reads the code and opens the messaging app. The code contains the number and the message directly rather than pointing at a server, so scanning works offline. Sending the text itself uses the phone's normal SMS service, which does need cellular signal.

### What can I use an SMS QR code for?

Common uses are feedback and review requests, text-to-join contests and loyalty sign-ups, quick support (scan to text our team), and lead capture at events or on packaging. Because the recipient number and a starter message are baked in, an SMS code turns a printed poster, receipt or shelf tag into a one-tap way to start a conversation.

### What size should I print an SMS QR code?

Around 2 to 3 cm square is the practical minimum on something held at reading distance, such as a receipt or a business card, and bigger is better on a poster, table tent or shop window seen from further away. Download the SVG for print because it is vector artwork and stays sharp at any size, and use the PNG for screens and social posts. Keep a dark code on a light background for reliable scanning.


---

<!--
Writing rules for this file:
- No em dashes. Use a regular hyphen.
- No AI filler words (per CLAUDE.md). State the point directly.
- Escape any currency dollar sign as \$ (remark-math), though this article has none.
- Short sentences. The first "## " heading is where page.tsx starts slicing.
- The "## Frequently asked questions" answers must stay byte-identical to the
  FAQ_ITEMS array in page.tsx.
-->

---
title: Free Soap Label Maker - Custom Soap Labels & INCI Ingredients
description: Design custom soap labels free, build an INCI ingredient list in the right order, and download a print-ready PDF, PNG or SVG. No signup, no watermark.
---

## Make custom soap labels in minutes

[![Watch how the free Soap Label Maker works](https://img.youtube.com/vi/yy1FiNSavWc/maxresdefault.jpg)](https://youtu.be/yy1FiNSavWc)

This free soap label maker gives handmade soap and bath-and-body sellers a fast way to build print-ready labels without a design account or a subscription. You pick a shape and size, fill in the product details, add your ingredients, choose a template, and download the file. It runs entirely in your browser, so nothing you type or upload leaves your computer, and there is no watermark on any export.

Most tools for soap labels are one of two things. They are either a printer that sells you blank sheets, or a design gallery that gives you pretty artwork and leaves every regulated detail to you. This one is built the other way around. The design is the easy part. The value is that it handles the parts that are easy to get wrong: the INCI ingredient order, the saponified oil names, the true-soap versus cosmetic distinction, and the dual-unit net weight. You get custom soap labels that look the part and carry the right information.

You can make a single label or a whole range at once. Single mode gives you one label you can download as a transparent PNG, a true-size PDF, or an editable SVG for a cutting machine. Bulk mode merges one design across a list of scents and tiles them onto a US Letter or A4 sheet with cut guides, which is how you print a batch of soap bar labels on one page.

## What goes on a soap label

A few elements belong on almost every soap label sold in the United States. The tool keeps a short checklist beside the preview so you can see at a glance what is present and what is still missing.

- The identity, which is what the product actually is, such as "Cold-process bar soap" or "Liquid hand soap".
- The net quantity of contents, in both US and metric units.
- Your name and place of business, which is the business responsible for the soap plus at least a city, state and zip.
- The ingredient declaration, in INCI order, when the product is sold as a cosmetic.

The first three are always shown in the form and always graded by the checklist. The ingredient declaration is only required in one of the two product modes, which is the next thing to understand.

## True soap vs cosmetic: do you need an ingredient list?

This is the question that trips up new soap sellers, and it is why the tool has a product-type toggle. The FDA guidance called "Is It a Cosmetic, a Drug, or Both? (Or Is It Soap?)" draws the line.

A true soap is a product where the bulk of the non-volatile matter is the alkali salts of fatty acids, and it is labeled and sold only as soap for cleaning. That product is regulated by the Consumer Product Safety Commission, not the FDA, and it does not have to carry an FDA cosmetic ingredient list.

The moment you make a cosmetic claim, the picture changes. If you sell the same bar as moisturising, deodorant, exfoliating or a beauty product, it is an FDA cosmetic. A cosmetic must declare its ingredients in INCI order under 21 CFR 701.3. And if you make a drug claim such as antibacterial or treating eczema, it becomes a drug, which is a bigger subject this tool does not cover.

Flip the toggle to "Cosmetic" and the ingredient declaration becomes a required checklist item, and the INCI list prints on the label. Flip it to "True soap" and the requirement drops away, though you can still choose to list your ingredients if you want to. The net quantity and your name and place of business are required either way.

## How to build a soap ingredients label template with INCI order

This is the part the tool does that a design gallery cannot. A cosmetic ingredient declaration is not a random list. Under 21 CFR 701.3 it is written in descending order of predominance using INCI names. Ingredients present at more than 1 percent come first in weight order. Ingredients at 1 percent or less, and colorants, may follow in any order after them.

To build a soap ingredients label template, add each ingredient by its common name and give it a batch weight or percent. The tool maps the common name to its INCI name, sorts the whole list into the right order, and drops the lye because it is consumed in the reaction. Colorants are moved to the end and printed with a "(+/- CI ...)" may-contain note, which is how a range of shades that share one label is declared.

Here is a worked example. Say your recipe is olive oil 40, coconut oil 25, palm oil 20, shea butter 10 and castor oil 5 by batch weight, plus water, lye, a 3 percent fragrance and a mica colorant. With the saponified toggle on, the tool produces this exact ordered declaration:

Sodium Olivate, Sodium Cocoate, Sodium Palmate, Aqua, Sodium Shea Butterate, Sodium Castorate, Fragrance (Parfum), Mica (+/- CI 77019)

Notice what happened. The oils and water are in descending weight order. The lye is gone. The fragrance sits where its 3 percent weight puts it. The mica colorant is last with its Colour Index number. You did not have to remember any of that, and you cannot get the order wrong by hand once the weights are in.

## Saponified oils and the Sodium Olivate names

When an oil is turned into soap it reacts with lye, and the finished bar no longer contains the oil or the lye. It contains their salt. That is why a proper soap ingredients label uses the saponified names rather than the raw oils. Olive oil becomes Sodium Olivate. Coconut oil becomes Sodium Cocoate. Palm oil becomes Sodium Palmate. Shea butter becomes Sodium Shea Butterate. Castor oil becomes Sodium Castorate. Water is listed as Aqua, and the sodium hydroxide is not listed at all.

The tool ships with the common soaping oils and butters already mapped to both their saponified salt and their raw botanical INCI name, plus the usual additives like kaolin clay, colloidal oatmeal, goat milk and vitamin E, the common essential oils, and the mineral colorants. A saponified toggle sits on each oil row. Leave it on for a cold-process or hot-process bar, or switch it off if you prefer to list the raw botanical names, for example on a melt-and-pour base where the oils were saponified by someone else.

## Net weight on soap labels

Every soap needs a net-quantity-of-contents declaration on the front, or principal display panel. This comes from 21 CFR 701.13 and the Fair Packaging and Labeling Act, and it has to appear in both US customary and metric units. A solid bar is declared by weight. A liquid soap is declared by fluid measure.

Hand-typing the second unit is where the arithmetic errors creep in. This tool computes it. The conversions are exact: 1 ounce is 28.349523125 grams, and 1 fluid ounce is 29.5735295625 millilitres. A 4.5 ounce bar prints as 4.5 oz (128 g). A 5 ounce bar prints as 5 oz (142 g). An 8 fluid ounce pump prints as 8 fl oz (237 mL). Type the number you sell by, pick the unit, and the paired unit lands correctly every time.

## Soap bar labels: shapes and sizes

The tool offers five label types, and each one exports at its true physical size so a PDF prints to scale.

- Bar rectangle, the classic soap bar label, with a corner radius you can set.
- Round, for a circular label or sticker on the top of a bar.
- Oval, for an apothecary look.
- Belly band, which wraps all the way around the bar.
- Bottle or tube, a tall label for liquid soap.

For a bar front label, a 3.5 by 2 inch rectangle or a 2.5 inch round leaves clear margins on a standard cut bar. Larger and smaller presets are one click away, and there is a custom size for anything in between. Every size tiles onto the bulk sheet, so a run of soap bar labels comes off one page.

## Belly bands for soap bars

A belly band is the strip of paper that wraps around a naked bar. Its size is not a guess. The band width is the bar girth plus a glue overlap, where the girth is 2 times the width plus the thickness. The band height is the strip that runs along the length of the bar.

Enter your bar length, width and thickness, set the overlap and the band height, and the calculator sizes the band for you. A 3.5 by 2.5 by 1 inch bar with a quarter-inch overlap needs a band 7.25 inches wide. The belly-band type also gives you a real two-panel layout, so the design sits on the front and the full INCI ingredient list sits on the panel that wraps around the back. That is the natural place to put a long ingredient declaration when the bar itself is too small for it.

## Avery soap labels and printing sheets

You do not need to buy special stock to use this. If you print on Avery soap labels, or OnlineLabels blanks, or any other pre-cut sheet, set the label to the shape and size of your blanks or enter a custom size, then switch to bulk mode. The sheet tiles your design across a US Letter or A4 page with cut guides between the tiles.

The one rule that matters when you print is scale. The PDF page is the true size of your label, so print it at 100 percent with no fit-to-page. Fit-to-page quietly shrinks everything by a few percent, and then the labels no longer line up with the die cuts on your sheet. At 100 percent they land where they should.

## Soap label template ideas and designs

The tool ships fourteen soap label templates, and they are real layouts rather than recolours of one. Minimal Apothecary is the restrained default, a centred serif between two hairlines. Kraft Botanical adds a line-art sprig border on a warm kraft ground. Modern Sans is a clean left-aligned block with the full spec stack. Luxe Black and Gold is a dark ground with metallic rules. There is a Monogram Seal, a Vintage Label Frame, a Terracotta Arch, a soft Botanical Watercolour, a Bold Type Stack, a Natural and Clean layout that leads with the ingredients, a Seasonal motif, a Bar Belly-Band lockup, an Ingredient-Forward template where the INCI list is the hero, and a Blank Outline that prints just the die line so you can lay your own artwork over it.

Every template works on every label type, and each one auto-fits its text so nothing overflows the cut, whether you are on a tiny 1.5 inch round or a wide belly band. Pick a colour theme, choose a font, and if you want your own palette there is a custom accent and text colour. Add a logo on the templates that have a place for one, and it appears in the preview and every export while staying on your machine.

## Bottle and tube labels for liquid soap

Liquid hand soap and body wash use the bottle or tube label type. It is a tall rectangle sized to the container, and it switches the net quantity to fluid measure automatically, so you declare 8 fl oz (237 mL) rather than a weight. Everything else works the same: the same templates, the same INCI ingredient list, the same true-soap and cosmetic toggle, and the same true-size PDF, PNG and SVG exports.

## A note on what this tool is

This is guidance for building a complete, tidy label, not legal advice and not a compliance certificate. There is no compliant badge anywhere on it, on purpose. It formats the elements described in public FDA and FTC sources, and it states which source each element comes from so you can check it yourself. What it will not do is decide whether your specific claims make your product a soap, a cosmetic or a drug, or cover EU and UK labelling, which are separate and larger subjects. You are responsible for verifying the rules for the market you sell into.

## Frequently asked questions

### Is this soap label maker free?

Yes. It is completely free, needs no signup, and adds no watermark. Design and download as many custom soap labels as you like as a true-size PDF, a transparent PNG, or an SVG, one at a time or tiled onto a US Letter or A4 sheet.

### Do I have to list ingredients on a soap label?

It depends on how the product is sold. The FDA guidance "Is It a Cosmetic, a Drug, or Both? (Or Is It Soap?)" draws the line: a true soap, where the bulk of the non-volatile matter is the alkali salts of fatty acids and it is sold only as soap for cleaning, is regulated by the CPSC rather than the FDA and does not have to carry an FDA cosmetic ingredient list. A cleanser sold with cosmetic claims such as moisturising, deodorant or beauty is an FDA cosmetic and must declare its ingredients. Use the true-soap and cosmetic toggle to switch which elements the checklist requires; the net quantity and your name and place of business are required either way.

### How do I write a soap ingredients label in INCI order?

A cosmetic ingredient declaration lists ingredients in descending order of predominance using INCI names, per 21 CFR 701.3. Ingredients present at more than 1% come first in weight order, then ingredients at 1% or less and colorants may follow in any order. This tool does the ordering for you: type each ingredient by common name with its batch weight, and it maps the name to INCI, sorts the list, and puts colorants last with a "(+/- CI ...)" may-contain note.

### What does saponified mean on a soap ingredients label?

When an oil is turned into soap it reacts with lye, so the finished bar no longer contains the oil or the lye - it contains their salt. The INCI-for-soap convention lists that salt: olive oil becomes Sodium Olivate, coconut oil becomes Sodium Cocoate, and palm oil becomes Sodium Palmate. Water is listed as Aqua, and the sodium hydroxide is not listed at all because it is consumed in the reaction. Turn the saponified toggle off if you would rather list the raw botanical oil names instead.

### What net weight goes on a soap label?

A soap label carries a net-quantity-of-contents declaration on the principal display panel, per 21 CFR 701.13 and the Fair Packaging and Labeling Act (15 U.S.C. 1453), in both US customary and metric units. A bar is declared by weight and a liquid soap by fluid measure. This tool computes the paired unit for you at exactly 1 oz = 28.349523125 g and 1 fl oz = 29.5735295625 mL, so a 4.5 oz bar prints as 4.5 oz (128 g) and an 8 fl oz pump prints as 8 fl oz (237 mL).

### What size should soap bar labels be?

For a bar front label, a 3.5 by 2 inch rectangle or a 2.5 inch round leaves clear margins on a standard cut bar. A belly band is not a guess: its width is the bar girth, which is 2 times the width plus thickness, plus a glue overlap, and its height is the strip that runs along the bar length. A 3.5 by 2.5 by 1 inch bar with a quarter-inch overlap needs a 7.25 inch band. For a liquid soap the bottle or tube label is a tall rectangle sized to the container.

### Can I make Avery soap labels with this?

Yes. Set your label to the shape and size of your Avery blanks, or enter a custom size, then use the bulk mode to tile the design across a US Letter or A4 sheet with cut guides. The PDF is a true-size page, so print it at 100% scale with no fit-to-page and the labels line up with your sheet. It works the same way for OnlineLabels blanks or any other pre-cut sheet.

### Does this guarantee my soap label is compliant?

No. This is guidance for building a complete label, not legal advice and not a compliance certificate, so there is no compliant badge anywhere on it. It formats the elements described in the FDA guidance "Is It a Cosmetic, a Drug, or Both? (Or Is It Soap?)", the cosmetic ingredient rule at 21 CFR 701.3, the net-quantity rules at 21 CFR 701.13 and the Fair Packaging and Labeling Act, the name-and-place rule at 21 CFR 701.12, and the INCI-for-soap convention. It does not cover drug claims such as antibacterial or eczema, and it does not cover EU or UK labelling. You are responsible for verifying the rules for the market you sell into.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Square Fee Calculator
description: Work out Square's processing fee for every acceptance method and your exact net deposit, add your cost for profit and margin, or reverse-solve the charge for a target payout.
---

# Free Square Fee Calculator

Know exactly what lands in your account before you take a payment. Our free **Square fee calculator** takes the amount you charge and the way the card is accepted, then shows the processing fee and your exact net deposit. Add your item cost and it also shows profit and margin. The same engine covers Etsy, Stripe, Shopify, PayPal, and more, so you can compare what each one leaves you in seconds. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Square Fee Calculator

[![Watch how the free Square Fee Calculator works](https://img.youtube.com/vi/gbN1mcMZb04/maxresdefault.jpg)](https://youtu.be/gbN1mcMZb04)

This quick walkthrough shows the calculator in action. For Square, choose in-person, online, in-app API, invoice, or keyed to load the matching rate, then see your net payout, or reverse-solve the price to hit a target.

The tool has two modes:

1. **Charge to payout**: Enter the amount you charge and pick how the card is taken. The calculator shows the processing fee and the net amount deposited to your account. Add your item cost to see profit and margin too.
2. **Net to charge**: Enter the payout you want to keep. The calculator solves for the charge that leaves you exactly that much after Square's fee.

A **How the card is taken** selector switches between in-person, online, in-app API, invoice, and manually keyed rates, because Square prices each one differently. The tool opens on Square, but the platform dropdown lets you compare the same amount against Stripe, Etsy, or any other supported platform. Square's official fee page is linked with the date we checked it.

## How Square Fees Work in the US

Square is a payment processor, not a marketplace, so it charges one fee to move money from a card into your account and takes no separate selling cut. What makes Square different from a flat processor is that the rate depends on how the payment is accepted:

- **In person** (tap, dip, or swipe): **2.6% + \$0.15**
- **Online or ecommerce checkout**: **3.3% + \$0.30**
- **In-app payments through Square's API**: **2.9% + \$0.30**
- **Square Invoice** paid by card: **3.3% + \$0.30**
- **Manually keyed** or card on file: **3.5% + \$0.15**

Each rate has a percentage plus a fixed fee. The percentage scales with the charge; the fixed part does not, so it weighs more heavily on small payments. Note that Square's standard online checkout is 3.3% + \$0.30; the lower 2.9% + \$0.30 rate applies only to in-app payments you build with Square's payment API, and Square bills invoices at the same 3.3% + \$0.30 online rate.

## Why the Rate Changes by Method

The pricing tracks fraud risk. A card physically present and tapped is the safest, so it earns the cheapest 2.6% + \$0.15 rate. A number typed in by hand carries the highest risk of fraud or a chargeback, so keyed payments cost the most at 3.5% + \$0.15. Standard online checkout and invoices sit near the top at 3.3% + \$0.30, while in-app payments taken through Square's API run cheaper at 2.9% + \$0.30. The practical takeaway: whenever you can take a card in person, you keep more of the sale.

## A Worked Example

Take a **\$40** sale several ways:

- In person at 2.6% + \$0.15: fee **\$1.19**, you keep **\$38.81**
- In-app API at 2.9% + \$0.30: fee **\$1.46**, you keep **\$38.54**
- Online or invoice at 3.3% + \$0.30: fee **\$1.62**, you keep **\$38.38**
- Keyed at 3.5% + \$0.15: fee **\$1.55**, you keep **\$38.45**

The gap looks small on one \$40 sale, but across hundreds of transactions the method you default to adds up. The calculator prints the exact figure for any amount so you never guess.

## Fees the Calculator Does Not Include

The tool models Square's core per-transaction processing fee, which covers the vast majority of card payments. It does not add situational or subscription costs such as monthly software plans, chargeback fees, instant transfer fees, or custom rates negotiated for high-volume sellers. If any apply to you, add them on top and confirm the exact number on Square's fee page.

## Using the Reverse Mode

Most sellers know what they want to keep, not what to charge. Switch to the **Net to charge** tab, type the payout you want, and the calculator solves for the charge that nets exactly that after Square's fee for your chosen method. Because each rate has a fixed part, you cannot simply add the percentage back on; the tool handles the exact reconciliation and shows the breakdown so you can confirm it.

## Square vs Other Platforms

As a pure processor, Square's fee is often lower than a marketplace that bundles processing with a selling fee. Switch the platform dropdown to run the same charge through Stripe, PayPal, or a full marketplace like Etsy, and the calculator re-computes the breakdown for each. If you sell in person on Square and also online through a marketplace, comparing them side by side shows how much more of each sale you keep at your own counter.

## Frequently Asked Questions

The FAQ section on this page answers the common questions in full and is marked up as structured data so search engines can surface it. In short: Square's US rates are 2.6% + \$0.15 in person, 3.3% + \$0.30 for standard online checkout and invoices (2.9% + \$0.30 for in-app API payments), and 3.5% + \$0.15 keyed, there is no marketplace cut, and the reverse mode solves the charge you need to net a target. Always confirm the live rate for your account on Square's official fee page before you rely on it.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular hyphen (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

---
title: Free Stripe Fee Calculator
description: Work out Stripe's processing fee and your exact net payout, add your cost for profit and margin, or reverse-solve the charge amount so your payout hits a target.
---

# Free Stripe Fee Calculator

Know exactly what lands in your Stripe balance before you charge a card. Our free **Stripe fee calculator** takes the amount you charge, applies Stripe's real US processing fee, and shows the fee and your exact net payout. Add your item cost and it also shows profit and margin. The same engine covers Etsy, Shopify, Square, Depop, Mercari, Poshmark, Reverb, and PayPal, so you can compare what each one leaves you in seconds. It runs entirely in your browser. No signup is required.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## How to Use the Stripe Fee Calculator

[![Watch how the free Stripe Fee Calculator works](https://img.youtube.com/vi/gbN1mcMZb04/maxresdefault.jpg)](https://youtu.be/gbN1mcMZb04)

This quick walkthrough shows the calculator in action. Stripe works the same way: enter a charge to see the 2.9% + \$0.30 online fee (or 2.7% + \$0.05 in person) and your exact net, or reverse-solve the price for a target payout. Use the platform dropdown to switch.

The tool has two modes. Pick the one that matches what you already know:

1. **Charge to payout**: Enter the amount you charge the customer. The calculator shows the processing fee and the net amount that lands in your Stripe balance. Add your item cost to see profit and profit margin too.
2. **Net to charge**: Enter the payout you want to keep. The calculator solves for the charge amount that leaves you exactly that much after Stripe's fee, then shows the breakdown so you can confirm it reconciles.

A small **Payment method** selector lets you switch between an online card charge and an in-person charge taken through Stripe Terminal, because the two have different rates. The calculator opens on Stripe, but you can use the platform dropdown to compare the same amount against Etsy, Square, PayPal, or any other supported platform.

The tool links to Stripe's official pricing page with the date we checked it. Rates change and vary by country and card type, so treat the numbers as a fast, accurate starting point and confirm anything critical against the source.

## How Stripe Fees Work in the US

Stripe is a payment processor, not a marketplace. That means it charges one fee to move money from a customer's card into your account, and it does not take a separate selling or listing cut on top. Stripe's standard US pricing has two parts on every successful charge:

- A **percentage** of the charge amount.
- A **fixed fee** in cents, the same on every transaction no matter the size.

For a standard **online** card charge the rate is **2.9% + \$0.30**. For a card taken **in person** through Stripe Terminal the rate is lower, **2.7% + \$0.05**, because card-present payments carry less fraud risk. There is no monthly fee and no setup fee on Stripe's standard plan, so the per-charge fee is the whole cost for most sellers.

The percentage scales with the charge, but the fixed part does not. That single detail drives almost every decision about how to price and batch your payments.

## A Worked Example

Say you charge a customer **\$100** online.

- Percentage fee: 2.9% of \$100 = **\$2.90**
- Fixed fee: **\$0.30**
- Total Stripe fee: **\$3.20**
- Net payout: **\$96.80**

Take that same \$100 in person through Terminal at 2.7% + \$0.05 and the fee is \$2.75, leaving you \$97.25. The calculator prints this breakdown for any amount, so you never have to run the arithmetic by hand.

## Why the \$0.30 Fixed Fee Hurts Small Charges

On a big charge the flat \$0.30 barely registers. On a small one it dominates. Watch what happens as the charge shrinks:

- Charge \$100: fee \$3.20, or about **3.2%** of the payment.
- Charge \$20: fee \$0.88, or about **4.4%**.
- Charge \$5: fee \$0.45, or about **9%**.
- Charge \$1: fee \$0.33, or about **33%** of the payment.

The effective percentage climbs as the amount falls because the fixed fee is a bigger slice of a smaller pie. If you sell low-priced items or take lots of tiny payments, that is where your margin quietly leaks. Two common fixes: set a sensible minimum charge, or aggregate several small items into one larger transaction so the \$0.30 is paid once instead of many times.

## Fees the Calculator Does Not Include

The tool models Stripe's core per-transaction processing fee, which is what applies to the overwhelming majority of card charges. It does not try to guess situational fees that depend on your specific setup, including:

- **International cards**: charges on cards issued outside your country carry an extra percentage.
- **Currency conversion**: presenting or settling in another currency adds a conversion fee.
- **Instant payouts**: moving your balance out immediately, rather than on the standard schedule, costs extra.
- **Chargeback fees**: a disputed payment carries a fixed fee, refunded if you win the dispute.
- **Add-on products**: Stripe Billing, Tax, Radar advanced fraud tools, and similar products have their own pricing.

If any of those apply to you, add them on top of the figure here and confirm the exact number on Stripe's pricing page. Leaving them out keeps the core estimate clean and honest rather than burying a headline rate under assumptions that may not fit your account.

## Using the Reverse Mode to Set a Price

Most sellers know what they want to walk away with, not what to charge. The reverse mode is built for that. Switch to the **Net to charge** tab, type the payout you want to keep, and the calculator solves for the charge amount that nets exactly that after Stripe's fee.

This is the fast way to set an invoice total or a product price so your deposit lands on a round number. Because the fee has a fixed part, you cannot simply add 2.9% back on and be done; the tool handles the exact reconciliation for you and shows the breakdown so you can see the solved charge really does net your target.

## Stripe vs Other Platforms

Because Stripe is a pure processor, its fee is often lower than a marketplace that bundles processing with a selling fee. A marketplace like Etsy or Poshmark takes a listing or selling cut and then charges processing on top, so more comes out of each sale. Stripe, PayPal, and Square are the processing layer only.

That is exactly why comparing them side by side is useful. Switch the platform dropdown to run the same charge through Square (which changes rate by how the card is taken), PayPal, or a full marketplace, and the calculator re-computes the breakdown for each. If you sell through your own checkout on Stripe as well as on a marketplace, you can see in seconds how much more of each sale you keep by driving buyers to your own store.

## Frequently Asked Questions

### How does the Stripe fee calculator work?

Enter the amount you charge the customer. The calculator applies Stripe's US processing fee - 2.9% + \$0.30 for a standard online card charge, or 2.7% + \$0.05 if you switch to in-person (Terminal) - and subtracts it to show the net amount that lands in your Stripe balance. Add your item cost to also see profit and profit margin.

### What are Stripe's fees in the US?

Stripe's standard US pricing is 2.9% + \$0.30 per successful online card charge, with no monthly fee and no setup fee. Card-present payments taken through Stripe Terminal are 2.7% + \$0.05. There is no marketplace or selling fee because Stripe is a payment processor, not a marketplace. International cards and currency conversion carry extra percentages that are not included by default.

### How much does Stripe take on a $100 charge?

On a standard online \$100 charge, Stripe takes 2.9% (\$2.90) plus \$0.30, which is \$3.20 in total, leaving you \$96.80. Taken in person through Terminal at 2.7% + \$0.05, the fee is \$2.75, leaving you \$97.25. The calculator shows this breakdown line by line for any amount you enter.

### Why is the fixed $0.30 fee such a big deal on small charges?

The 2.9% is a small slice of a large charge but the flat \$0.30 is fixed no matter the size, so it dominates on tiny transactions. On a \$1 charge the fee is about \$0.33 - roughly a third of the payment. That is why aggregating small payments into fewer, larger charges, or setting a sensible minimum, protects your margin.

### What is the reverse mode for?

Switch to the reverse tab, type the net amount you want to keep, and the calculator solves for the charge amount that leaves you exactly that after Stripe's fee. It is the quickest way to set a price or an invoice total so your payout hits a round number after processing is deducted.

### Does this include Stripe's other fees?

The calculator models Stripe's core per-transaction processing fee, which is what applies to the vast majority of card charges. It does not add optional or situational fees such as international card surcharges, currency conversion, instant payouts, chargeback fees, or Billing and Tax product fees. Always confirm against the official pricing page for your exact setup.

### Are these Stripe rates current?

The rates are Stripe's published US standard pricing, and the tool links to stripe.com/pricing with the date we last checked it. Processing rates vary by country, card type, and product, and Stripe updates them from time to time, so treat the result as an accurate estimate and confirm the live figure on Stripe's pricing page before you rely on it.

### Is this fee calculator free?

Yes. It is 100% free, runs entirely in your browser, needs no signup, and lets you compare Stripe against Etsy, Square, Shopify, PayPal, and other platforms with the same breakdown.


---

<!--
Writing rules for this file:
- First "## " heading is the article start (page.tsx slices from there).
- Escape currency $ as \$ (remark-math).
- No em dashes. Use a regular hyphen.
- No filler words: honestly, genuinely, blocker.
- Keep sentences short. The "## Frequently asked questions" ### blocks must
  match the FAQ_ITEMS array in page.tsx word for word.
-->

---
title: Free Table Tent Template Maker
description: Design and print folded table tents, tent cards, and name tents. Choose a fold style, a finished size such as 4 x 6 or 5 x 7 inches, and a template, then download a true-size PNG, PDF, or SVG.
---

## Make a printable table tent template in minutes

[![Watch how the free Table Tent Generator works](https://img.youtube.com/vi/tkeUn2dQups/maxresdefault.jpg)](https://youtu.be/tkeUn2dQups)

A table tent is a folded card that stands upright on a table or desk. You see them in many places: the menu special card on a restaurant table, the number that marks your table while you order at the counter, the place card at a wedding, the name tent at a conference, and the little card that says "scan to leave a review." This free table tent template maker builds all of them. You pick a fold style and a finished size, choose a template, type your text, and download a print-ready file. There is no signup and no watermark.

Most "table tent template" results are static gallery files you have to open in Word or a design app and edit by hand. This is a real generator. The live preview updates as you type, the fold and score lines are drawn for you, and the export is sized so the folded tent comes out at its true finished size.

## How to make a table tent

You need the file from this page, a printer, card stock, a ruler, and scissors or a paper cutter. The first six steps happen in the tool.

1. **Choose a template.** In the **Template** gallery, pick the style that fits the job: Menu Special, Table Number, Place Card, Name Tent, Retail Callout, Scan-to QR, Reserved, Wedding Elegant, or a plain layout. The form relabels its fields to match, so a menu template asks for a dish name and a price.

![The Template gallery grouped by use case, with the Menu Special template selected under Restaurant / menu special](/images/tools/table-tent-generator/step-template.webp)

2. **Pick the fold style.** Under **Fold style**, choose **Half-fold tent** for the classic A-frame with one fold, or **Tri-fold triangle** for a self-standing triangle with two folds and a glue tab. The preview redraws the flat card with its FOLD lines.

![The Fold style control with Half-fold tent selected and the flat card preview showing one dashed FOLD line across the middle](/images/tools/table-tent-generator/step-fold-style.webp)

3. **Type the front face.** Fill in the **Front face** fields, such as the restaurant name, the dish, a short description, and the price, or click **Fill example** to load sample text. Fields you leave empty are hidden on the card.

![The Front face form filled with The Olive Table, Truffle Fries, a short description, and a \$12.00 price, next to the live preview](/images/tools/table-tent-generator/step-front-face.webp)

4. **Set the back panel.** Under **Back panel**, choose **Mirror front** to show the same text on both sides, **Different** to type a second message for the back, or **Blank** for a one-sided tent. The tool turns the back upside down on the flat card so it reads the right way up after folding.

![The Back panel buttons with Mirror front selected and the preview showing the back half of the card printed upside down above the FOLD line](/images/tools/table-tent-generator/step-back-panel.webp)

5. **Choose the finished size.** Under **Finished size & print**, pick a size such as 4 x 6 or 5 x 7 inches and set Portrait or Landscape. The line under the buttons shows the flat sheet you will print, for example 5.00 x 14.00 in for a 5 x 7 portrait tent.

![The Finished size and print picker with the 5 x 7 inch Large menu tent selected and the helper line reading Flat sheet to print: 5.00 x 14.00 in](/images/tools/table-tent-generator/step-size.webp)

6. **Download and print.** Click the PDF button, open the file, and print it at 100 percent scale, also called Actual size, with no "fit to page" option. The PDF page is the flat card at its true size. PNG and SVG files are there too if you want to place the design somewhere else.

![The download buttons under the preview: Download PNG, PDF, and SVG, with the note to print at 100% scale with no fit-to-page](/images/tools/table-tent-generator/step-download.webp)

### How to cut and fold a half-fold tent

1. Cut the card out along the edge of the printed design. The single-tent PDF has no cut line because the page edge is the card edge, so if your design has a white background, measure the flat size from step 5 with a ruler and mark the corners first.
2. Lay a ruler along the dashed FOLD line and press along it with a bone folder or the back of a butter knife. This is called scoring, and it gives card stock a clean bend instead of a cracked one.
3. Fold the card in half along the scored line with the printed side facing out. The front panel and the back panel now face away from each other.
4. Open the fold slightly and stand the tent on its two bottom edges. Both faces read upright because the back panel was printed upside down on purpose.

### How to cut and fold a tri-fold triangle tent

1. Cut the card out along its edge, including the small glue tab at the bottom.
2. Score both FOLD lines and the tab crease with a ruler and a bone folder.
3. Fold along the two FOLD lines so the back panel, the front panel, and the panel labelled "Base - rests on table" form a triangle, with the printed faces outward.
4. Fold the glue tab in, add a thin line of glue to it, and press it against the inside of the back panel along its free edge. Hold it until the glue sets, then stand the triangle on its base.

## 5x7 table tent template

5 x 7 inches is one of the built-in half-fold sizes, listed as the large menu tent. Pick **Half-fold tent**, then the **5" x 7"** button, and the tool builds the flat card for you. You do not need to set a custom size.

Check the paper before you print. In Portrait, a 5 x 7 tent is 5 inches wide and 7 inches tall when it stands, so the flat card is 5 x 14 inches (360 x 1008 points) with the fold at 7 inches. That is longer than a US Letter sheet (11 inches) and an A4 sheet (297 mm, about 11.7 inches), so it does not fit on standard home printer paper. You have two options:

- **Switch to Landscape.** The tent is then 7 inches wide and 5 inches tall, and the flat card is 7 x 10 inches, which fits on US Letter and A4.
- **Keep Portrait and use a print shop.** Send the 5 x 14 inch PDF and ask for it on card stock at 100 percent scale.

The same check applies to the 4 x 6 tent. In Portrait its flat card is 4 x 12 inches, which is also longer than Letter and A4. In Landscape it is 6 inches wide and 4 inches tall, and the flat card is 6 x 8 inches. That is why the tool starts every size in Landscape; switch to Portrait when you print at a shop.

The Bulk sheet tab uses smaller sizes made to tile several tents on one page: a 3.5 x 2 inch name tent, a 3 x 3 inch table number, a 4 x 2.5 inch place card, and a 2.5 x 2 inch mini tent. A 5 x 7 tent is made one at a time on the Single tent tab.

## Free table tent template for Word

This tool does not export a Word file. It exports a PDF, a PNG image, and an SVG vector file, all free and without a watermark. For printing, the PDF is the simplest choice: open it in any PDF reader and print it at 100 percent scale. You do not need Word at all, and the size cannot drift the way a resized picture in a Word page can.

If you need the design inside a Word document, for example to add it to a handout, download the PNG and insert it as a picture. Then select the picture and type the exact height and width in the Size group on the Picture Format tab, using the flat sheet size shown under the size picker. Microsoft's guide to [changing the size of a picture in Word](https://support.microsoft.com/en-us/word/change-the-size-of-a-picture-shape-text-box-or-wordart-in-word) shows where those boxes are. Make the Word page at least as large as the flat card, or the picture will not fit.

## The fold engine: half-fold tent vs tri-fold triangle

A table tent is different from a flat tag or a flyer because it folds. This tool has a fold engine that turns your finished panel size into the correct flat sheet, draws the score line where you fold, and rotates the back panel so it reads upright once folded.

There are two fold styles.

A **half-fold tent** has one fold at the top. Two equal panels lean together into an A-frame and stand on their two bottom edges. This is the classic restaurant table tent. On the flat sheet, the front panel is the bottom half and the back panel is the top half, with a single score line across the middle.

A **tri-fold triangle** has two folds that split the card into three equal panels, plus a small glue tab. Folded, it forms a self-standing triangular prism with a flat base that sits on the table, a front face, and a back face. The two score lines are drawn between the panels, and the glue tab is marked with a hatch so you know where to add glue.

Both styles show your front design on one side and a back on the other. Pick the one that matches how you want the card to stand.

## Why the back panel is rotated

When you fold a tent card made by hand, the back panel ends up upside down relative to the front. If you print the same design on both halves of the flat sheet, one side comes out inverted.

This tool fixes that automatically. The back panel is rotated 180 degrees on the flat sheet, so once you fold the card, the back reads upright too. You get three back-panel options:

- **Mirror front** shows the same content on both faces, auto-flipped. This is the default and is what you want for a table number or a name tent that has to read from both sides.
- **Different** lets you put a different message on the back, such as a drink special on the front and a dessert special on the back.
- **Blank** leaves the back empty for a single-sided tent.

## Finished sizes that match print shops

The size you pick is the finished (folded) panel size, the way you would measure the standing tent. These presets follow common print-shop conventions.

For half-fold A-frame tents:

- 4 x 6 inches, the classic A-frame tent
- 5 x 7 inches, a large menu tent
- 5 x 6.5 inches, a wide menu tent
- 8 x 4 inches, a landscape counter tent

For tri-fold triangle tents:

- 4 x 4 inches, a square triangle tent
- 6 x 4 inches, a wide triangle tent
- 8 x 4 inches, a long triangle tent

You can also set a custom size in inches and switch between portrait and landscape. The helper line under the size picker always shows the resulting flat sheet size, so you know before you print whether it fits your paper.

## True-size printing

The export is built so the folded tent measures its real size. The rule is simple: 1 inch equals 72 points, so a US Letter page is 612 x 792 points and A4 is 595.28 x 841.89 points.

For a half-fold tent, the flat card is the panel width wide and twice the panel height tall, with the score line at the vertical midpoint. A 4 x 6 portrait half-fold exports a flat 4 x 12 inch card, which is 288 x 864 points, with the fold score line at 6 inches (432 points). A 5 x 7 tent exports a flat 5 x 14 inch card, which is 360 x 1008 points, with the score line at 7 inches (504 points).

To get that exact size on paper, print the PDF at 100% scale with no "fit to page" or "shrink to fit" option. Then cut on the outline and fold on the score line.

## Use cases: one tool for the whole table

The templates are grouped by use case, and each one relabels the fields so the form fits the job.

**Menu special.** Put a dish name, a short description, and a price on a warm, appetite-forward card. Set it on the table to push the truffle fries at \$12 or the barrel-aged negroni at \$13.

**Table number.** Show one large numeral. In Bulk mode you set a start number and a count, and the tool auto-generates a numbered sequence, one tent per number, ready to tile and print.

**Place card and name tent.** Show a large guest or attendee name with a title or organisation line. The name mirrors onto the back so it reads from both sides of a banquet or conference table. This is the same item people search for as a "name tent," so you do not need a separate tool. For a badge that clips to a shirt instead, use the [name tag generator](/tools/name-tag-generator).

**Retail product callout.** Feature a product name, a price, and a NEW or SALE flag for a shelf or counter display.

**Scan-to QR.** Turn a URL into a real QR code that decodes to exactly that link. Guests scan the printed tent to order, tip, or leave a review. The code is baked into the export so it scans off the paper. If you only need the code itself, the [QR code generator](/tools/qr-code-generator) makes a standalone image.

**Reserved.** A clean, centered "RESERVED" card for a held table.

**Wedding and event.** A serif, decorative card for table names, seating, and event signage.

**Blank.** Start from an empty card with every field available and hidden until you fill it.

## Bulk mail-merge for a whole set

Single mode designs one tent. Bulk mode makes a set. Choose Table numbers to auto-generate a numbered sequence, or paste a list where each line is one tent (heading, description, price, copies). You can also import a CSV and download a sample CSV to match the columns. Every tent tiles onto a US Letter or A4 sheet with cut and fold guides. Multi-page sets download as a ZIP of PNGs or a single multi-page PDF.

## Tips for a clean print

- Use card stock, ideally 80 lb cover or heavier, so the tent stands without sagging.
- Score the fold line with a bone folder or the back of a butter knife before folding for a crisp edge.
- For a triangle tent, add a thin line of glue to the tab and press it to the inside of the back panel.
- Keep the darkest backgrounds for card stock you can print edge to edge, or add a small margin.
- Proof one tent on plain paper before you print the whole set on card stock.

## Frequently asked questions

### Is this table tent template maker free?

Yes, it is 100% free with no signup and no watermark. Design and download as many table tents as you want as PNG, PDF, or SVG files, one at a time or as a tiled printable sheet.

### What is a table tent?

A table tent, also called a tent card or name tent, is a folded card that stands upright on a table or desk. Restaurants use them for menu specials and table numbers, events use them for place cards and name tents, and retailers use them for product callouts and scan-to-review QR codes.

### How do you make a table tent?

Pick a template, a fold style, and a finished size in the tool, type your text, and download the PDF. Print it at 100% scale on card stock, cut the card out, score the dashed FOLD line with a ruler and a bone folder, and fold it with the printed side out. A half-fold tent stands as an A-frame. A tri-fold triangle also needs its glue tab glued to the inside of the back panel.

### Is there a 5x7 table tent template?

Yes. 5 x 7 inches is a built-in half-fold size, listed as the large menu tent. In Portrait the flat card is 5 x 14 inches, which is longer than US Letter or A4, so print it at a print shop or switch to Landscape, where the tent is 7 x 5 inches and the flat card is 7 x 10 inches and fits on a Letter or A4 sheet.

### Can I get a free table tent template for Word?

This tool does not make a Word file. It exports a PDF, a PNG, and an SVG for free. The PDF prints at true size from any PDF reader, so you do not need Word. If you want the design in a Word document, insert the PNG as a picture and set its height and width to the flat sheet size shown under the size picker.

### What is the difference between a half-fold tent and a tri-fold triangle?

A half-fold tent has one fold at the top, so two panels lean together into an A-frame that stands on its two bottom edges. A tri-fold triangle has two folds that make three panels plus a glue tab, so it forms a self-standing triangular prism with a flat base. Both show the front on one side and the back on the other, and this tool draws the score lines for you.

### How does the back of the tent read the right way up?

When a tent folds, the back panel ends up upside down relative to the front. This tool rotates the back panel 180 degrees on the flat sheet, so once you fold the card the back reads upright too. You can mirror the front onto the back, give the back different content, or leave the back blank.

### What size should a table tent be?

Common A-frame finished sizes are 4 x 6 inches, 5 x 7 inches, 5 x 6.5 inches, and a landscape 8 x 4 inches. Triangle tents are often 4 x 4, 6 x 4, or 8 x 4 inches. These are the finished (folded) panel sizes and all are built-in presets, plus a custom size in inches.

### Will the printed tent be the correct size?

Yes. The PDF page is sized to the flat unfolded card at true scale, where 1 inch equals 72 points. A 4 x 6 portrait half-fold exports a flat 4 x 12 inch card (288 x 864 points) with the fold score line at 6 inches (432 points). Print at 100% scale with no fit-to-page and the folded tent comes out at its exact finished size.

### Can I make a whole set of numbered table tents at once?

Yes. In Bulk mode, choose Table numbers and set a start number and a count to auto-generate a numbered sequence, or paste a list and import a CSV for names, dishes, or place cards. Every tent tiles onto a US Letter or A4 sheet with cut and fold guides, and multi-page sets export as a ZIP of PNGs or a single PDF.

### Can I add a scannable QR code?

Yes. The Scan-to QR template turns a URL into a real QR code that decodes to exactly that link. It is baked into the PNG, PDF, and SVG export, so guests can scan the printed tent to order, tip, or leave a review.

### Can I use this for name tents and place cards?

Yes. The Place Card and Name Tent templates show a large guest or attendee name with a title or organisation line, and mirror the name onto the back so it reads from both sides of a conference table. That makes this the same tool for table tents, name tents, and place cards.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (-). Use a regular dash (-) instead.
     2. Keep sentences short and simple. Plain English ranks better.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free Taxi Receipt Generator - Create Cab & Taxi Receipts Online

Lost your cab receipt or need one for an expense claim? PinFlow's **free taxi receipt generator** builds a clean, professional taxi receipt in seconds. Add the fare, distance, tip, driver, and a signature line, then download a PDF or PNG. You need no signup.

## How to Make a Taxi Receipt

[![Watch How It Works](https://img.youtube.com/vi/NXLugEEy7fk/maxresdefault.jpg)](https://youtu.be/NXLugEEy7fk)

![Example thermal receipt made with the free taxi receipt generator](/images/tools/taxi-receipt-generator/taxi-receipt-example.webp)

1. **Add the cab company**: Enter the company name, dispatch address, and phone number.
2. **Enter the fare**: Add a base fare and a mileage line, or a single flat fare.
3. **Add a tip**: Set the tip amount in the Details tab. It is added to the total automatically.
4. **Pick payment**: Choose cash or card. Add the card last 4 if you paid by card.
5. **Turn on the signature line**: Riders and drivers often sign cab receipts.
6. **Download**: Save the taxi receipt as a PDF or PNG, or print it.

## What a Taxi or Cab Receipt Should Include

A proper taxi or cab receipt usually shows:

- **Cab company name and phone**: So the rider can call about lost items.
- **Date and time of the trip**: Important for expense reports.
- **Pickup and drop-off**: You can add these in the footer message.
- **Fare breakdown**: Base fare, distance, and any surcharges.
- **Tip and total**: The gratuity and the final amount paid.
- **Driver name and signature line**: Common on printed cab receipts.

## Who Uses a Taxi Receipt Maker?

- **Business travelers** claiming cab fares on an expense report.
- **Drivers** who need to give a paper receipt to a passenger.
- **Freelancers** tracking travel costs for tax deductions.
- **Anyone** who lost the original receipt and needs a replacement.

## Taxi Receipt Generator FAQ

**Is this taxi receipt generator free?**
Yes. You can create and download taxi receipts for free with no signup and no watermark.

**Can I add a tip line?**
Yes. Add the tip amount in the Details tab and it is added to the total. You can also turn on a signature line for the rider or driver.

**What file formats can I download?**
You can download your taxi receipt as a PDF or a PNG image, or print it straight from your browser.

**Does my data get stored?**
No. Everything runs in your browser. Your receipt details never leave your device.


---

<!--
Writing rules for this article:
- No em dashes anywhere. Use a regular hyphen.
- Short, plain sentences.
- Escape any literal dollar sign as \$ (remark-math).
- The first "## " heading is where page.tsx starts slicing the blog body.
- Keep everything thank-you-card specific: making, printing, discount codes,
  QR, sizes, bulk, and the retention angle.
-->

---
title: How to Make a Thank You Card Template (Free, Printable, With a Discount and QR)
description: A step-by-step guide to designing, printing, and inserting your own thank you cards, plus discount-code best practice, real-unit sizes, a bulk workflow, and thank you card ideas for a business.
---

## What a thank you card template is

[![Watch how to make a thank you card](https://img.youtube.com/vi/mwkiyh5hS0E/maxresdefault.jpg)](https://youtu.be/mwkiyh5hS0E)

This quick walkthrough shows how to design a thank you card, add your logo, a discount code, and a scannable QR, pick a print size, and download or print a whole sheet of personalized cards in seconds.

A thank you card template is a ready-made card layout you fill with your own
words. For a shop it is usually a small printed insert, the thank you for your
order card you tuck into a shipment. It carries a big heading like Thank You, a
short personal message, your brand name and logo, and often a discount code and a
scannable QR that sends the customer back to your store.

This free thank you card maker lets you design one and download it as a PNG, PDF,
or SVG, or print a whole sheet of personalized cards at once. There is no signup
and no watermark. Everything runs in your browser, so your message, logo, and
customer names never leave your computer.

## Why a thank you for your order card drives repeat purchases

A packaging insert is one of the cheapest ways to turn a single order into a
returning customer. Shopify's guide to packaging inserts explains that inserts
cost very little to add because the parcel is already shipping, and that a simple
thank-you card, especially one with a discount code for the next order, is one of
the easiest and most effective inserts a store can use to build loyalty and
encourage a second purchase. You can read the guide at
https://www.shopify.com/blog/packaging-inserts.

The mechanics are simple. The card arrives at the happiest possible moment, right
when the customer opens the box. A warm note plus a reason to come back (a
discount, a review request, or a follow) gives them a clear next step while they
still feel good about the purchase. That is why the default template here leads
with a discount chip and a QR code.

## How to make a thank you card

1. Write the heading. This is the big greeting, usually Thank You or Thank You So
   Much.
2. Add your message. Keep it short and human. Two or three lines reads best.
3. Fill in your sign-off and brand name, and upload a logo if you have one.
4. Turn on the discount block and enter your offer, code, and an optional expiry.
5. Turn on the QR block and paste the link you want the scan to open.
6. Pick one of the 20 templates, choose a color theme, font, and a real-unit
   size, then download.

The live preview updates as you type, so you always see the finished card before
you print it. Leave any field blank and it simply disappears from the card, so
there is never an empty gap.

## Discount code best practice

The discount code is the part that earns the second order, so it is worth getting
right.

- Make the offer clear and specific. "15% off your next order" beats "special
  offer" every time.
- Use a memorable code that matches the card, like THANKYOU15 or WELCOME10.
- Add a gentle deadline. An expiry line like "Valid for 60 days" creates a reason
  to act without feeling pushy.
- Match the code to a real store discount. If you run a Shopify store, create the
  code in your admin first so it actually works at checkout.
- Point the QR at a discount link, not just your home page. A Shopify
  \$store/discount/CODE link applies the code automatically when the customer
  scans it, so there is nothing to type.

If you want a full coupon layout with a headline, terms, and a tear-off stub, use
the [coupon template generator](/tools/coupon-template-generator). If you only
need the code itself as a scannable image, the
[QR code generator](/tools/qr-code-generator) makes a standalone QR you can drop
anywhere.

## Make the QR code actually useful

The QR block here builds a real, scannable QR that decodes to the exact URL you
enter, both in the preview and in every export. A few ideas for where to point
it:

- Your store, or a specific collection you want to promote.
- A Shopify discount link so the thank-you code applies on its own.
- A review page, so a happy customer can leave feedback in one tap.
- Your Instagram or TikTok profile, to turn a shipment into a new follower.

If you want to measure which cards drive clicks, wrap the destination in a
tracked link first with the [UTM link builder](/tools/utm-link-builder), then
paste that tagged URL into the QR field. Now every scan shows up in your
analytics as traffic from the card.

## Thank you card sizes

Printing at the right size matters, especially if you buy pre-cut card blanks or
matching envelopes. The size presets use real inches:

- 4 x 6 inches: the standard shipment insert, and the default here.
- 5 x 3.5 inches: an A2 flat card, the classic small note-card size.
- 5 x 7 inches: a larger insert with room for a longer message.
- A6 postcard: 4.1 x 5.8 inches, a good mailer size.
- 3.5 x 2 inches: a business-card mini that fits in any parcel.
- 4 x 4 inches: a modern square card.

You can also set a custom width and height in inches, and switch between portrait
and landscape. When you download the PDF, the page is sized to the card's true
dimensions, so it prints one to one as long as you set the printer scale to 100%
and turn off fit to page.

## Print and insert your thank you cards

1. Download the PDF for the crispest print, or the PNG if you prefer an image.
2. Print at 100% scale on card stock. Card stock between 250 and 350 gsm feels
   premium and survives the trip inside a parcel.
3. Cut along the edge of each card. A paper trimmer gives the cleanest lines.
4. Drop one card into every order, on top of the product so it is the first thing
   the customer sees.

For a matching set, pair the card with a
[gift tag](/tools/gift-tag-generator) tied to the product or the tissue wrap. The
tag and the card can share your logo and colors for a cohesive unboxing.

## Bulk print a whole sheet of cards

Bulk mode is the fastest way to thank a batch of orders. Instead of designing each
card by hand, you design once and mail-merge the names.

1. Switch to Bulk mode.
2. Paste your customer list, one name per line, or import a CSV with Name,
   Message, and Code columns.
3. The shared heading, message, brand, discount, and QR you set in the form apply
   to every card. Only the name changes per card, and the CSV lets you give each
   customer a different message or code too.
4. Pick your paper (A4 or US Letter) and the card size on the sheet.
5. Download the sheet as a PDF, with one page per sheet and dashed cut guides, or
   as PNG files.

Any row missing a required name is skipped, so a stray blank line will not break
the sheet. You can download a sample CSV template from inside the tool.

## Thank you card ideas for a business

The 20 templates cover a range of thank you card ideas so you can match the card
to your brand:

- Ecommerce and retention: Branded Insert (logo plus discount plus QR), Discount
  Focus, Review Request, Small Business, Social Follow, and a landscape Postcard.
- Elegant: Classic Script, Floral Frame, Dark Luxe, Wedding Elegant, and Monogram.
- Playful: Boutique Kraft, Bold Type, Confetti, Festive Holiday, Handwritten Note,
  and Logo Hero.
- Minimal: Modern Minimal, Neutral Card, and a Blank Canvas for full control.

For a small shop, the Small Business template opens with "thanks for supporting a
small business" and puts your socials and a QR front and center. For a premium
brand, Dark Luxe pairs a black card with gold. For a personal touch, the
Handwritten Note reads like a note left by the owner.

## Tips for a better business thank you card

- Keep the message personal. Use the customer's name and mention their order if
  you can.
- Match the card's font and colors to your packaging for a cohesive look.
- Lead with one clear next step: a discount, a review, or a follow, not all three.
- Print a test card first to check the size and colors before you print the whole
  sheet.
- Save the SVG if you want to tweak the card later in a vector editor.

## Frequently asked questions

### Is this thank you card maker free?

Yes, it is 100% free with no signup and no watermark. Design and download as many
thank you card templates as you want as PNG, PDF, or SVG files. Everything runs in
your browser, so your text, logo, and customer names never leave your computer.

### How do I make a thank you card template?

Write your heading and message, add your brand name and an optional logo, then
turn on the discount and QR blocks if you want them. Pick one of the 20 templates,
choose a color theme, font, and a real-unit size, and download. The live preview
updates as you type.

### What is a thank you for your order card and why should I add one?

A thank you for your order card is a small printed insert you drop into a
shipment. Packaging inserts are a low-cost way to make an order feel personal and
to nudge a second purchase. Shopify's packaging-inserts guide notes that a simple
thank-you card with a discount code is one of the easiest inserts to add and a
proven way to encourage repeat orders.

### Can I add a discount code and a scannable QR code?

Yes, and both are on by default. The discount block prints your offer text, code,
and an optional expiry. The QR block encodes any URL you enter and generates a
real, scannable QR that decodes to that exact link in the preview and in every
export. Toggle either block off for an appreciation-only card.

### What sizes are thank you cards and can I print them?

Yes. The tool uses real insert-card sizes: 4 x 6 in, 5 x 3.5 in (A2 flat card), 5
x 7 in, A6 postcard, a 3.5 x 2 in business-card mini, and a 4 x 4 in square, in
portrait or landscape. Download the PDF and print at 100% scale (no fit-to-page)
so cards come out at their true size, then cut them out.

### Can I print a whole batch of personalized thank you cards at once?

Yes. Switch to Bulk mode, paste a customer list (one name per line) or import a
CSV with Name, Message, and Code columns, and the tool tiles a personalized card
for each customer onto an A4 or US Letter sheet with dashed cut guides. Download
it as a PDF (one page per sheet) or PNG.

### What thank you card ideas and templates are included?

There are 20 templates across ecommerce and retention, elegant, playful, and
minimal styles, plus a blank canvas. Each one is a finished layout you can
customize with your own colors, font, logo, discount, and QR.

### Are these good for a business thank you card for customers?

Yes. The default Branded Insert template is built for shops: it leads with your
logo and brand name, a warm message, and a paired discount chip and QR so a
thank-you doubles as a next-order nudge. Add your own colors and font to match
your packaging, then bulk-print a sheet for a whole batch of orders.

### Can I add my own logo, colors, and font?

Yes. Upload a logo, pick from 16 color themes or set a custom accent and text
color, and choose from a large font library including scripts and bold display
faces. Selecting a template applies a matching theme and font as a starting
point, and you can override any of it afterward.


---

<!--
Writing rules for this file:
- First real content must be a `## ` heading (page.tsx slices from the first "\n## ").
- Escape every currency dollar sign as \$ (remark-math).
- No em dashes anywhere. Short, direct sentences.
- Avoid AI filler words (see the prohibited-words list in CLAUDE.md).
-->

---
title: Free Timesheet Template Generator
description: Build a weekly, bi-weekly, or monthly timesheet template with live overtime and pay totals, then download a PDF, PNG, or CSV.
---

## What a timesheet template is for

[![Watch how the free Timesheet Generator works](https://img.youtube.com/vi/0b3N8qjFIOQ/maxresdefault.jpg)](https://youtu.be/0b3N8qjFIOQ)

A timesheet is a simple record of the hours a person worked over a pay period.
It lists each work day with a start time, an end time, an unpaid break, and the
resulting hours. When the period ends, the hours add up into a total, and if an
hourly rate is set, the total turns into pay. Employers use timesheets to run
payroll, track overtime, bill clients, and keep records that back up what was
paid.

Most "timesheet template" results are a static spreadsheet you download and
wrestle with in Excel or Google Sheets. This generator is different. You fill it
in right here, watch the hours and overtime calculate as you type, choose a
clean design, and download a print-ready file. There is no signup, no watermark,
and nothing leaves your browser.

## How to make a timesheet in three steps

1. **Pick your entry mode and pay period.** Use Time In / Out if you want to
   type clock times and let the tool do the math, or switch to Hours if you
   already know the decimal hours for each day. Choose Weekly, Bi-weekly,
   Semi-monthly, or Monthly, then set the start date. The rows and weekday labels
   fill in for you.
2. **Enter the hours.** Type each day down the table. Press Tab or Enter to jump
   to the next cell so a full week goes in fast. If most days are the same, fill
   the first day and use "Copy day 1 to all" to repeat it. Add a note or project
   per day if you want.
3. **Style it and download.** Add your company name and logo, set an accent color
   and font, pick one of the twelve templates, then download a PDF, PNG, or CSV.
   The preview matches the file exactly.

## Entering time the easy way

The time fields are forgiving on purpose. You can type any of these and they all
mean the same thing: `9`, `9a`, `9:00 AM`, `09:00`. Afternoon works the same way
with `17:30` or `5:30pm`. When you leave a field, the tool tidies it up to a
clean 12-hour clock so the sheet reads well.

Worked hours for a day equal the time out minus the time in, minus the unpaid
break. So 9:00 AM to 5:30 PM with a 30-minute break is 8.00 hours. If a shift
crosses midnight, enter it as normal. A time out that is earlier than the time in
is treated as an overnight shift and wraps forward 24 hours, so 10:00 PM to 6:00
AM with no break is 8.00 hours, never a negative number.

## How overtime is figured

The default overtime rule follows the US Fair Labor Standards Act. Hours over 40
in a workweek are overtime, paid at 1.5 times the regular rate. Both the weekly
threshold and the multiplier are editable, so if your workplace uses a different
number you can change it and the split updates live.

Here is the math on a common example. A worker does 8.00 hours Monday through
Friday, which is 40.00 hours, then adds a 5.00 hour Saturday. The week total is
45.00 hours. The first 40.00 are regular and the last 5.00 are overtime. With a
rate of \$20.00 per hour, the regular pay is 40 times \$20.00, or \$800.00. The
overtime pay is 5 hours times \$20.00 times 1.5, or \$150.00. The total pay is
\$950.00.

There is also an optional daily overtime rule. Turn it on and any hours over 8 in
a single day count as overtime, which reflects state rules such as California.
It is off by default. Daily overtime is pulled out first so it never double
counts against the weekly 40-hour test.

For bi-weekly sheets, overtime is figured per workweek, not across the whole
14 days. Each block of seven days is its own week for the 40-hour threshold,
which is how the FLSA treats a two-week pay period.

## The quarter-hour rounding rule

Some employers round worked time to the nearest quarter hour. This is the
"7-minute rule": minutes 1 through 7 past a quarter round down, and minutes 8
through 14 round up. Turn on rounding to the nearest 15 minutes and each day's
span rounds that way. A raw span of 8 hours 37 minutes rounds to 8 hours 30
minutes, because 37 is closer to 30 than to 45. Rounding is off by default, so
exact minutes are used unless you ask for it.

## Adding pay, or keeping it hours only

Leave the hourly rate blank and you get a clean hours-only timesheet. No money
appears anywhere, which is what a lot of hourly workers and salaried staff want.
Enter a rate and the sheet reveals the pay lines: regular pay, overtime pay at
your multiplier, and total pay. Switching the rate on or off never changes your
hours, only whether the money is shown.

## Weekly, bi-weekly, semi-monthly, and monthly

The pay period you choose decides how many dated rows the sheet seeds:

- **Weekly** seeds seven days from the start date. This is the most common
  format and the default.
- **Bi-weekly** seeds fourteen days across two workweeks.
- **Semi-monthly** covers the 1st to the 15th, or the 16th to the end of the
  month, depending on your start date.
- **Monthly** seeds one row for every calendar day of the month.

Switching periods keeps the hours you already entered, matched up by position, so
you never lose work by changing your mind.

## Import, export, and reuse

You do not have to type everything by hand. Paste rows straight from a
spreadsheet and the tool splits them into days. Or import a CSV with Date, Time
In, Time Out, Break, Hours, and Note columns, and download the sample file first
to see the exact format. When you are done, export a CSV that mirrors the sheet
so you have a spreadsheet copy, or export the PDF and PNG for a signed record.

## Twelve templates for any workplace

The look ranges from a plain hairline-ruled table to a bold accent header, a
ledger grid with monospace figures, an elegant serif, a dark theme, and a warm
kraft style built for trades and construction crews. Every template renders the
same header, table, totals, and signature line without clipping, at any pay
period, with or without the pay columns. Add your accent color, font, and date
format on top.

## Your data stays on your device

The whole timesheet autosaves in your browser so you can step away and come back
to add another day without retyping. It is saved on this device only. There is no
account, no login, and no cross-device sync, so a shared computer would overwrite
the single saved sheet. Use "Start new" when you want a fresh, blank timesheet,
which clears the saved copy so old hours never reappear.

## Frequently asked questions

### How are the hours on the timesheet calculated?

In the Time In / Out mode, each day's worked hours equal the time out minus the
time in, minus the unpaid break. A shift that ends at or before it starts is
treated as an overnight shift and wraps past midnight, so 10:00 PM to 6:00 AM with
no break is 8.00 hours. The result is shown as decimal hours, where 8h 30m is
8.5. In the Hours mode you type the decimal hours for each day directly. The
total is the sum of every day, so the printed rows always add up.

### How does overtime work on this timesheet?

The default rule follows the US Fair Labor Standards Act: hours over 40 in a
workweek are overtime, paid at 1.5 times the regular rate. You can edit both the
weekly threshold and the multiplier. An optional daily overtime toggle for hours
over 8 in a day reflects state rules such as California and is off by default. A
45-hour week splits into 40.00 regular hours and 5.00 overtime hours. This tool
is not legal advice and does not guarantee compliance, so check the rules for
your jurisdiction.

### What is the difference between a weekly, bi-weekly, and monthly timesheet?

A weekly timesheet covers seven days, a bi-weekly timesheet covers fourteen days
across two workweeks, a semi-monthly timesheet covers the 1st to the 15th or the
16th to the end of the month, and a monthly timesheet has one row per calendar
day. Pick the period that matches how your employer runs payroll, set the start
date, and the rows and weekday labels fill in automatically.

### Can I add my hourly rate and see my pay?

Yes. Enter an hourly rate and the timesheet reveals regular pay, overtime pay at
your multiplier, and total pay. Leave the rate blank for a clean hours-only
timesheet with no money shown. For example, 40.00 regular hours plus 5.00
overtime hours at a \$20.00 rate with a 1.5 multiplier is \$800.00 regular pay
plus \$150.00 overtime pay, for \$950.00 total pay.

### Does this timesheet accept different time formats and overnight shifts?

The time fields are forgiving. You can type 9, 9a, 9:00 AM, 17:30, or 5:30pm and
they all normalize to the same time. If the time out is earlier than the time in,
the day is read as an overnight shift and the hours wrap correctly past midnight.
You can also turn on rounding to the nearest 15 minutes, the common quarter-hour
rule, which is off by default.

### Is the timesheet template really free with no signup or watermark?

Yes. It is free with no account and no watermark on any export. You can download
as many timesheets as you like as a print-ready PDF in US Letter or A4, a PNG, or
a CSV. The whole tool runs in your browser, so your hours never leave your
device.

### Does it save my timesheet, and is this legally binding?

Your timesheet autosaves on this device so you can come back and add another
day's hours. There is no account, login, or cross-device sync, and a shared
computer would overwrite the single saved sheet. Use Start new to wipe the saved
sheet. The timesheet is a record you and your employer can sign, but this tool
does not provide legal advice, e-signatures, or a guarantee that a sheet is
legally binding.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes (—). Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math. -->

# Free UTM Link Builder for Shopify & Ecommerce - Google Analytics Campaign Tagging Tool

> Build trackable campaign URLs in seconds with smart ecommerce defaults. It is the easiest way to create a tracking URL for Google Analytics.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, blockquote, video, etc.).
     Without this heading, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free UTM Link Builder

[![Watch How It Works](https://img.youtube.com/vi/771_tas_sGw/maxresdefault.jpg)](https://youtu.be/771_tas_sGw)

This quick video walkthrough shows how to build a UTM-tagged tracking URL from scratch. You will see how to use the smart presets, enable Strict Mode, shorten the URL, and download the QR code.

Every marketing campaign you run sends traffic to your Shopify store. This includes Facebook ads, email newsletters, and influencer partnerships. Without proper tracking, all those visitors blur together in your analytics software. This makes it impossible to tell which marketing efforts drove sales. UTM parameters solve that problem. Our free Google Analytics campaign tagging tool makes it easy.

By adding UTM tracking tags to your URLs, you can identify exactly which traffic sources, marketing channels, and specific UTM campaigns bring visitors and revenue. You might need a simple utm link example. Or you might need a full tracking URL for a multi-channel product launch. Either way, this tool has you covered.

## Features of Our Free UTM Link Builder

Our tool is packed with features for Shopify merchants and ecommerce marketers. These features give you reliable UTM tracking in Google Analytics:

- **Smart Combobox Inputs with Preset Suggestions:** Every UTM field offers a searchable dropdown. These contain curated, ecommerce-ready presets with descriptions. You never have to guess the right value. Our campaign source examples include Shopify-relevant sources like `shopify_email`, `klaviyo`, and `pinterest`. Mediums include `paid_social` and `retargeting`. Campaign types include `bfcm_2026`, `abandoned_cart`, and `back_in_stock`. These match real Shopify marketing workflows. You can also type any custom value if needed.
- **Strict Mode (On by Default):** A single toggle automatically lowercases your input. It also replaces spaces with underscores across all fields. This is critical for Shopify merchants. GA4 treats `Facebook` and `facebook` as separate sources. Without consistent formatting, your revenue attribution data fragments. You cannot accurately calculate ROAS across channels.
- **Campaign ID (`utm_id`) Support:** Our builder includes a dedicated Campaign ID field for the `utm_id` parameter. This goes beyond the standard five Google parameters. It is useful for Shopify merchants running ads on Google, Meta, or Pinterest. You can tie each tracking URL back to a specific campaign ID in your ad platform. This helps with accurate spend-to-revenue reconciliation.
- **Real-Time Tracking URL Preview:** See your generated tracking URL update live as you type. No "generate" button is needed. The preview panel stays sticky on larger screens. This makes it fast to build dozens of tracking URLs. It is perfect for setting up a multi-channel Shopify product launch or BFCM campaign.
- **Three-Tier URL Length Warning System:** The tool features a real-time character counter with color-coded feedback. It is green when safe and amber when approaching 1,500 characters. It turns red when exceeding the 2,048-character Safari/cross-browser safety limit. This matters for ecommerce. A large portion of Shopify store traffic comes from mobile Safari. A truncated URL means broken tracking and lost attribution on your highest-value traffic.
- **One-Click Copy to Clipboard:** Copy your generated tracking URL instantly with a single click. A confirmation checkmark appears so you know it worked. You can then paste it directly into your Shopify Email campaigns, Klaviyo flows, Meta Ads Manager, or Pinterest Ad setup.
- **Fill Example Button:** Not sure how the tool works? Click "Fill example" to populate every field. It uses a realistic tracking URL example with Shopify campaign data. This is perfect for onboarding new team members or marketing agencies.
- **Reset Button:** Clear all fields and restore defaults with one click. You can start fresh when building your next campaign URL.
- **Auto `https://` Prepending:** If you forget a protocol in your Shopify store URL, the tool helps. It automatically adds `https://` for you. This ensures your tracking links always point to the secure version of your store.
- **Built-in UTM Checker:** Our real-time preview acts as a UTM checker. You can instantly verify that your utm_source, utm_medium, and utm_campaign values are correct. Do this before launching a campaign.
- **Contextual Tooltips on Every Field:** Hover over the info icon next to any label. You will see what that parameter does. You will also see how Strict Mode affects it. This is helpful for Shopify merchants who are new to UTM tracking in Google Analytics.
- **Proper URL Parsing & Encoding:** The tool uses the browser's native `URL` API. It provides rock-solid URL construction. It correctly handles existing query parameters, collection filters, and Shopify store URL structures. It does this without breaking your links.
- **Instant QR Code & Short URL Generation:** Every generated tracking URL automatically gets a scannable QR code preview. As your tracking URL gets longer with more parameters, the QR code becomes denser and requires a high-resolution image and a high-quality camera to read it. To solve this, use the built-in "Shorten URL" button! The QR code will automatically use the short URL instead, keeping the pattern simple and easy to scan. Download the QR code as a PNG to use in print materials, packaging inserts, or in-store signage. For advanced QR code customization, try our dedicated **[Free QR Code Generator](/tools/qr-code-generator)**.

![UTM Link Builder output panel showing a generated campaign URL, short URL, and QR code with copy, HTML, Markdown, and CSV export buttons](/images/utm_output_preview.webp)

- **Browser-Local Campaign History:** Every URL you generate is automatically saved to your browser's local storage. No account needed. The "Recent Links" panel shows your last campaigns with their source, medium, and campaign name at a glance. Restore any previous entry with one click, copy it again, or export your full history as a CSV for your records.

![Recent Links panel showing three saved UTM campaigns with copy, restore, and delete actions, plus an Export CSV button](/images/utm_history_preview.webp)

## What Does UTM Stand For in Google Analytics?

UTM stands for "Urchin Tracking Module". It was named after Urchin Software. Google acquired this web analytics company in 2005. It eventually became Google Analytics. Today, UTM parameters are the standard way to track marketing campaigns. This includes Google Analytics 4 (GA4) and other platforms.

UTM parameters are short text snippets added to the end of a URL. They tell analytics tools exactly where the click came from. They are sometimes called Google tracking parameters or campaign tags. Think of them as labels. You attach them to each link. Google Analytics then sorts your traffic into meaningful buckets.

**A standard link:** `https://your-store.com/collections/summer`
**A UTM-tagged link (tracking URL example):** `https://your-store.com/collections/summer?utm_source=instagram&utm_medium=paid_social&utm_campaign=summer_sale`

![Anatomy of a UTM URL](/images/utm_url_anatomy.webp)

## UTM vs URL - What is the Difference?

A URL is simply a web address. It is the link to your store, product, or collection page. UTM parameters are extra tags appended to that URL. They track where traffic comes from. Creating a Google custom URL requires you to append these specific parameters to your base URL.

| Feature        | Standard URL                                  | UTM-Tagged URL (Tracking URL)                              |
| -------------- | --------------------------------------------- | ---------------------------------------------------------- |
| **Example**    | `https://store.com/shoes`                     | `https://store.com/shoes?utm_source=google&utm_medium=cpc` |
| **Purpose**    | Navigate to a page                            | Navigate AND track the traffic source                      |
| **Analytics**  | Shows as "Direct" or undifferentiated traffic | Shows exact source, medium, and campaign in GA4            |
| **Visibility** | Simple and clean                              | Longer string visible in the address bar                   |

In short, every UTM link is a URL. However, not every URL has UTM tracking. Adding UTM parameters transforms a plain URL into a trackable link. This is how you create a trackable link in Google Analytics.

## Deep Dive: The Six UTM Parameters (Google Parameters) Explained

To build a proper Google custom URL, you need to understand the individual Google parameters. These make up the tracking link.

### 1. Campaign Source (utm_source) \*

This tells you exactly _where_ the traffic came from. It is the origin of your traffic.
**Common utm_source examples:** `google`, `facebook`, `instagram`, `newsletter`, `klaviyo`, `pinterest`, `tiktok`, `bing`.

### 2. Campaign Medium (utm_medium) \*

This tells you _how_ the traffic arrived. Is it paid or organic? It defines the marketing medium.
**Examples:** `cpc` (cost per click), `organic_social`, `paid_social`, `email`, `affiliate`, `referral`.

### 3. Campaign Name (utm_campaign) \*

This identifies the specific promotion, launch, or overarching marketing initiative. The utm_campaign parameter is how you organize your UTM campaigns in Google Analytics.
**Examples:** `summer_sale_2026`, `welcome_series`, `black_friday`, `spring_collection_launch`.

### 4. Campaign ID (utm_id) [Optional]

This is a unique identifier for your ads campaign. Use this to tie your tracking URLs back to a specific campaign ID in your ad platform (e.g., `abc.123`). It is particularly useful for Google Ads and Meta Ads campaign reconciliation. It works flawlessly as a Google tracking template variable.

### 5. Campaign Term (utm_term) [Optional]

This is traditionally used for paid search keywords. It is also highly useful for ecommerce to track audience segments. You can find utm_term in Google Analytics under the traffic acquisition reports.
**Examples:** `retargeting`, `lookalike_audience`, `brand_terms`, `running_shoes_broad`.

### 6. Campaign Content (utm_content) [Optional]

This is used to differentiate creatives or links pointing to the exact same URL. This is critical for A/B testing your creatives.
**Examples:** `hero_banner`, `video_ad_v2`, `sidebar_link`, `red_button_variant`.

\* Required for meaningful campaign tracking.

## How to Track UTM Codes in Google Analytics (GA4)

Once you build your tracking URLs, you need to find UTM data in Google Analytics. Here is how to track UTM codes in GA4:

1. **Open GA4** and navigate to **Reports → Acquisition → Traffic acquisition**.
2. **Change the primary dimension** to "Session source / medium". This lets you view UTM in Google Analytics. You will see your `utm_source` and `utm_medium` values here.
3. **Add a secondary dimension** for "Session campaign". This shows your utm_campaign values alongside source and medium.
4. **Use the search bar** to filter by a specific campaign name, source, or medium. This helps you find UTMs in Google Analytics quickly.
5. **For utm_term and utm_content**, navigate to **Explore → Free form**. Add "Session manual term" or "Session manual ad content" as dimensions.

### Track UTM in GA4 - Pro Tips

- **Create custom reports:** Build a dedicated GA4 campaign tracking report. This should show utm_source, utm_medium, utm_campaign, and revenue in a single view. This is essential for ecommerce stores relying on Google analytics campaign tagging tool features.
- **Use UTM data with Google Tag Manager:** Google Tag Manager automatically captures UTM parameters for Shopify stores. You can create custom triggers based on utm_source or utm_campaign values for advanced tracking.
- **Connect to Looker Studio:** Export your Google Analytics UTM data to Looker Studio dashboards. This is great for client or team reporting.

## Advanced Strategies: Sitelink SEO and UTM Tracking

Marketers often ask how UTM parameters affect Sitelink SEO. When you set up Google Ads sitelinks, you should append UTM parameters. This tracks exactly which sitelink extension drove the click. This does not harm your organic sitelink SEO. Google's indexing bots ignore standard UTM parameters. By using a Google tracking template at the campaign level, your sitelink SEO efforts remain separate from your paid tracking data. This gives you a clear view of both.

## Tracking URL Examples for Shopify

Here are practical utm link examples for common Shopify marketing scenarios. They showcase a variety of campaign source examples and utm campaigns strategies:

### Email Marketing (Klaviyo / Shopify Email)

```
https://your-store.com/collections/new-arrivals?utm_source=klaviyo&utm_medium=email&utm_campaign=welcome_series&utm_content=hero_banner
```

### Facebook / Meta Ads

```
https://your-store.com/products/summer-dress?utm_source=facebook&utm_medium=paid_social&utm_campaign=summer_sale_2026&utm_term=lookalike_audience&utm_content=video_ad_v1
```

### Google Ads (using a Google tracking template)

A Google tracking template allows you to automatically append parameters to your Google Ads URLs. A standard Google tracking template looks like this:

```
{lpurl}?utm_source=google&utm_medium=cpc&utm_campaign={campaignid}&utm_term={keyword}
```

When resolved, it generates a tracking URL like this:

```
https://your-store.com/collections/all?utm_source=google&utm_medium=cpc&utm_campaign=brand_search&utm_term=mens_sneakers&utm_id=abc123
```

### Pinterest Ads

```
https://your-store.com/products/handmade-candle?utm_source=pinterest&utm_medium=paid_social&utm_campaign=holiday_gifts_2026&utm_content=pin_carousel
```

### Instagram Bio Link

```
https://your-store.com?utm_source=instagram&utm_medium=organic_social&utm_campaign=bio_link
```

## Why Ecommerce Merchants Need UTM Tracking

- **Accurate Attribution:** GA4 struggles to distinguish dark social or email traffic. Without UTMs, sales from your Klaviyo emails might just show up as "Direct" traffic. UTM tracking in Google Analytics solves this by hard-coding the source.
- **Calculate ROI:** If you know exactly which Facebook Ad (`utm_content`) drove the most sales, you know where to allocate your budget.
- **A/B Testing Creatives:** Test two different images in the same campaign using `utm_content=image_a` and `utm_content=image_b`.
- **GA4 Campaign Tracking:** UTM parameters are the foundation of all campaign tracking in GA4. Without them, your acquisition reports will be incomplete. Your marketing decisions will be blind.

## UTM Parameter Best Practices for Shopify Stores

Follow these utm parameter best practices. They keep your Google Analytics data clean and actionable:

- **Always use lowercase:** UTMs are case-sensitive. `Facebook` and `facebook` will appear as two entirely different traffic sources in your analytics. Our tool's Strict Mode handles this automatically.
- **Use underscores instead of spaces:** Spaces break URLs. Our tool's Strict Mode automatically replaces spaces with underscores across all fields.
- **Standardize your utm_source values:** Decide on canonical campaign source examples. For example, always use `facebook`, never `fb` or `Facebook`. Stick to them. Our preset suggestions enforce standard naming.
- **Never tag internal links:** Do not put UTMs on your own site navigation or banners. Clicking an internal UTM link will reset the user's session. This destroys the original attribution data. This is a critical error in tracking url setups.
- **Document your conventions:** Create a shared naming guide. This ensures everyone on your team uses the same utm_source, utm_medium, and utm_campaign values.
- **Test before launching:** Always click your generated tracking URL. Make sure it loads your Shopify store correctly before spending money on the campaign. Use our "Fill example" button to see a working demo first.
- **Use utm_id for ad reconciliation:** When running Google Ads or Meta campaigns, include the campaign ID. This helps you reconcile spend data with Google Analytics revenue.
- **Leverage a UTM Checker:** Always run your final links through a UTM checker like ours. This ensures there are no rogue spaces, capital letters, or missing parameters.

## Common Mistakes to Avoid

1. **Inconsistent Naming:** If one team member uses `fb` and another uses `facebook`, your Google Analytics UTM data will be messy. Use our built-in preset suggestions to enforce standard naming conventions across your team.
2. **Ignoring the Safari Length Limit:** URLs longer than 2,048 characters risk being truncated by older browsers or Safari. Our tool shows an amber warning at 1,500 characters. It shows a red alert at 2,048 characters to keep you in the safe zone.
3. **Not using a UTM checker:** Always verify your tracking URL before distributing it. Our built-in real-time preview doubles as a UTM checker. You can catch errors before they cost you data.
4. **Confusing Sitelink SEO:** Do not worry about UTM parameters hurting your sitelink SEO. Search engines know how to handle standard Google tracking parameters.

## FAQ

### What does UTM stand for in Google Analytics?

UTM stands for "Urchin Tracking Module." It is named after Urchin Software. Google acquired this company to build Google Analytics. UTM parameters are now the universal standard for campaign tracking in GA4 and other analytics platforms.

### Are UTM parameters case-sensitive?

Yes. Google Analytics treats `utm_source=Email` and `utm_source=email` as two completely different traffic sources. Our best practice is to always use lowercase letters. Enable Strict Mode to auto-lowercase all your UTM values. Or use our combobox presets which are all pre-formatted in lowercase.

### Do UTM parameters affect SEO?

No. Search engines like Google know to ignore UTM query strings when indexing pages. Adding them will not create duplicate content penalties for your Shopify store. UTM parameters are purely for analytics. They have no impact on search engine rankings or sitelink SEO.

### How many UTM parameters should I use?

At a minimum, always use `source`, `medium`, and `campaign`. Add `term` and `content` only if you need deeper granularity. This is useful for A/B testing ads or tracking specific audience segments. Use `campaign ID` when you need to reconcile URLs with ad platform campaign IDs via a Google tracking template.

### What is the URL character limit?

Modern browsers support very long URLs. However, the safe limit for cross-browser compatibility is **2,048 characters**. Our Free UTM Link Builder includes a real-time character counter. It turns amber at 1,500 characters and red at 2,048 characters. You will always know when your tracking URL is getting too long.

### What does Strict Mode do?

Strict Mode is enabled by default. It automatically lowercases all your UTM values and replaces spaces with underscores. This ensures clean, consistent data in Google Analytics. It also prevents common tracking mistakes. You can toggle it off if you need to preserve exact casing or formatting.

### Can I use custom values or only the presets?

You can use both! Our smart combobox fields offer curated presets for quick selection. You can also type any custom value you need. If your custom input does not match a preset, a "Use custom" option appears instantly. This makes it more flexible than a standard Google custom URL builder.

### How do I view UTMs in Google Analytics?

Navigate to **Reports → Acquisition → Traffic acquisition** in GA4. Change the primary dimension to "Session source / medium". This shows your utm_source and utm_medium data. Add "Session campaign" as a secondary dimension to view utm_campaign values. For utm_term data, use GA4's Explore feature.

### How is this different from the Google Campaign URL Builder?

Our tool offers everything the official Google Analytics campaign tagging tool does. It also includes Shopify-specific presets, a Strict Mode for consistent naming, and a three-tier URL length warning system. It even has a built-in UTM checker. These features are all designed specifically for ecommerce merchants.


---

<!--
  Writing rules for this article:
  - No em dashes anywhere. Use a hyphen.
  - Escape currency dollar signs as \$ (remark-math treats a bare $ as math).
  - Short sentences. First "## " heading is where page.tsx starts rendering.
  - The "### question" blocks must match the FAQ_ITEMS array in page.tsx.
  - Payload-format claims describe the vCard 3.0 (RFC 2426) format the tool emits.
    If you change the format, change this article in the same commit.
-->

---
title: Free vCard QR Code Generator
description: Make a QR code that saves your name, phone, email, company and website to a phone in one tap. Handles names and companies with commas or semicolons, works offline, and never uploads your details.
---

<!-- IMPORTANT: This ## heading must stay the first "## " heading in the file. page.tsx uses
     extractBlogContent() which slices the markdown from the first "\n## " and discards everything
     above it. Without it, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free vCard QR Code Generator

[![Watch How It Works](https://img.youtube.com/vi/pzdGaHqFs0M/maxresdefault.jpg)](https://youtu.be/pzdGaHqFs0M)

This quick video walkthrough shows you how to fill in your contact fields (name, phone, email, company, job title and website), watch the QR code update live, and download a print-ready PNG or SVG in seconds.

## A contact card someone saves in one tap

A business card gets typed in by hand or lost in a drawer. A vCard QR code skips
both. Someone points a phone camera at it, taps once, and your name, phone,
email, company, job title and website are sitting in their contacts. No typing,
no app, nothing to lose.

This vCard QR code generator makes that code. Fill in the fields, pick a style,
and download the code as a PNG or SVG. Everything runs in your browser, so your
details never leave your computer. There is no signup and no watermark.

## What is actually inside a vCard QR code

A vCard QR code is not a link and it does not point at a server. It is a small
block of text in a standard format called vCard, encoded as a QR code. For a
contact named Jane Smith at Acme Inc., the text looks like this:

```text
BEGIN:VCARD
VERSION:3.0
N:Smith;Jane;;;
FN:Jane Smith
TITLE:Head of Sales
ORG:Acme Inc.
TEL;TYPE=CELL:+1234567890
EMAIL:jane@acme.com
URL:https://acme.com
END:VCARD
```

Each line is one field:

- **`FN`** is the full name as it should display.
- **`N`** is the structured name, split into family and given names.
- **`TITLE`** is the job title, **`ORG`** the organization.
- **`TEL`**, **`EMAIL`** and **`URL`** are the phone, email and website.

When a phone camera reads text that begins with `BEGIN:VCARD`, it recognises a
contact and offers to save it instead of opening a browser. Everything the phone
needs is inside the code, which is why it keeps working with no internet
connection and never expires on its own.

Only the fields you fill in are included. A code with just a name and a phone
number carries only those two lines, so it stays small and scans quickly.

## Names and companies with commas or semicolons

The vCard format gives four characters a structural meaning inside a field: the
backslash `\`, the semicolon `;`, the comma `,` and the line break. The semicolon
in particular separates the parts of a name, so a value that contains one has to
be handled carefully.

Consider a contact whose name is written `Ravi, Kumar`, or a company called
`Nimbus; Retail`. If the generator drops those characters straight into the
payload, the comma and semicolon are read as field separators. The phone imports
a contact with the name cut in half, or the company name split into pieces, and
nothing on screen explains why the saved contact looks wrong.

The format solves this by escaping. Each of those four characters is written with
a backslash in front of it when it appears inside a value:

| Character | Written in the payload as |
| --- | --- |
| `\` backslash | `\\` |
| `;` semicolon | `\;` |
| `,` comma | `\,` |
| line break | `\n` |

So `Nimbus; Retail` is stored as `ORG:Nimbus\; Retail`, and the phone reads the
company name back in one piece. This tool applies that escaping for you. You type
the name and company exactly as they are, and the encoding is handled underneath.
It is still worth scanning your finished code with your own phone before you print
a batch of business cards, which is true of any generator.

## What to put on the code

A vCard can hold far more than a name, but a contact card that is quick to scan
and quick to read beats an exhaustive one. A few guidelines:

- **Name and one phone number** is the minimum that is genuinely useful. Everything
  else is optional.
- **Use a mobile number** if you want people to be able to call or text you from the
  saved contact straight away.
- **Add the company and job title** when the code is for work. It is the difference
  between "Jane" in someone's phone and "Jane Smith, Head of Sales, Acme".
- **A website turns the contact into a doorway.** Point it at your homepage, your
  portfolio, or a booking page.
- **Leave out what does not apply.** A code with fewer fields is a smaller, denser
  QR that scans faster from further away.

## Which phones can scan it

Both major platforms read vCard QR codes from the built-in camera, with no
separate app to install.

- **iPhone**: the Camera app has recognised QR codes since iOS 11, released in
  2017. Point it at the code and a notification offers to create the contact.
- **Android**: recent versions scan QR codes from the camera app or from Google
  Lens, and offer to add the contact directly.

Older devices may need a QR scanner app, but on anything sold in the last several
years the camera is enough.

## Where a vCard QR code earns its place

- **Business cards**: printed in a corner, so a card that would be typed in or
  binned becomes a saved contact instead.
- **Email signatures**: as a small image people can scan off their screen.
- **Conference badges and lanyards**: the fastest way to swap details at an event
  without fumbling with a networking app.
- **Trade show stands and posters**: a passer-by saves your details in the second
  they are interested, not later when they have forgotten.
- **Storefronts and receipts**: so a customer can save the shop's number and
  website to call or reorder.
- **Real estate and vehicle signage**: the contact goes straight into the phone of
  someone standing in front of the property.

## Making cards for a whole team at once

One person needs one code. But a whole team, a sales floor or a franchise roster
needs one code each, all in the same style. The CSV Upload tab builds them in one
pass and hands back a zip with one PNG per row.

The columns are the same fields you would type by hand:

```text
Name,Phone,Email,Organization,Job Title,Website
Jane Smith,+1 555 0101,jane@acme.com,Acme Inc.,Head of Sales,https://acme.com
"Ravi, Kumar",+1 555 0102,ravi@nimbus.io,"Nimbus; Retail",Store Manager,https://nimbus.io
Dana Lee,+1 555 0103,dana@example.com,Freelance,Designer,https://danalee.design
```

- **Name** is the only column a row cannot do without.
- **Phone**, **Email**, **Organization**, **Job Title** and **Website** are each
  optional, and a blank cell is simply left out of that person's card.

Note row 2: the name contains a comma and the company a semicolon, both wrapped in
quotes so the CSV itself parses correctly. **You never escape anything for the QR
code.** Type each value exactly as it is, and the vCard escaping is applied when
the code is built. That is the whole reason to use columns rather than pasting a
`BEGIN:VCARD` block, because a hand-written payload carrying an unescaped `;`
produces a card that scans and then saves a broken contact.

This is the part that matters for offices, sales teams, franchises and anyone who
has to hand out fifty cards that all look the same.

## Print it so it gets scanned

- **Say what it is.** "Scan to save my contact" above the code tells people what
  will happen when they point their camera at it.
- **Do not print it too small.** Around 2 to 3 cm square is the practical floor on a
  business card. Bigger is better on a poster or a badge.
- **Keep the contrast high.** A dark code on a light background scans best. A pale
  code on a photo is the most common reason a scan fails.
- **Download the SVG for print.** SVG is vector, so it stays sharp at any size. Use
  the PNG for a screen, an email signature or a social post.

## Frequently asked questions

### How does a vCard QR code work?

A vCard QR code encodes a small block of text in the standard vCard format,
beginning with BEGIN:VCARD and listing fields such as FN for the full name, TEL
for the phone and EMAIL for the email address. When a phone camera reads text that
starts with BEGIN:VCARD, it recognises a contact and offers to save it instead of
opening a browser. The code is not a link and it does not contact any server;
everything the phone needs to create the contact is contained in the code itself.

### What information can I put in a vCard QR code?

This generator covers the fields people actually use on a contact card: full name,
phone number, email address, organization, job title and website. Only the fields
you fill in are written into the code, so a card with just a name and a phone
number stays small and scans quickly, while a full card carries everything. There
is no need to fill in every field; leave out whatever does not apply.

### Will a vCard QR code work on both iPhone and Android?

Yes. iPhones have recognised QR codes in the Camera app since iOS 11 in 2017, and
current Android versions scan them from the camera or from Google Lens. On both, a
code that begins with BEGIN:VCARD prompts the phone to create a contact with the
fields already filled in. Very old devices may need a separate scanner app, but no
app is required on a reasonably recent phone.

### My name or company has a comma or semicolon. Will the contact still save correctly?

Yes, as long as the generator escapes them. The vCard format uses the semicolon,
comma and backslash as separators inside a field, so a value containing one has to
be written with a backslash in front of it, or the phone reads only part of the
name or splits the company into pieces. This tool applies that escaping
automatically, so you type your name and company exactly as they are. It is still
worth scanning your finished code with your own phone before printing a batch.

### Do I need an app to scan it, and does it need an internet connection?

No app and no internet. On a reasonably recent iPhone or Android phone the
built-in camera reads the code and offers to save the contact. Because the code
contains the contact details directly rather than a link to a server, it works
completely offline, both when you create it here in your browser and when someone
scans it later.

### Can I make vCard QR codes for a whole team at once?

Yes. The CSV Upload tab takes a file with the columns Name, Phone, Email,
Organization, Job Title and Website, and returns a zip containing one PNG per row,
named after the person. Name is the only column a row cannot do without; every
other field is optional and a blank cell is simply left out of that card. You type
each value exactly as it is, including any comma or semicolon, because the vCard
escaping is applied when each code is built. This is aimed at offices, sales teams
and franchises handing out matching cards.

### Does the vCard QR code expire or can I edit it later?

The code never expires on its own, because it is a fixed image of a fixed piece of
text. It keeps working for as long as the details on it are current. It cannot be
edited after it is made, though: the contact details are baked into the image, so
if your phone number or job title changes you make a new code. If you expect your
details to change often, point the website field at a page you control and update
that instead.

### What size should I print a vCard QR code?

Around 2 to 3 cm square is the practical minimum on a business card held at reading
distance, and bigger is better on a badge, a poster or a shop window seen from
further away. Download the SVG for anything you are printing, because it is vector
artwork and stays sharp at any size, and use the PNG for screens, email signatures
and social posts. Keep the contrast high, with a dark code on a light background.


---

<!--
  Writing rules for this file:
  - First `## ` heading is where page.tsx starts rendering (extractBlogContent).
  - Escape currency as \$ (remark-math). No em dashes. Short sentences.
  - Never use AI filler words (see the prohibited list in CLAUDE.md).
  - This is a business insert, NOT a legal warranty. Make no compliance claim.
  - Legal facts verified against the FTC Businessperson's Guide to Federal
    Warranty Law (Magnuson-Moss Warranty Act, 15 U.S.C. 2301-2312; 16 CFR
    700-702). Hedge every legal statement and cite the source.
-->

---
title: "Free Warranty Card Template Maker"
description: "Design a printable warranty card, add a scan-to-register QR, and batch a whole run of cards each with a unique serial. Free, no signup, no watermark."
---

## A warranty card template that prints true-size and batches serials

[![Watch how the free Warranty Card Maker works](https://img.youtube.com/vi/rj_uDkJ2TeA/maxresdefault.jpg)](https://youtu.be/rj_uDkJ2TeA)

A warranty card is the small printed insert that ships inside a product box. It records what the customer bought, how long it is covered, what the coverage includes, and how to get support or register the product. This free warranty card template maker builds that insert in your browser: fill in the fields, pick one of 12 designs, choose a real-unit size, and download a print-ready PNG, PDF, or SVG with no watermark.

Most warranty card tools are static galleries. You download a picture and retype everything in a design app. This one is a live editor. The preview updates as you type, the sizes are real inches so the file prints at true size, and there is one workflow that no drag-and-drop design tool handles cleanly: printing a batch of cards where every card carries a different serial number and a QR code that already knows that serial.

If you also drop a thank-you note in the box, the sibling [thank-you card generator](/tools/thank-you-card-generator) shares this engine and matches the look.

## What is a warranty card

The term shows up under a few names. A **warranty card** is the everyday name for the insert. A **warranty certificate** is the same idea with a more formal, certificate-style layout and a title like "Certificate of Warranty". A **product registration card** is the version that leads with a call to register, so the brand can capture the buyer and the purchase date. A **warranty template** is just the reusable starting layout for any of these. This tool makes all of them from the same fields, so you can pick the tone that fits your product and brand.

A warranty card is a marketing and record-keeping document, not a legal contract. It is the friendly, in-the-box reminder of a promise your written warranty policy actually defines. Keeping that distinction clear matters, and the section on full versus limited warranties below explains why.

## What to put on a warranty card

A complete warranty card usually carries these fields, and the tool has an input for each one:

- **Brand and logo.** The company name, and an optional uploaded logo. Your logo stays in the browser and never uploads to a server.
- **Product name and model or SKU.** What the card covers, specifically.
- **Serial number.** The single unit's identifier. Pre-fill it, or leave it blank to print a ruled line the retailer completes by hand.
- **Warranty period.** The length of cover, for example "2-Year Limited Warranty" or "5-Year Warranty".
- **What is covered.** A short summary of the coverage, such as defects in materials and workmanship under normal use.
- **What is not covered.** The common exclusions: accidental damage, misuse, normal wear, unauthorized repairs.
- **Purchase date, dealer, and order number.** Point-of-sale details that are often filled in by hand, so each prints as a ruled line when left blank.
- **Support contact and website.** Where the customer goes for help.
- **Scan-to-register QR.** A code that opens your registration page, with the unit's serial appended.

You do not have to use every field. Empty fields are skipped so the layout stays clean, except for the four fill-in fields, which can print as blank lines on purpose.

## The batch serial and scan-to-register QR workflow

This is the reason the tool exists. A single warranty card is easy to make anywhere. A run of a hundred cards where each one has a unique serial, and each serial is baked into a scannable registration QR, is the part that breaks other tools. Spreadsheet-driven bulk features can place a different serial per card, but they cannot generate a different QR per row that carries that serial. This tool does both in one step.

Switch to **Bulk serials** mode and choose a source:

- **Auto sequence.** Set a start value like `SN-00001` and a count. The tool reads the prefix (`SN-`), the starting number, and the zero-pad width from the digits, then generates `SN-00001`, `SN-00002`, and so on. Every serial is unique and padded to the same width. A run is capped at 500 cards so the sheet stays manageable, with a clear message when you go over.
- **Import CSV.** Upload a CSV with a Serial column, plus optional Product, Model, Purchase date, and Period columns. You get one card per row using that row's real serial. Importing replaces the batch; clear the file to return to the auto sequence.

Each card's QR then encodes your registration URL with that card's serial appended as a query parameter. With a base URL of `https://acme.com/register`, card number 42 gets a QR that opens `https://acme.com/register?sn=SN-00042`. The customer scans it, your registration page reads the `sn` value, and the serial is pre-filled. No typing a long serial off a sticker.

You control the parameter name. If your page expects `serial` instead of `sn`, change one field and every card updates. Change the base URL and every card updates. Turn the register block off and the QR is removed from every card. The codes are real, standards-based QR codes, so they decode to the exact URL in the preview and in every downloaded file.

The batch tiles onto US Letter or A4 with dashed cut guides, at your chosen card size, and downloads as a multi-page PDF or as PNGs.

## Fill-in lines versus pre-filled fields

Real warranty and registration cards often ask a retailer or the customer to write in a few details at the point of sale. The tool supports this directly. The **Serial**, **Purchase date**, **Dealer**, and **Order number** fields are fill-in capable: leave one blank and it prints as a labelled ruled line with room to write; type a value and it prints as static text instead.

The **Fill-in Card** template makes every record field a ruled line, which suits a card the store completes by hand. The **Appliance** template lays the same fields out as a boxed grid, the format most appliance registration cards use. Every other template honors the same rule for those four fields, so you can mix pre-filled and hand-completed details on any design.

## Warranty card, warranty certificate, or warranty template

These are not different documents so much as different framings of the same insert.

- Reach for a **warranty certificate** layout (Classic Certificate, Luxury Dark) when the card is a keepsake that signals quality, for furniture, jewelry, or premium electronics.
- Reach for a **product record** layout (Modern Minimal, Electronics, Appliance) when the job is to capture the model, serial, and purchase date cleanly.
- Reach for a **registration-focused** layout (Registration Focus) when the priority is getting the customer to scan and register.

They all draw from the same fields, so switching template never makes you retype anything.

## Full versus limited warranty: how US law labels warranties

This section is background, not legal advice, and the card you make here does not create, register, or satisfy any warranty on its own. Your written warranty policy does that.

In the United States, warranties on consumer products are governed by the Magnuson-Moss Warranty Act (15 U.S.C. 2301-2312) and Federal Trade Commission rules (16 CFR Parts 700-702). According to the FTC's Businessperson's Guide to Federal Warranty Law, when a business gives a written warranty on a consumer product costing more than \$10, that warranty must carry a title stating whether it is **full** or **limited**.

The FTC describes a **full warranty** as one where all of the following are true: you do not limit the duration of implied warranties; you provide warranty service to anyone who owns the product during the warranty period, not just the first buyer; you provide that service free of charge; and you provide, at the customer's choice, either a free replacement or a full refund if you cannot repair the product after a reasonable number of tries. A full warranty also states its duration, as in "Full 12-Month Warranty".

A **limited warranty**, in the FTC's words, is one where the coverage does not meet all of those conditions. For example, a limited warranty may cover parts but not labor, or may apply only to the original purchaser. Most consumer product warranties are limited, which is why "Limited Warranty" is the phrase you see most often.

Two related FTC rules apply at a slightly higher price point. The Disclosure Rule (16 CFR Part 701) and the Pre-Sale Availability Rule (16 CFR Part 702) cover written warranties on consumer products costing more than \$15, and deal with stating the warranty terms and making them available to shoppers before they buy.

Use these designations on your card only if they match your actual written warranty. If you are not sure how your warranty should be labeled, confirm it with your own policy or counsel rather than guessing on the insert. The card is the reminder; the policy is the promise.

## How to print and insert warranty cards

1. **Design the card.** Fill in the fields, choose a template, theme, and font, and set a real-unit size. Common insert sizes are 4 x 6 in, 5 x 3.5 in, and the 3.5 x 2 in business-card mini.
2. **Add the register QR.** Turn on the scan-to-register block and enter your registration page URL. Confirm the preview under the URL field shows the link you expect.
3. **Batch the serials, if needed.** Switch to Bulk serials mode, auto-sequence or import your serials, and pick the sheet paper and card size.
4. **Download.** For a single card, download the PDF, which is sized to the card's real dimensions. For a batch, download the sheet PDF or PNG.
5. **Print at 100% scale.** In the print dialog, turn off "fit to page" so the card prints at its true size. Cut along the dashed guides on a bulk sheet.
6. **Insert.** Drop the card in the box next to the product, or slip it into a small sleeve on the packaging.

## Tips for a better warranty card

- Keep the coverage summary to one or two plain sentences. The full terms belong in your policy, not on a small card.
- Put the register QR where a thumb naturally lands, and keep the caption short, like "Scan to register".
- For electronics, the Electronics template sets the model and serial in a monospace face so long alphanumeric codes stay readable.
- Test one printed card before running a batch. Confirm the QR scans and the cut guides line up.
- Match the theme to your packaging. A kraft box pairs with the Maker Kraft template; a premium product pairs with Luxury Dark.

## Frequently asked questions

### Is this warranty card maker free?

Yes, it is 100% free with no signup and no watermark. Design and download as many warranty card templates as you want as PNG, PDF, or SVG files. Everything runs in your browser, so your text, logo, and serial numbers never leave your computer.

### How do I make a warranty card template?

Fill in the product name, model or SKU, warranty period, and what the warranty covers, add your brand name and an optional logo, then turn on the scan-to-register QR if you want one. Pick one of the 12 templates, choose a color theme, font, and a real-unit size, and download. The live preview updates as you type, so you always see the finished card before you print it.

### Can each card have a unique serial number and its own QR code?

Yes, and this is the feature Canva and Word cannot do cleanly. Switch to Bulk serials mode and either auto-sequence the serials (set a start like SN-00001 and a count) or import a CSV of your real serials. The tool tiles one card per serial onto a printable sheet, and each card's scan-to-register QR encodes your registration page URL with that card's serial appended, for example https://acme.com/register?sn=SN-00042. A customer scans it and their serial is pre-filled on your page.

### What is the fill-in line feature?

Any of the Serial, Purchase date, Dealer, or Order number fields you leave blank prints as a labelled ruled line, so a retailer or customer can complete it by hand at the point of sale. Fill the field in the form instead and it prints as static text. The Fill-in Card and Appliance templates lean on this, and it works on every template.

### Is a warranty card a legal warranty document?

No. A warranty card is a business insert that records the product and registration details and points the customer to your support and registration. It is not itself a legally-operative warranty, and this tool makes no compliance claim. Your actual warranty terms and any legal designation live in your written warranty policy. The section above explains, accurately, how US law labels warranties as full or limited, but the card does not create or satisfy any statute.

### What sizes are warranty cards and can I print them?

Yes. The tool uses real insert-card sizes: 4 x 6 in, 5 x 3.5 in (small flat card), 5 x 7 in, A6 postcard, a 3.5 x 2 in business-card mini, and a 4 x 4 in square, in portrait or landscape, plus a custom size. Download the PDF and print at 100% scale (no fit-to-page) so cards come out at their true size, then cut them out.

### Can I print a whole batch of warranty cards at once?

Yes. In Bulk serials mode the tool tiles a uniquely-serialized card per unit onto an A4 or US Letter sheet with dashed cut guides, up to 500 cards per batch. Download it as a PDF (one page per sheet) or PNG. Every card keeps its own serial and its own register QR.

### Will the QR code actually scan and work?

Yes. The QR is a real, standards-compliant code that scans in the live preview and in every export (PNG, PDF, SVG). On a single card it encodes the exact registration URL you enter, so you are free to add your own UTM or tracking parameters to that URL. In Bulk serials mode, each card's unique serial is appended to your URL automatically (as `sn=SERIAL`) so every card gets its own QR. Turn the register block off and the QR is removed cleanly.

### What warranty card templates are included?

There are 12 templates: certificate and formal styles (Classic Certificate, Luxury Dark, Warranty Seal, Two-Column Terms), product-record styles (Modern Minimal, Electronics, Appliance, Maker Kraft, Compact Mini), registration and fill-in styles (Registration Focus, Fill-in Card), and a Blank Canvas. Each is a finished layout you can recolor, refont, and resize.


---

---
title: WhatsApp QR Code Generator
---

<!-- IMPORTANT: This ## heading must stay the first "## " heading in the file. page.tsx uses
     extractBlogContent() which slices the markdown from the first "\n## " and discards everything
     above it. Without it, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free WhatsApp QR Code Generator

[![Watch How It Works](https://img.youtube.com/vi/pzdGaHqFs0M/maxresdefault.jpg)](https://youtu.be/pzdGaHqFs0M)

This quick video walkthrough shows you how to enter your WhatsApp number, add an optional pre-filled chat message, watch the QR code update live, and download a print-ready PNG or SVG in seconds.

## Turn a scan into an open WhatsApp chat

A WhatsApp QR code is the fastest way to let a customer start a conversation with you. They point their phone at the code, WhatsApp opens on a fresh chat with your number, and if you added one, a message is already typed in the box. There is no number to save, no username to search for and no form to fill in. For a store, a service business, a market stall or a product insert, that turns a printed surface into a one-tap line straight to your inbox.

This tool builds that code entirely in your browser. You type a phone number, optionally add a message, and the QR updates live. When it looks right, download it as a PNG for screens or an SVG for print. Nothing is uploaded, there is no account to create, and there is no watermark on the finished code.

## What a WhatsApp QR code actually contains

A QR code stores text. What makes this one a WhatsApp code is that the text it stores is a `wa.me` click-to-chat link, which is WhatsApp's own official link format for starting a chat with a specific number:

```
https://wa.me/1234567890?text=Hi%2C%20I%20have%20a%20question
```

- `https://wa.me/` is the click-to-chat host. When a phone opens a link that starts with it, WhatsApp takes over and opens a chat.
- `1234567890` is the number, written as digits only. This is the part people most often get wrong, and it has its own rule below.
- `?text=...` is the optional pre-filled message, URL-encoded so spaces and punctuation survive. You never type the encoding yourself; the tool applies it.

Because the code stores a plain link, it is a normal QR code that any camera can read. It does not expire and does not depend on any account of yours staying logged in.

## The number format rule that makes it work

`wa.me` only understands the full international number as digits, with nothing else. That means:

- Include the country code. A US number is `1...`, a UK number is `44...`, an Indian number is `91...`, and so on.
- Remove the plus sign, spaces, dashes, brackets and any leading zero. A UK mobile written locally as `07123 456789` becomes `447123456789`: the leading zero is dropped and the `44` country code is added.

You do not have to strip those characters yourself. Type the number however is natural, and this tool removes the plus sign, spaces and dashes automatically to produce the digits-only form the link needs. Still, it is worth checking the result: the single most common reason a WhatsApp code opens an empty or wrong chat is a missing country code or a leading zero that should have been dropped.

## It opens a chat to you, not a login

There is an important distinction to be clear about, because it trips people up. WhatsApp also uses a QR code inside WhatsApp Web, but that one is a login code: it links your own phone to a browser session and it regenerates constantly. This tool does not make that.

What this tool makes is a public click-to-chat code. Anyone can scan it, and scanning it opens a chat addressed to your number so they can message you. You put it on a poster, a website, a business card or a shop window, and it is a doorway into your inbox, not a way to log anyone in. Keep the two ideas separate: one logs your device in, the other invites a customer to message you.

## Add an optional pre-written message

The Message field is optional, but it is where a lot of the value sits. When you fill it in, the text is added to the link and lands in the customer's chat box ready to send. That primes the conversation:

- For support, a body such as `Hi, I have a question about my order` means the customer opens the chat already knowing what to say.
- For sales, `I'd like the current price list` routes the enquiry cleanly.
- For bookings, `I'd like to check availability` gives your team the context up front.

Leave the field blank and the code still works; it just opens an empty chat with your number. As with SMS, nothing is sent automatically. The customer sees the draft and taps send when they are ready, so they stay in control.

## Where WhatsApp QR codes earn their place

- **Customer support.** A shelf tag or packaging insert that reads scan to chat with us turns a question into a message instead of a lost sale.
- **Catalogues and price lists.** Put a code on a flyer with a pre-filled request, and interested customers pull the latest list straight into a chat.
- **Lead capture at events.** A booth poster lets a passer-by open a chat with your team without handing over their details on a form.
- **Orders and bookings.** A code by the till or on a menu starts an enquiry with the context already typed.

In every case the friction of finding your number and composing an opening line is gone, and because WhatsApp threads are persistent, the conversation stays put for follow-up.

## Design and print tips

The generator includes the same styling controls as the main QR tool: colours for the dots and corners, dot and corner shapes, quick templates, spacing and an optional centre logo. A few habits keep a code scannable once it is printed:

- **Keep strong contrast.** A dark code on a light background reads fastest. A busy photo behind the code is the usual reason a scan fails.
- **Do not shrink it too far.** Around 2 to 3 cm square is the practical minimum on something held at reading distance. Give it more room on a poster or a window.
- **Print from the SVG.** SVG is vector artwork and stays crisp at any size, so it is the right choice for print. Use the PNG for screens, chat bios and social posts.
- **Test before you print a batch.** Scan your finished code with your own phone and confirm it opens a chat with the right number and message before committing to a print run.

## Frequently asked questions

### How does a WhatsApp QR code work?

A WhatsApp QR code encodes a wa.me click-to-chat link, for example https://wa.me/1234567890. When a phone camera reads it, the phone opens WhatsApp on a new chat with that number, ready for the person to type or send. If you added a message, that text is pre-filled in the chat box. It is an ordinary link that WhatsApp recognises, so nothing is sent until the person taps send.

### How do I format the phone number?

Use the full international number: the country code followed by the rest of the number, with no plus sign, spaces, dashes, brackets or leading zeros. wa.me only accepts digits, so a UK mobile written locally as 07123 456789 becomes 447123456789. This tool strips the plus sign, spaces and dashes for you, so you can type the number in a natural format and it converts it to the digits-only form wa.me needs.

### Is this the same as the WhatsApp Web login QR code?

No, and this is an important difference. The QR code inside WhatsApp Web is a login code that links your own phone to a browser session, and it changes every time. This tool makes a different thing: a public click-to-chat code that anyone can scan to open a chat with your number. You print it, share it or put it on a website, and scanning it starts a conversation with you rather than logging anyone in.

### Can I include a pre-written message?

Yes. Fill in the optional Message field and it is added to the link as a URL-encoded text parameter, so it lands in the chat box ready to send. This is useful for support and sales: the customer scans and a message such as Hi, I have a question about my order is already typed, so they only tap send. Leave the field blank and the code just opens an empty chat with your number.

### Do I need an internet connection to use it?

Scanning the code and opening WhatsApp needs no separate app beyond WhatsApp itself, but sending a message does need an internet connection because WhatsApp is an internet messaging service, unlike SMS. The person scanning also needs WhatsApp installed and set up on their phone. Creating the code here is fully offline and private, since it runs entirely in your browser.

### What can I use a WhatsApp QR code for?

Common uses are customer support (scan to chat with us), sending product catalogues and price lists on request, lead capture at events and on packaging, and order or booking enquiries. Because the code opens a chat with a pre-filled message, it turns a poster, shelf tag, business card or shop window into a one-tap way for a customer to start a WhatsApp conversation with you.

### What size should I print a WhatsApp QR code?

Around 2 to 3 cm square is the practical minimum on something held at reading distance, such as a business card or a flyer, and bigger is better on a poster, table tent or shop window seen from further away. Download the SVG for print because it is vector artwork and stays sharp at any size, and use the PNG for screens, chat bios and social posts. Keep a dark code on a light background for reliable scanning.


---

<!--
  Writing rules for this article:
  - No em dashes anywhere. Use a hyphen.
  - Escape currency dollar signs as \$ (remark-math treats a bare $ as math).
  - Short sentences. First "## " heading is where page.tsx starts rendering.
  - The "### question" blocks must match the FAQ_ITEMS array in page.tsx.
  - Payload-format claims describe the ZXing WIFI: format the tool actually emits.
    If you change the format, change this article in the same commit.
-->

---
title: Free WiFi QR Code Generator
description: Make a WiFi QR code your guests can scan to join your network. Handles WPA and WPA2, open networks, hidden networks, and passwords with special characters.
---

<!-- IMPORTANT: This ## heading must stay the first "## " heading in the file. page.tsx uses
     extractBlogContent() which slices the markdown from the first "\n## " and discards everything
     above it. Without it, the YouTube thumbnail below is never rendered on the page. -->

## How to Use the Free WiFi QR Code Generator

[![Watch How It Works](https://img.youtube.com/vi/pzdGaHqFs0M/maxresdefault.jpg)](https://youtu.be/pzdGaHqFs0M)

This quick video walkthrough shows you how to enter your network name and password, pick the security type, watch the QR code update live, and download a print-ready PNG or SVG for guests to scan in seconds.

## A WiFi QR code your guests can actually scan

Reading a WiFi password out loud is a small, repeated tax. In a cafe it is a
question asked forty times a day. In a shop it interrupts a sale. In a rental it
is the first message every guest sends you. A WiFi QR code removes it: someone
points a camera at a card on the table, taps once, and they are on the network.

This WiFi QR code generator makes that card. Type the network name and password,
pick the security type, and download the code as a PNG or SVG. Everything runs in
your browser, so the password never leaves your computer. There is no signup and
no watermark.

## What is actually inside a WiFi QR code

A WiFi QR code is not magic and it is not a link. It is a short line of text in a
format phones recognise, encoded as a QR code. For a network called
`Cafe Guest` with the password `flatwhite2026`, the text is exactly this:

```text
WIFI:T:WPA;S:Cafe Guest;P:flatwhite2026;;
```

Three fields, separated by semicolons:

- **`T:`** the security type. `WPA` covers WPA, WPA2 and WPA3. `WEP` is the old
  standard. `nopass` means an open network with no password.
- **`S:`** the SSID, which is the network name as it appears in the WiFi list.
- **`P:`** the password. An open network leaves this out entirely.

A hidden network adds a fourth field, `H:true`, and the whole thing ends with two
semicolons. That is the entire specification. When your phone camera sees this
text it recognises the `WIFI:` prefix and offers to join instead of opening a
browser.

This matters for one practical reason: **the QR code contains your password in
plain text.** Anyone who scans it, or photographs the card and decodes it later,
has the password. That is not a flaw in the format, it is what the format is for.
It is also the reason the advice further down is to put your guest network on the
card, not your main one.

## Passwords with special characters: where most generators break

The format uses `;` and `:` as separators. So what happens when your password
itself contains a semicolon?

If the generator does nothing about it, the payload becomes ambiguous. A password
of `cafe;2026` produces `P:cafe;2026;;` and the scanner reads the password as
`cafe`, then treats `2026` as a malformed field. The phone tries to join with the
wrong password and reports that it cannot connect. Nothing on screen explains why.

The format handles this with backslash escaping. Four characters have to be
escaped when they appear inside a network name or password:

| Character | Written in the payload as |
| --- | --- |
| `\` backslash | `\\` |
| `;` semicolon | `\;` |
| `,` comma | `\,` |
| `:` colon | `\:` |

So `cafe;2026` is encoded as `P:cafe\;2026;`, and the scanner reads it back
correctly. This tool escapes those characters for you. You type the password
exactly as it is, and the encoding is handled underneath.

It is worth testing your own code with your own phone before you print a hundred
of them. That is true of any generator, including this one.

## Choosing the right security type

The security type has to match how your router is actually configured. Getting it
wrong produces a code that scans fine and then fails to connect.

- **WPA** is the answer for almost every modern network. Use it for WPA, WPA2 and
  WPA3. Your router settings may call it WPA2-PSK or WPA2/WPA3-Personal; they all
  take `WPA` here.
- **WEP** is a much older standard that is no longer considered secure. Choose it
  only if your router genuinely still uses it, and treat that as a sign the router
  needs replacing.
- **None** is for an open network with no password at all. Choosing this hides the
  password field, because an open network has nothing to put in it.

If you are not sure, look at your phone. Open the WiFi settings, tap the network
you are already connected to, and the security type is listed there.

## Hidden networks

Some networks are configured not to broadcast their name. They still work, but
they do not appear in the list of available networks, and a normal WiFi QR code
will not connect to one. The phone scans the code, looks for a network with that
name, finds nothing, and gives up.

Turn on the **Hidden network** switch and the code carries the extra `H:true`
field that tells the phone to look for the network by name rather than waiting to
see it announced.

If your network shows up normally in the WiFi list, leave this off.

## Which phones can scan it

Both major platforms handle WiFi QR codes from the built-in camera app, with no
separate scanner app to install.

- **iPhone**: the Camera app has recognised QR codes since iOS 11, released in
  2017. Point the camera at the code and a notification appears at the top of the
  screen offering to join the network.
- **Android**: recent versions scan QR codes from the camera or from Google Lens,
  and Android 10 added the matching feature in the other direction, letting you
  share a saved network as a QR code from the WiFi settings.

Older devices may need a QR scanner app, but on anything sold in the last several
years the camera is enough.

## Print it so people actually use it

A WiFi code that nobody notices saves nobody any time. A few things that make the
difference:

- **Say what it is.** A bare QR code on a table tells a guest nothing. Put
  "Scan to join our WiFi" above it and the network name below.
- **Print the password as text as well.** Some guests will have an older phone,
  and some will simply prefer to type. The code should be the fast path, not the
  only path.
- **Do not print it too small.** Around 2 to 3 cm square is the practical floor for
  a phone held at a comfortable distance. Bigger is better on a wall or a window.
- **Keep the contrast high.** Dark code on a light background scans best. A pale
  code on a busy photograph is the most common reason a code fails to read.
- **Download the SVG for anything printed.** SVG is vector, so it stays sharp at
  any size. Use the PNG for a screen, an email or a social post.

## Where a shop or a rental should use one

- **Cafes and restaurants**: on the table tent, the menu, or the back of the
  receipt.
- **Retail counters**: next to the till, so customers can look up a product while
  they are still in the shop.
- **Short-term rentals**: in the welcome book and on the fridge. This is the single
  most asked question a host gets.
- **Offices and coworking**: in the reception area and each meeting room, on the
  guest network.
- **Events, popups and market stalls**: on the signage, so visitors can get online
  to look you up or pay.

## Use your guest network, not your main one

This is the one piece of security advice worth repeating, because the convenience
of a WiFi QR code makes it easy to forget.

The code carries the password in a form anyone can read. Printed on a card in a
public room, it is effectively a published password. If that password is for the
same network as your point of sale terminal, your office computers or your
network storage, then every visitor is on the same network as your business.

Almost every router made in the last decade can run a separate guest network. It
has its own name and its own password, and it keeps guests away from your internal
devices. Set one up, put that on the card, and change it whenever you like without
touching anything else.

## Making codes for many networks at once

One network needs one code printed many times, which is a printing job. But if you
manage several networks, each with its own name and password, the CSV Upload tab
builds them all in one pass and hands back a zip with one PNG per row.

The columns are the same things you would type by hand:

```text
Label,SSID,Password,Encryption,Hidden
Unit 1,Maple St Guest,welcome2026,WPA,false
Unit 2,Maple St Upper,"seaview,42",WPA,false
Lobby,Lobby Free WiFi,,none,false
Back office,Backoffice,staffonly,WPA,true
```

- **Label** names the file inside the zip. Leave it out and the network name is
  used instead.
- **SSID** is the only column a row cannot do without.
- **Password** is left blank for an open network.
- **Encryption** accepts `WPA`, `WPA2`, `WPA3`, `WEP`, or `none` and `open` for a
  network with no password. Leave it blank and WPA is assumed.
- **Hidden** accepts `true` or `yes` for a network that does not broadcast its
  name. Blank means a normal network.

Note row 2: the password contains a comma, and it is written inside quotes so the
CSV itself parses correctly. **You never escape anything for the QR code.** Type
the password exactly as it is, including semicolons and colons, and the payload
escaping is applied when the code is built. That is the whole point of using
columns rather than pasting a `WIFI:` string, because a hand-written payload
carrying an unescaped `;` produces a code that scans and then fails to connect.

This is the part that matters for property managers, franchise sites, coworking
spaces and anyone deploying routers with per-site credentials.

## Frequently asked questions

### How does a WiFi QR code work?

A WiFi QR code encodes a short line of text in a format phones recognise, in the
shape `WIFI:T:WPA;S:NetworkName;P:password;;`. The `T` field is the security type,
`S` is the network name and `P` is the password. When a phone camera reads text
beginning with `WIFI:`, it offers to join that network instead of opening a
browser. The code is not a link and it does not contact any server; everything the
phone needs is inside the code itself.

### Is it safe to share my WiFi password as a QR code?

The password is stored in the code as plain text, so anyone who scans the code, or
photographs it and decodes it later, can read it. That is inherent to the format
rather than a weakness of any particular generator. The safe way to use one is to
put your guest network on the code rather than your main network. A guest network
has its own password and keeps visitors away from your computers, point of sale
system and network storage, so a shared password costs you nothing.

### Will a WiFi QR code work on both iPhone and Android?

Yes. iPhones have recognised QR codes in the Camera app since iOS 11 in 2017, and
current Android versions scan them from the camera or from Google Lens. Android 10
also added the reverse feature, letting you share a network you are already
connected to as a QR code from the WiFi settings. Very old devices may need a
separate scanner app, but no app is required on a reasonably recent phone.

### My WiFi password has special characters. Will the code still work?

Yes, as long as the generator escapes them. The format uses semicolons and colons
as field separators, so a password containing a semicolon, colon, comma or backslash has to be
written with a backslash in front of it, otherwise the scanner reads only part of
the password and the connection fails with no useful error. This tool applies that
escaping automatically, so you type the password exactly as it is. It is still
worth scanning your finished code with your own phone before printing it in
quantity.

### How do I make a QR code for a hidden network?

Turn on the Hidden network switch before you download. That adds an `H:true` field
to the code, which tells the phone to search for the network by name instead of
waiting for it to appear in the list of nearby networks. Without that field the
phone scans the code, cannot see a network with that name, and fails to connect. If
your network appears normally in the WiFi list, leave the switch off.

### Which security type should I choose?

Choose WPA for almost every modern network; it covers WPA, WPA2 and WPA3, which
your router might label WPA2-PSK or WPA2/WPA3-Personal. Choose WEP only if your
router genuinely still uses that older standard. Choose None for an open network
with no password, which hides the password field because there is nothing to put in
it. If you are unsure, open the WiFi settings on a phone already connected to the
network and check the security type listed there.

### Does the WiFi QR code expire or need internet to work?

No. The code is a fixed piece of text encoded as an image, so it works forever and
works offline. It keeps working until you change the network name or the password,
at which point the old code stops connecting and you need to make a new one. Since
this generator runs entirely in your browser, you can also make the code on a
machine with no internet connection at all.

### Can I make WiFi QR codes for lots of networks at once?

Yes. The CSV Upload tab takes a file with the columns Label, SSID, Password,
Encryption and Hidden, and returns a zip containing one PNG per row, named after
the label or the network. SSID is the only column a row cannot do without: leave
the password blank for an open network, write `none` or `open` in the encryption
column for one, and put `true` in the hidden column for a network that does not
broadcast its name. You type every password exactly as it is, including
semicolons and colons, because the payload escaping is applied when each code is
built. This is aimed at property managers, franchise sites and coworking spaces
with a different network per location.

### What size should I print a WiFi QR code?

Around 2 to 3 cm square is the practical minimum for a phone held at normal
reading distance, and bigger is better for a wall, a window or a table tent seen
from further away. Download the SVG for anything you are printing, because it is
vector artwork and stays sharp at any size, and use the PNG for screens, emails and
social posts. Keep the contrast high, with a dark code on a light background.


---

<!-- WRITING RULES FOR THIS FILE:
     1. No em-dashes. Use a regular dash (-) instead. Em-dashes sound robotic and hurt readability.
     2. Keep sentences short and simple. Plain English ranks better in search and is easier to scan.
     3. Escape all currency dollar signs as \$ so remark-math does not interpret them as inline math.
     4. The "## Frequently asked questions" answers must match FAQ_ITEMS in page.tsx word for word.
     5. A work order is NOT a regulated document. Never cite a CFR, ISO or statute for its fields,
        and never claim a signature is legally required. -->

# Free Work Order Template

Fill in a **work order template** and download a print-ready PDF in a couple of minutes. Add the job, the customer, the service location, the equipment, the task checklist, and the labor and parts, then hand the technician a clean sheet and collect a signature at the end. It is free, runs entirely in your browser, and needs no signup.

<!-- IMPORTANT: This ## heading must stay here. page.tsx uses extractBlogContent() which slices the
     markdown from the first "\n## " and discards everything above it (h1, intro, etc.). -->

## What Is a Work Order?

[![Watch how the free Work Order Generator works](https://img.youtube.com/vi/iWy9iUwseG4/maxresdefault.jpg)](https://youtu.be/iWy9iUwseG4)

A work order is the document that tells someone to do a job. It records what needs doing, who asked for it, who is assigned to it, where the work happens, what equipment it is on, when it is scheduled, and what labor and parts it is expected to take.

It is the paperwork in the middle of a job. A customer asks for a price, you send a quote or an estimate. When the customer approves it, you raise a **work order** and dispatch it. When the work is finished, you send an invoice. That is the sequence, and each of those four documents has a different job.

Because the work order is issued **before** the work is done, its money region is an estimate. That is why the bottom line on this template reads **Estimated Total** rather than Amount Due. A work order does not demand payment. It instructs work.

The same document goes by several names, and they all mean the same thing:

- **work order**
- **job order**
- **service order**
- **service ticket**
- **work request**

Field service software tends to say work order. Job shops say job order. Ticket systems say service ticket. Pick whichever your customers recognise. The template on this page is the same either way.

## Work Order vs Invoice vs Purchase Order vs Estimate

These four documents get mixed up constantly, and mixing them up is how a job gets billed twice or never billed at all.

| Document | Who issues it | What it does | Money |
| --- | --- | --- | --- |
| Estimate or quote | The person doing the work | Offers a price before anything is agreed | A price that may change |
| **Work order** | The person doing the work, or the customer's facilities team | Instructs the work to be performed | An estimate of labor and parts |
| Purchase order | The buyer | Commits the buyer to purchase goods or services | A committed spend |
| Invoice | The person who did the work | Requests payment for completed work | An amount due |

Three distinctions worth being precise about:

**A work order is not an invoice.** An invoice asks for money for work that is already finished. A work order asks for work to be started. If you hand a customer a document that says Amount Due before the technician has been on site, you have sent an invoice by accident. When the job is done, produce a real invoice with our [free invoice generator](/tools/invoice-generator).

**A work order is not a purchase order.** A purchase order flows the other way. The **buyer** issues a PO to a vendor to commit to buying something. A work order is issued to get work performed, usually by your own crew or a subcontractor. In a lot of real jobs both exist: the customer sends you a PO authorising the spend, and you raise a work order internally to get the job done. That is why this template has a separate PO / Reference field. If you need to raise the PO itself, use our [purchase order generator](/tools/purchase-order-generator).

**A work order is not an estimate.** An estimate is a proposal. It is what you send to win the job. A work order is what you raise once you have won it. The numbers usually carry over from the estimate, which is why the work order still shows a total, but that total is an expectation and not a bill. If you are still at the proposal stage, use our [estimate generator](/tools/estimate-generator) or [quote generator](/tools/quote-generator) instead.

## What a Work Order Template Must Include

The published required-element lists from the ranking work order guides (Jobber, Smartsheet and DocuSign all publish one) agree on roughly the same set. This **free work order template** covers all of it.

1. **Work order number.** A unique reference so the job can be traced. This tool pre-fills the next number in a `WO-` sequence each time you open it, and the field stays editable.
2. **Your business details.** Company name, address, email, and your logo.
3. **The customer.** Who is being billed. Often a property manager, a fleet owner, or a facilities department rather than the person standing at the site.
4. **The service location.** Where the work actually happens. This is a separate block on purpose, because the billing address and the job site are frequently not the same place.
5. **Dates.** When the work was requested, and the scheduled start and end. Not a payment due date.
6. **Priority and status.** How urgent the job is, and where it currently sits in its lifecycle.
7. **Requested by and assigned to.** Who raised the job, and which technician or crew owns it.
8. **Asset or equipment details.** Asset ID, make, model, serial number, location, and the meter or run-hours reading. On a vehicle this becomes year, make, model, VIN, odometer and plate.
9. **A description of the problem or scope of work.** In writing, in enough detail that a technician who has never seen the site can act on it.
10. **A task checklist.** Printable checkboxes so the technician can tick items off on paper.
11. **Labor and parts, itemised.** Hours and rate for labor, quantity and unit cost for parts.
12. **An estimated total.**
13. **A work performed or resolution block**, filled in at completion.
14. **Two signatures.** The technician signs off on what was done. The customer signs to authorize and accept the work.

Every block above except the header, the dispatch grid and the signature region disappears from the document when you leave it empty, so a simple one-line service call still prints as a clean single page.

## How to Fill Out This Free Work Order Template

1. **Pick a work order type.** Choose Service / Repair, Maintenance, HVAC, Plumbing, Construction or Auto Repair on the Work Order tab. The equipment fields relabel to match, and the example data changes with it.
2. **Pick a design.** Eight document templates ship with the tool. All eight print the same fields, so pick whichever suits your brand.
3. **Add your business and your logo** on the Business tab. It is saved in your browser so the next work order starts pre-filled.
4. **Add the customer** on the Customer tab, and the service location on the Work Order tab.
5. **Set priority, status, requested by and assigned to.** These print in the dispatch grid at the top of the document, which is the first thing a technician reads.
6. **Fill in the asset or equipment block** if the job is on a tracked asset. Skip it and the whole block vanishes.
7. **Write the problem description or scope**, then add the task checklist.
8. **Add the labor and parts rows** on the Items tab. Set each row to Labor or Parts and the column headings follow it.
9. **Download the PDF.** No watermark, no branding, no signup.

Working from a spreadsheet? The Items tab imports labor and parts rows from a CSV, and it hands you a sample file so you can see the exact column names it expects.

## Labor vs Parts: Getting the Math Right

Most free work order templates lump labor and parts into one generic line list. That is wrong, because the two are priced differently:

- **Labor** line amount = hours x hourly rate
- **Parts or materials** line amount = quantity x unit cost

So a labor row's columns must say **Hours** and **Rate**, not Qty and Price. This tool switches the headings with the row type, and it prints the unit inline (`2.5 h`, `\$95.00/h`) so a mixed sheet is never ambiguous.

A job that carries both then gets a labor subtotal and a parts subtotal of its own, which is what a customer actually wants to see, and the two always add up to the subtotal. A labor-only call or a parts-only counter sale just states its subtotal, because a "Parts subtotal \$0.00" line tells nobody anything. Here is the HVAC no-cool job the tool ships as its default example, worked through in full:

| Type | Line | Hours or Qty | Rate or Unit Cost | Amount |
| --- | --- | --- | --- | --- |
| Labor | Diagnose no-cool call | 2.5 h | \$95.00/h | \$237.50 |
| Labor | Replace condenser fan motor | 1.5 h | \$95.00/h | \$142.50 |
| Parts | Condenser fan motor, 1/4 HP | 1 | \$184.00 | \$184.00 |
| Parts | Capacitor 45/5 MFD | 2 | \$18.50 | \$37.00 |

- Labor subtotal: **\$380.00**
- Parts subtotal: **\$221.00**
- Subtotal: **\$601.00**
- Service agreement discount, 10%: **-\$60.10**, leaving \$540.90
- Tax at 8.25% on the discounted subtotal: **\$44.62**
- **Estimated Total: \$585.52**

Note the order of operations. The discount comes off the subtotal first, then tax is calculated on the discounted figure. Every amount rounds to the smallest unit of the currency you pick, and the currency selector covers 36 currencies. The discount and the tax are each rounded to whole cents before they are added into the total, the way accounting software does it, so the lines printed on the page always add up to the total printed on the page. Nobody should be handed a work order whose own figures do not reconcile.

## The Six Work Order Types

One template, six shapes. Switching the work order type relabels the equipment fields, changes which regions are pre-filled, and loads a matching example. Nothing you have typed is thrown away when you switch: the fields are keyed by meaning, so a VIN carries into the serial number slot and an odometer into the meter reading, and a field the new type does not show is kept and reappears the moment you switch back.

**Service / Repair.** The everyday service call. Service location, labor and parts, customer sign-off, and the asset block left off. This is the default.

**Maintenance (Preventive).** A **maintenance work order template** for scheduled PM on a tracked asset. The asset block is switched on with the asset ID, make, model, serial and the meter or run-hours reading, and the checklist is pre-seeded with a five-item PM list. Recurrence goes in the access and recurrence notes.

**HVAC.** An **hvac work order template** with equipment-first labels: unit ID, make and model, serial, unit location, filter size and refrigerant type. Exactly the fields a technician records on a rooftop unit.

**Plumbing.** A **plumbing work order template** that leads with the fixture and its location, plus a water shut-off location field and a permission-to-enter block for tenanted units.

**Construction / Contractor.** A **construction work order template** with the project name, permit number, work area and the subcontractor trade, and no meter reading. The scope of work is a written paragraph, because that is what a contractor's scope actually is.

**Auto Repair (Repair Order).** A **repair order template** for a shop. The asset block becomes the vehicle: year, make and model, VIN, odometer, license plate and the stock or unit number. Customer concern, cause and correction, and a road-test note.

## Priority Levels and the Status Lifecycle

Priority uses the standard four-level field service scale:

- **Emergency** - safety risk, outage, flooding, no heat in winter. Drop everything.
- **High** - affecting the customer's operation. Same day or next day.
- **Medium** - needs doing, can be scheduled.
- **Low** - fit it in on the next visit.

Status follows the standard progression used by maintenance and field service systems, in this order:

**Requested -> Approved -> Scheduled -> In Progress -> On Hold -> Completed -> Closed**

On Hold sits where it does because a job usually goes on hold after it has started, when it is waiting for a part, for access, or for an approval. Completed means the work is finished. Closed means it has been reviewed and billed. Keeping those two separate is what stops a finished job from quietly never being invoiced.

## Signatures: What Makes a Work Order an Authorization

The completion region on this template has two halves, and both always print.

The **technician sign-off** certifies what was performed and that the recorded hours and parts are accurate. The **customer acceptance** authorizes the work and accepts it as complete. Each half has a signature rule, a printed-name line, and a date line, so the sheet works whether you type the names in first or fill them in with a pen on site.

A signature is what turns a work order from an instruction into an authorization and an acceptance. Without one you have a record of what you intended to do, and no record that the customer agreed to it. That is a billing dispute waiting to happen. This is a practical point, not a legal one: nothing here claims a signature is legally required, and this page is not legal advice.

## Printable Work Order Template: PDF, Word, or Excel?

Most searches for a **work order template word** or an Excel version are really searching for something printable that they can fill in. A Word or Excel file gets you there, but you pay for it twice: the layout drifts every time someone types a long description, the arithmetic is either manual or hidden in fragile formulas, and you end up emailing versions around.

This tool skips that. You fill in a form, watch the document update live, and download a **work order template pdf** that is already laid out and already added up. It prints on A4, carries no watermark, and needs no login. If you need it in Word, print the PDF or drop it into a document; if you need the raw numbers, export the labor and parts as CSV.

## Where the Work Order Sits in Your Paperwork

A complete job usually leaves a paper trail of four documents:

1. An **estimate** or **quote** to win the work.
2. A customer **purchase order** authorising the spend, if they work that way.
3. A **work order** to get the job done and signed off.
4. An **invoice** to get paid.

PinFlow has a free generator for every one of them, all built on the same document engine, so the set matches: [invoice generator](/tools/invoice-generator), [estimate generator](/tools/estimate-generator), [quote generator](/tools/quote-generator) and [purchase order generator](/tools/purchase-order-generator).

## Sources We Used

A work order is not a regulated document. There is no statute, CFR part or ISO standard that dictates its fields, and you should be suspicious of any page that implies otherwise. What does exist is a strong published convention, and that is what this template follows.

The required-element lists and the work order / purchase order / invoice distinctions on this page are checked against the published guides from Jobber, Smartsheet and DocuSign, the pages currently ranking for this term. Each one is cited, with a note on what it was used for, in the box directly below this article. The priority scale and the seven-stage status lifecycle follow standard CMMS and field service practice. Everything else - the labor and parts arithmetic, the rounding, and the terminology - is internally consistent by design and worked through in the example above.

## Frequently asked questions

### What is a work order?

A work order is the document that instructs someone to perform a job. It records what needs doing, who requested it, who it is assigned to, where the work happens, which asset or piece of equipment it is on, when it is scheduled, and the labor and parts it is expected to take. It sits between an approved quote or estimate and the invoice: it is issued before the work is done, so the money on it is an estimate rather than an amount due.

### What is the difference between a work order and an invoice?

An invoice requests payment for work that has already been completed. A work order instructs work that has not been done yet. That is why a work order shows an Estimated Total and never an Amount Due, a Balance Due, or a Pay By date, and why its dates are the requested date and the scheduled start and end rather than a payment due date. Once the job is finished you raise a separate invoice from the same labor and parts.

### What is the difference between a work order and a purchase order?

A purchase order is issued by the buyer to commit to purchasing goods or services from a vendor. A work order is issued to get work performed, usually by your own crew or a subcontractor. They flow in opposite directions. Both often exist on the same job: the customer sends a purchase order authorising the spend, and the contractor raises a work order to dispatch the crew, which is why this template has a separate PO or reference field.

### What is the difference between a work order and an estimate or quote?

An estimate or a quote is a proposal. It offers a price before any work is agreed, and it is what you send to win the job. A work order is raised after that price is approved, and it instructs the work to be performed. The numbers usually carry across, which is why a work order still shows a total, but that total is an expectation of cost and not a bill.

### Is a work order binding without a signature?

A signature is what turns a work order from an instruction into an authorization and an acceptance. The customer's signature records that they approved the work described, and the technician's signature records what was actually performed. Without them you have a record of intent and no record of agreement, which is how billing disputes start. That is a practical point rather than a legal one, and this page is not legal advice.

### What must a work order include?

At a minimum: a unique work order number, your business details, the customer being billed, the service location where the work happens, the requested date and the scheduled start and end, the priority and status, who requested the job and who it is assigned to, a written description of the problem or scope of work, the labor and parts itemised, and space for the customer's signature. A work order on a tracked asset should also carry the asset ID, make, model, serial number and meter reading, and most jobs benefit from a task checklist and a work performed block filled in at completion.

### Is a job order or service order the same as a work order?

Yes. Work order, job order, service order, service ticket and work request all describe the same document: an instruction to perform a specific piece of work, with the job details, the assignment and the expected labor and parts on it. Field service software tends to say work order, job shops say job order, and ticketing systems say service ticket. Use whichever term your customers recognise, because the content of the document does not change.

### What is the difference between a maintenance work order and a service work order?

A service or repair work order is reactive. Something has broken or a customer has reported a problem, so a technician is dispatched to diagnose and fix it. A maintenance work order is proactive and scheduled: it is raised on a calendar or a meter interval to service an asset before it fails, so it leads with the asset ID and the meter or run-hours reading and it carries a preventive maintenance checklist rather than a fault description. This tool has a preset for each.

### What does the priority scale on a work order mean?

This template uses the standard four-level field service scale. Emergency means a safety risk or an outage and takes precedence over everything else. High means the customer's operation is affected and the job needs attention within a day. Medium means it needs doing but can be scheduled. Low means it can be picked up on the next planned visit. The status list is separate and follows the standard lifecycle in order: Requested, Approved, Scheduled, In Progress, On Hold, Completed, Closed.

### Is this work order generator free?

Yes. This work order generator is completely free, needs no signup, and creates unlimited work orders. Everything runs in your browser, so your customer, site and job data never leaves your computer. The exported PDF carries no watermark and no branding.


---