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
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 