Bundle discount app that allows for additional discount codes to be applied

[DBrandenHM]

I'm looking for an app that can display my variants (basically different quantities of the same product with different prices discounts) in a way that is more attractive than the Trade theme standard variant buttons. (See screenshot 1 vs 2 for comparison.)

The issue is that I have a product discount code active (from physical flyers we hand out) on my shop that only applies to some specific products. And any of the quantity breaks apps which I have tried, usually work by also applying a product discount code when selected. And it seems that shopify does not allow 2 product discount code on the same product to be active. So the flyer discount code cannot be used when there is a discount from a quantity break sapp active.

Is there:

1. A quantity breaks app that is built in such a way that this conflict does not occur?

2. An app which simply makes the variants of a product into better looking "selection bars" (as in first screenshot, which is taken from a quantity breaks app) so that the whole discount coupon architecture of double product discount codes is omitted?

Basically I just want the variants which customers can select to look like the first screenshot instead of the second (Trade theme default). I don't really care about having an actual discount being calculated/applied with an app-created code depending on what variant they select. Because I can set the price for different quantities of variants as well with a specific price in the backend anyway. I just want it to look like screenshot one and not like screenshot 2 for conversion rate optimization.

Does anyone know of an app that makes this happen? Either by being able to combine discounts codes, or by just pimping the variants, or maybe by some other way i haven't thought of yet?

[PaulMartin]

Hi Branden,

You had the exact or very similar issue with a client I had before. And we also did it the same way you did in terms of setting it up - using variants at different prices. However, we did not use any apps to change how it looks, I just had to change the code of the theme in order to achieve what my client wanted.

He had two websites, and I hope it's okay for me to share.
ANTI-CHAFING BALL DEODORANT (groomunder.com)
BEFORE AND AFTER

Then his second store, Silkora™ | SilverSilk™ Pillowcase - Fights Acne - Protects Hair (mysilkora.com)
BEFORE AND AFTER

Again, we did not use any apps, the solution I did was to change the code of his theme to attain the look he was looking for.

Hope this helps!

PS. To the client I worked with, if you're uncomfortable with me sharing your stores, please let me know and I'll try to take this comment down.

[DBrandenHM]

Thank you for the reply Paul.

I had already decided that creating it myself was probably the right way to go. And I am slowly making progress! But I'm not really a coder and need a lot of GPT and Claude help to make any progress. But it's a fun project and I'm learning a lot.

If it so happens that I won't be able to get it the way I want in the end. I will be sure to contact you and see if I can hire you to finish it for me.

For now the problem I'm running into is that I have been styling the buttons in a page called component-product-variant-picker.css and everything was going great. But now suddenly when I add new styling to the bottom of the page it simply does nothing. I then tested it with something simple as

.variant-selector__right {
background-color:red;
}

To see if the background turned red, but nothing.

However if I add the same styling rule to the base.css suddenly it works.

Do you have any idea what might cause this?

[PaulMartin]

Hey Branden!

Sometimes CSS doesn't work when there are other CSS controlling it. The two differing code clashes for who gets to be used in the page. It's a power struggle. This page should explain it much better: Cascade, specificity, and inheritance - Learn web development | MDN (mozilla.org) 

A hacky way to ignore the power struggle is to add "!important" to the code, like so:

.variant-selector__right {
background-color:red !important;
}

And this will make your code be the winner in the power struggle, no matter what. But best practices for CSS coding doesn't recommend using it. When using "!important", it's often a red flag that you could be doing something wrong. 

Another cause for why nothing changed might be because you did not target the correct element. Make sure that the element you are targeting has the class name ".variant-selector__right" like so:

<h1 class="variant-selector__right"> Hello </h1>

If you got any questions, feel free to drop em, and I'll try to answer it! Goodluck man!

Also, be careful when changing your variant selector because it might affect other places. Make sure that only the quantity selectors are the only ones affected. It might not appear on your page now because you only have one variant for all your products, but when, in the future, you add more products with multiple variants, it will surely be affected.

Sample:
When I was editing the design for Silversilk, I made sure that the changes only applied to the quantity selector. Most themes almost always reuse code in order to maintain consistency and maintenance. Upside is good right, but the downside is when you change in one place, all other places get affected. So, make sure that you are only changing the variant selector for the quantity and not affecting the other variant selectors.

Again, if you got any questions, feel free to let me know anytime. 😊

[DBrandenHM]

Hey man thanks for the detailed reply, i really appreciate it.

Strangely it's not as easy as these solution!

!important was already tried and didn't work. The selector was the correct one because it does work in base.css but not in the component-product-variant-picker.css file. I even tried changing the class to something very exotic to make sure it wasn't already taken by something I had missed. All turned out to as failed attempts.

I just found out that when I paste the code at the top of the component-product-variant-picker.css file it works. It's almost like there is a limit to how long/large the file can be or only a certain length is read. (No I'm not working in the custom css editor! hehe. it's an actual theme file).

