Help the Podcast
Hey, Scott Austin here.
Whenever I'm building a new Shopify store or doing a redesign, I'm most likely doing a bunch of customizations to the theme code to provide additional functionality for the store.
Here are some examples of customizations that I'll do:
- Free shipping awareness. In this scenario, the store's Free Shipping threshold is messaged to store visitors. And as customers add items to the cart, the messaging is updated with a count-down that says something like 'only $10 more to free shipping'. And when the customer reaches the free shipping threshold, they get a congratulations message. While there are plenty of apps that can do this, it's simple enough to do right inside the theme's liquid code and avoid the complexity of adding another app.
- Adding promotions to the cart for merchandising impulse purchases of low-cost items to increase average cart size or promote an add-on service like gift wrapping.
- Product seals on the product page to promote unique aspects of the product and bust common purchase objections. Seals like organic, free shipping or ez-returns.
- Custom sections to display content in ways that are not included in the base theme.
And these modifications get brought to life by adding or editing code in the theme files. But as we know, not all store staff is comfortable editing code. So I try to make my customizations as maintainable or editable by the store staff as possible without them having to edit code.
So in this podcast episode, I'll go through the different techniques that I use to make it easier for the store staff to manage the store. So this episode has two audiences:
- For the people that make their own code edits. You may find a new tip or trick that you can use when making your code customizations.
- For the people that aren't comfortable making code edits, I want you to be more aware of what you should be expecting from any Shopify Experts that you hire for custom work as you should be requiring them to make the customizations easy for the store staff to maintain. For example with one of my clients a few years back, they had an existing customization that allowed their store to have an announcement banner as the theme they were using did not provide one. The agency they hired to build it hard-coded the announcement message in the theme code. So to change the announcement bar message required a code edit. The store staff was not comfortable editing code, so they hired the agency each time they wanted to change the announcement. And the agency charged them $300 each time they edited the message, which was a bit of highway robbery as the edit probably took all of 10 minutes. So, I added the ability for the store staff to edit the announcement message on their own, which saved them a bunch of money and made their processes a bit easier as they could make the changes themselves.
To get started making a store easier to maintain, you want to determine what control you want to give to the store staff. This control goes into two big buckets: settings and content. Here are some examples of what I mean by settings:
- Adjusting the cart size needed to get free shipping. $40, $50, $60, etc.
- Setting the background color for a promotion.
- Turning a feature on or off.
- Changing the font of text.
And examples for content are:
- The text that appears when the customer reaches the free shipping threshold.
- The product that gets displayed in a cart cross-sell promotion.
- The text displayed in a tooltip for a product seal.
You are already used to adjusting settings and content as that's what you are doing every time you customize your theme.
To get started, you need to look at the customization that you've added to the theme and decide what you are going to turn into settings and editable content. For example, in the free shipping example, let's say that the store has always had a free shipping threshold of $50. It would be easy to hard-code that $50 threshold into the code. But if you instead turn the shipping threshold into a variable that the store staff can adjust, then they can change the threshold to $40 or $60 as the business wants.
Additionally, you could also add a setting that allows the store staff to turn the promotion on and off in case there are times when they do not want to have or promote free shipping.
And for the content in the free shipping promotion, you'll want to create a number of text strings that the store staff can edit. Examples include the message when the cart is empty, like 'Free shipping on orders over $50. And then a message when items are in the cart and the free shipping threshold is not yet met, like 'Only $12 more to free shipping'. And then a message for when the threshold is met, like 'Congratulations, you've earned free shipping for this entire order.'
So, by now you should have the list of settings and content that you want to expose to the store staff. Next step is to decide where to store the information in Shopify. You have a number of choices. I usually use a number of different ones and each has their own pros and cons.
For the settings, the best place to put them is inside of the theme customization experience. To do that, you'll need to edit the 'settings_schema.json' file in the config folder of the theme. Using to the existing theme settings file, allows you to use all of the built in controls available to the theme developers. This includes things like colors, fonts, text, numbers, radio buttons and drop-downs. And the store staff is already familiar with how to use them within the theme. I make my own new settings section and put all the controls that I need in that section. And I name that section JadePuma elements so that the store staff knows where to go when they need support.
Now, when it comes to storing text for the store staff to edit, you have a lot of choices of where to put it. You can put it into the theme settings, which I do for simple text for site-wide element like the free shipping promotion. But if you want the ability to create rich text with Shopify's Rich Text Editor or RTE, you can't do that in theme settings. And if you want to create unique text for each product, that would be hard to do within the theme. So here are number of other ways to store text that can be edited by store staff:
- Inside of the theme's language file. The language files are located in the Locales folder of your theme. I rarely use this method, as it gives you similar control over the text as the Theme Customization experience does. But you can't create settings in the language file. So I just use the theme settings file instead. That said, you'll want to the language file over the settings file when the store is available in more than one language.
- You can store text in a Shopify page. You don't have to make this page part of the store's navigation and experience. Instead, you're just using the page to store the information. An example of when I use a page is for having information about the manufacturer on a product page. That information could be put into each product description separately. But then it would need to be repeated for each product from a given manufacturer. Abstracting that out to a page allows the content to be written and edited once. And your code will apply it to products as appropriate. Pages allow you to use the Rich Text Editor. So you can create text with bolding, lists, styles and more. And you can add images or embed videos. When using pages, you can also use the page title in addition to the page content. So for the example of the manufacturer information, the page title could be used for the header of the manufacturer content.
- A powerful place to store text is in metafields. Metafields are objects that allow you to store additional information for products, collections, articles, pages and the store. One thing I commonly use metafields for is a short title for products that I use on collection pages to reduce some clutter. Metafields can be edited in bulk using the Shopify bulk editor. But you have to construct the URL for the bulk editor manually to include the metafields. There's a bit of a learning curve behind that method. There's also several apps for creating and editing metafields. My current favorite is from HulkApps. It has a free-level which usually meets my client's needs and a paid level when more metafields control is needed. I'll include a link to it in the shownotes.
Here are some other tips and tricks to use to make theme customizations easy for the store staff to maintain.
- Navigation menus. Inside of liquid, menus are called linklists. And they can be used to allow store staff to maintain customizations. Let's say the store has a mother's day buyer's guide. That buyer's guide could contain a list promotions, some of which point directly to a product and others that point to a collection. A linklist could be used to store that mix of content types and would be easy for store staff to edit.
- We can't create UI inside of the Shopify admin. Just inside the Theme Customization experience. But sometimes you just want to create a link for the store staff so they can quickly edit or access something. A great example is a link to bulk edit metafields. As I said before, they are a bit complex and the kind of thing no one can remember. What I do then is create an Admin section on the store's account page. This is the customer facing account page. I edit the liquid code for that page to show the admin section only when customers are logged in and tagged admin. So if the store staff creates customer accounts and tag themselves as admins, they'll have access to the admin section. Then I put the desired information in the admin section. Usually it’s a list of links to edit metafields or to collections I've created for maintaining the store.
- Use a .css.liquid file. I always create my own CSS file in the theme for my store edits instead of embedding my CSS edits into the store's CSS file. I do this in a .css.liquid file not just a plain .css file. This allows me to access the settings stored in the theme settings file.
- And now that you are using a .css.liquid file, you can also use the theme's CSS settings and not just the settings you created. That way, you can make your customizations easier to maintain, by applying theme's CSS to them. For example, you can use theme's settings for colors and fonts to maintain a consistent brand inside your customizations.
- I often create collections for the store staff to use that don't get exposed to customers in the navigation experience. These collections can use a custom template that I create or can just have useful rules behind them. An example of collection with a custom template is one that shows all product photos below a certain size, which can be set by the store staff. That way, staff can quickly identify small product photos and replace them. I'll add a link in the show notes to a video on how to create this template. An example of just defining a collection for a maintenance purpose is a collection where the product type has not been set. That way, store staff can quickly identify which products need their product type set. Links to these types of collections are perfect for the admin section on the account page so the store staff doesn't need to memorize their locations.
- Documentation. Even though we are making these customizations easier for the store staff to edit, there may still be some complexity behind the process. Some things are edited inside the theme, others in metafields and even others in pages. So documentation of the processes is super important. What works for me and my clients is a recorded video where I walk through all of the customizations and explain how they are maintained. That way, store staff can go back to it when they need or new staff can also benefit from watching it in the future.
That's it for making a Shopify store more maintainable by the store staff. My goal with this episode was to get you to understand how take hard-coded elements in our theme customizations and extract them into settings and content that store staff can easily access. I hope this was helpful.
Thanks for listening.