Hide the sold out variants - Impact Theme

Store Design
, , ,

Topic summary

A merchant using Shopify’s Impact theme sought help hiding sold-out product variants on their product pages. Initial attempts using Shopify Flow automation failed.

Solutions Provided:

  • Custom CSS code: Multiple users suggested adding CSS code to the theme.liquid file (above the </body> tag) to hide variants with the swatch-item-unavailable class
  • Swatch King app settings: The most effective solution—a user identified that the merchant had Swatch King installed and could simply enable “hide out-of-stock variants” in the app’s Product Page Styles settings, eliminating the need for custom code
  • Third-party apps: Recommendations included Veil (hide sold variants) and Stamp (collection variants customization)

Resolution:

The merchant confirmed the Swatch King solution worked best, as they were unaware their client had the app installed. While the custom code solutions also worked, the app-based approach proved simpler and more maintainable.

Note: One user requested the CSS code be reshared as it wasn’t visible in the original post.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello, good afternoon!

How can I hide the sold out variant/s on my product page? We are using Impact theme

I’ve tried automating it with flow app, but it does not work, maybe it needs code or something.

This is the sample link - https://miniminoutlet.dk/products/1582057300?variant=49410215248210&_pos=49&_fid=23b0ec755&_ss=c

Mabinibooks_0-1732168297520.png
Mabinibooks_0-1732168297520.png1766×638 81.2 KB

Please assist.

Thank you!

1 Like
2

Hey @Mabinibooks

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1732168527246.png
Moeed_0-1732168527246.png1896×917 130 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hey @Mabinibooks ,

Thank you for sharing the link along with your query! I noticed that you’re using Swatch King to display variants on your store. So there’s no need to add additional code or custom flows to hide sold-out variants. This might end up causing the issue you’re experiencing.

For example, when selecting the color Soft Lilac Fig, the Add to Cart button displays “Sold Out.” This might lead customers to believe that both sizes under this color are unavailable, which can cause confusion.

Here’s how you can resolve this directly through Swatch King:

  1. Head to the Swatch King dashboard.
  2. Navigate to Product Page Styles and locate the style you’re using.
  3. Since you’re using buttons, click on Customize.
  4. Under the Out of Stock Settings, enable the option to hide out-of-stock variants.
    • You can apply this setting for other styles, like circular swatches, as well.

This should resolve the issue without the need for any extra code. Let me know if you need further assistance!

Best regards,
Shreya

2 Likes
4

You can follow this guide:

  • go to Online Store > Themes

  • Click Actions > Edit code for your Impact theme

  • Open the layout/theme.liquid file or the primary layout file of your theme. Scroll to the bottom, just above the tag.

  • Insert the following code:

li.swatch-view-item.swatch-item-unavailable { display: none !important; }
  • Save the changes.
  • Go to a product page with sold-out variants and check if the unavailable variants are hidden.

Note that:

  • This solution hides only variants with the swatch-item-unavailable class. If your theme doesn’t assign this class automatically to sold-out variants, the code won’t have any effect.
  • It works best for swatch-based themes. For dropdowns, you may need a combination of JavaScript and Liquid.

Hope it can help you. Gud luck!

1 Like
5

Hello, thank you for explaining regarding the Swatch app, but other solutions worked as well, but this is the best solution, I was not aware that my client is has swatch king app installed.

Thanks again, and have a great day!

6

Thank you for this, I’m pretty sure your code would work, just like what others have provided, but I did not know my client has swatch-king app installed, and other was able to point that out, and provided simpler solution.

Thank you for commenting & have a great day!

7

Thank you Moeed, I’ve tried the code and it worked, but I did not know my client has swatch-king app installed, and other member was able to point that out, and provided simpler solution.

Thank you for providing solution, much appreciated & have a great day!

8

You can also use this app it will be helpful for you - https://apps.shopify.com/veil-hide-sold-variants

9

You can also use this app it will be helpful for you - https://apps.shopify.com/veil-hide-sold-variants

10

Third-party apps make it easy to separate variants. I own the Stamp – Collection Variants app, and we help merchants display variants separately on the collection page. You can customize the settings per collection to show or hide specific variants, filter variants, or separate them by specific options. For example, you can create a “Gold” collection and display only gold-rhttps://youtu.be/Pdk4JmfJjqQ
elated variants.

11

I can’t find the code. Can you please resend the code?
I’m also facing this kind of issue of ‘Sold Out’ in impact theme.
I will be waiting

12

I can’t find the code. Can you please resend the code?
I’m also facing this kind of issue of ‘Sold Out’ in impact theme.