Anyway no reason to break our backs over this. I will just continue in the base.css file which works. It's just an interesting and slighty puzzling state of affairs.

[PaulMartin]

You're welcome man, just want to help you out.

That's quite weird, specifically how things work inside component-product-variant-picker.css. But like you said, no reason to break our backs on it hahaha, good call on continuing to work inside base.css.

Anyway, how's it going so far? Were you able to get the design you wanted?

[DBrandenHM]

I'll continue working further on it today. Hopefully I'll finally have it done.

I am using a lot of help from claude.ai and what's annoying is that it's really smart but also really stupid. So sometimes it does things and then everything is chaos and I have to go in and try to deduce what claude did wrong and tell it to fix it haha. You can't just blindly trust ai in coding im learning. Anyway learning a lot.

If i can't get it to work in the end I'll be sure to contact you.

I have an adjacent question though. Right now I basically just copied my theme to be safe and then just started tweaking the variant selection code of the theme, basically destroying the old variant styling and functionality of the theme. Is there an easy way to copy/create a new variant block so that I can design the new variant while not losing access to the old one?

I assume I need to create a new asset, link that asset from the section, and then rename all the elements so that I can create new styling and functionality without clashing with the old block. But is there an easy way, or guide or something that I can follow to achieve this?

[PaulMartin]

Sounds awesome man. Glad that you are enjoying the process and getting there.

Your assumption is correct. In order to keep the old version whilst still having a new version, like you said, you'll need to create a new asset, link that asset from the section, then rename everything. I'm not aware of any simpler way than what you've assumed, it's the simplest I could think of also. As for a guide, I'm not aware of any guide that helps a beginner in this.

Though, I think I could write something for you.

Creating the new asset. We want to create a new snippet as this is a part of a section, and not a section itself. So, to create a new snippet, click the blue " + Add a new snippet " button. It's found at the left portion when editing your code right under the "Snippets" with the folder icon, it should look like this:

Name it whatever you want. Best practice is to name it according to what it is so that you or anyone else will understand it, in case you'll come back to it years later or months later. Add your code inside it, don't worry for now about renaming elements and classes.

Then linking from the section. Inside the section, you want to use 

{% render 'filename' %}

"filename" should be the name of the snippet to render, without the .liquid extension. Then that should have your snippet code be included in the section. Liquid tags: render (shopify.dev)

Then renaming. Usually, the ones you'll just be renaming are class names of the elements. Make them unique, like 

<element class="custom--your_desired_name"> Hello </element>

That should keep it unique and no longer be affected by your Theme. Since you renamed the class names, you'd also want to rename them in the CSS to make it work.

Then what else. Uhh, I think that's mostly everything. It's quite difficult to write a full-blown guide since your case is unique and I don't have much context of your theme.

Expect trials and errors though since this is your first time, then you're also making sure you don't break your own theme.  Then, damn I really forgot to tell you this! Sorry! Make sure you duplicated your theme, then work on the copy instead of the original. That way, in case it got broken and you don't know how to revert it, you won't have to worry that you've broken your theme, since you still have the unedited original. It's a good thing that you realized this though. Again, sorry that I forgot to tell you from the start!

What else what else. Ah! The hardest part of this is connecting your new code to the old code. Although I've given you the instructions above on doing so, it's not the full picture. Sometimes themes got their own way of rendering variants, so you'll have to watch out for that and follow how your theme does it. Extend, not replace or delete unless that's the way to go. Read the code and understand it first, then do your trial and errors.

Then. I might have said a lot and it's possible you did not understand a lot of what I said. No worries, I'm here to help you out. If you got any questions about what I said or anything that you encountered, feel free to ask man 😊

[PaulMartin]

Hey @DBrandenHM , so how did it do? Were you able to do it?

[DBrandenHM]

Hi Paul, thanks for checking up!

yes, I did it!

You can see the end result here: https://heymatcha.nl/products/nishio-zen

It took way longer than it should have. But I'm proud of myself for pulling through and I learned a lot 🙂

The blurry image problem still isn't solved though but I will look at that after I have made new product pictures.

[PaulMartin]

Nice, good job man! Taking a look at it and you did very well for your first time! and it looks good on mobile too! Nice!

I guess that's all to it? I don't know hahaha, I just really wanted to check up on you.

Anyway, if you need anything, just give me an "@" in your comment or post and I'll do my best to reply on time. Goodluck man!

[DBrandenHM]

Yeah I'm quite happy with it. Thanks for getting checking up on me. I appreciate it!

[ProfitLabs]

Hi @DBrandenHM,

I think answer given by @PaulMartin is correct I would also agree for this solution on top of this if you are interested in bundles specific features like fulfillment of bundles  and inventory channels. you can try out our app Profit Bundles, bundles created through our app would work with this solution given by @PaulMartin.