I created the Diffy app to help both myself, as a theme developer, and my non-technical clients. It saves me a ton of time, and several hundred Shopify merchants and their teams use it regurlarly.
– Wade sonenberg
First of all, this is not a post about how and why to use version control like Git for your Shopify Themes. While Github is a modern marvel, not everyone knows the command line or wants to setup a repository to do theme edits – if that sounds like confusing jargon, tune into the video below or follow along to see how the Diffy Theme Tools saves me hours of theme development time every month.
What Does Diffy Do?
Several interconnected things, that make Shopify theme development easier:
- Compare two Shopify themes side by side
- Track theme file changes over time
- Download previous file (or theme) versions
- Search Shopify themes for text and filenames
Hey everyone, it’s Wade from Immersive E-commerce. I wanted to post a quick video today to showcase one way I use Diffy Theme Tools to save me some time doing Shopify theme development.
One of the app’s core features is being able to quickly do keyword searches on one
or all of the Shopify themes installed. As many of you know, finding particular CSS classes,
Javascript functions, or HTML in a theme can be a tedious process without either downloading the theme, unzipping it, and searching on your local machine, or of course using Git or another version controland firing up the command line.
So the scenario is this, before the holiday one of my favorite merchants requested shortening the
breadcrumbs UI on there theme, specifically for mobile viewports.
Since I didn’t develop this theme, and had it handed off to me a few months ago – I don’t know exactly where the markup is and what kind of CSS rules are in place.
1.) Instead of looking through all the snippets (which would be my best guess) for the markup, and
stylesheets for the CSS, rules, I just find the class on by inspecting the breadcrumbs on the
front end and copy one that looks unique.
2.) Then I head over to their Diffy app, click search, select only the development theme, and paste
my CSS class I grabbed from the front end.
3.) Ok, wow, 41 results in 39 files. That tells me somebody didn’t render these breadcrumbs
in a snippet which would make life easy. Let’s try to do this through CSS, instead of editing
40 files and having to QA it all.
4.) So I’ll click on styles.scss in Diffy, this theme’s main sheet, and click next until I
find the goods. Ok, this first one looks like the ticket.
5.) Next I’ll click the edit link, which opens up the file in the theme editor for this development theme,and scroll down to line #2657 which was highlighted in green. As a side note, you used to be able to directly link to a line number in the theme editor, if anybody has a hack for how to do it
lately, please drop a hint in the comments below.
6.) There’s a mobile break point already in there, so let’s add some styles to hide the first
breadcrumb span, and push the text indentation negative and hide the overflow to hide that slash which isn’t in a containing element in all of these 40ish files.
7.) Save, preview, and …. ok. Looks pretty good.
8.) So as you can see, finding all of the occurrences of the breadcrumb markup would have taken far longer than it took to fix them without Diffy and hopefully paid for it’s $10/month subscription
with this one simple theme development task.
