Every now and then with Shopify, a hack solution is required to solve a problem that the platform can not handle natively and 'Product Sets' is one such example.

What do I mean by 'Product Sets'?

I'm talking about something in-between variants and collections.

Variants allow for the merchant to set a different price, image and SKU for variations of a single product.

Collections allow for merchants to group together products. These products might be similar in nature or part of a particular sale.

And, Product Sets are different versions of the same product that (for whatever reason) need to be grouped together.

In my experience, product sets have only become a necessity for clients who wish to showcase multiple product photos for each colour variation of a product.

You see, a variant in Shopify can only hold a single image which often forces merchants to create a separate product for each colour variant. Something that could otherwise be handled by variants.

This is something I first learnt about working for a Shopify Plus partner agency back in 2019 but have since implemented with a private client this year.

In this article, let's discuss how to pull it off.

Anatomy of a Product Set

Let's take the common example of a piece of clothing available in different colours but with a gallery of images for every colour (as can be seen in the example above).

Inside the red rectangle in the screenshot above you can see the other colours that the T-Shirt is available in.

How does Shopify know that these products are associated with the one currently being viewed?

The answer is that the product set is stored within a collection.

This is where the 'hacky' part of the solution comes in as there is no other way to bind products together in order to cycle through them in Shopify unless they are all stored in a single collection.

What this means is that - unfortunately - your 'product sets' will sit in the same place as your regular collections.

A product set is essentially the same as a collection. The only difference being the convention we use to identify them in the theme code.

Creating a 'Product Set'

Creating a product set in Shopify is the same thing as creating a collection (as that's what a product set is) but with a naming convention that allows the theme to identify and differentiate the set from a regular collection.

This should be pretty simple if you've set up your product handles in a systematic way.

For example, if you currently have a T-Shirt product in your store that is available in multiple colours, it would be ideal to have a handle structure like such:

tee-shirt-black
tee-shirt-grey
tee-shirt-white
tee-shirt-blue
tee-shirt-red

Notice how in the example above, the product handle always starts with 'tee-shirt' and that the rest of the handle only represents the colour.

With your product handles set up like this, you could create a collection with the handle of set-tee-shirt which of course, is equal to set- followed by the common part of the product handle that all the products in the set share.

While it's not required for the theme code, I would also recommend following a convention for the collection title by placing the word 'Set' in front. This will make it easier for admins on the backend to filter them out when searching through normal collections.

Utilising the product set

Once you've created a product set according to your convention and have added your products to it, it's up to you to decide what to do with it.

One idea is to create a custom collection template and apply it to your product sets, showing those products sets in a different way to how you show your regular collection.

How I've seen it used most commonly however, is the example in the screenshot above, where the other products in the set are coded to show up on the product page of any product (provided that that product exists within a set).

Here's another example:

As you can see in the screenshot, Ringers is displaying the other products in the set alongside the product details.

In order to achieve this, you'll need to utilise a developer to write some Liquid code to:

1. Look for a product set that matches the product (ie. one when the collection handle equals set-[product handle minus the colour]), and
2. Loop through that collection to render a link to each product within the set

Because each colour is represented by its own product in the Shopify admin, clicking on any one of these links will take the user to a completely separate product page.

It's a bit of a hacky solution but if a gallery of images is required for each variant, it's an essential one.

Are you looking to showcase other colours of a single product with multiple images whilst still having the colour variants appear as if they were variants?

Well, as a Shopify theme development expert, I'm only a message away.

Contact me on LinkedIn and let's chat about it!

Until next time,

Chris

A common area of confusion I tend to experience with my Shopify clients is around the cart page and the checkout.

Usually when clients ask for changes to the checkout, I offer a compromise. 'We can do that on the cart page but not the checkout'.

The reason for this is that we have full control of the Cart page but not the Checkout page.

Allow me to explain...

The Checkout

Shopify offers a standardised Checkout page to merchants that often looks exactly as pictured above.

The Checkout is a special page. While the rest of your website is for your customers to browse and select products to buy, the Checkout is where they actually transact with your business and is the single point where revenue is generated.

This is why the Shopify Checkout has been built to be highly robust and non-customisable. If you were to break your checkout page, it could be disastrous for your business. Therefore, you can only modify the Checkout page in a few ways.

First of all, it's important to note that if you're not on Shopify Plus, then there is no option to directly edit your checkout page.

If you are on Shopify Plus, then you can edit to your Checkout page to a certain extent using the checkout.liquid layout file (we'll get to that very soon).

Otherwise, there are just two options: checkout apps and checkout scripts.

Checkout Apps

Since mid-2021, Shopify have enabled app developers to extend and modify the checkout.

I won't go into the deeper technical aspects of how these apps work. What's important to understand however, is that merchants will need to use an app to update the UI of the Checkout or enlist the help of an app developer to create a custom app for them.

Barring the use of the checkout.liquid file (only available to Shopify Plus merchants), this is the only option to edit the UI of your Checkout page.

The code must be written in an external app and is not a part of your Shopify theme code.

Checkout Scripts

Also only available to Shopify Plus merchants is the Script Editor which allows you to write and update Shopify Checkout Scripts.

As it states on Shopify's website, "Scripts let you add custom server-side logic to checkout, and securely change the behavior of payment methods, shipping rates, and checkout line items."

In my experience, the most common application of Scripts is to apply some sort of automatic discount based on what items the customer has in their cart. These are known as Line Item Scripts.

Common examples of Line Item Scripts include:

• Tiered discount by spend
• Tiered discount by quantity
• Buy one get one (BOGO) discount

Of course, all merchants have discount codes and automatic discounts at their disposal as well but Shopify scripts allow for the highest level of customisation.

Finally, these scripts are written Ruby, a different language to the theme code. This means that a different set of skills is required to update them.

Liquid customisation using checkout.liquid file

I mentioned earlier that you can make certain edits to your checkout page via checkout.liquid if you're on Shopify Plus but what kind of updates can you make using that layout file?

Well, the template utilises certain checkout objects to render various checkout content, depending on the checkout step. These objects are not directly editable.

The checkout objects represent important building blocks of the checkout such as content_for_layout which displays the form fields.

This is gives merchants some customisation in terms of where they place these objects within the HTML structure of the page but it doesn't really allow them to extend the functionality of your checkout page.

What can you do however is insert CSS and JS to customise the look of outputted elements or modify the DOM on page load.

This might sound a little technical but for the most part, what you need to understand is that the customisation options available via the checkout.liquid layout file are mainly cosmetic and for the most part, won't allow you to change the functionality of your checkout page.

The Cart Page

Unlike the Checkout page, the Cart page in Shopify is just another template in your theme.

The cart.liquid template is available for any merchant to edit regardless of their Shopify membership tier and as such, will look different on every Shopify store based the theme the merchant is using.

Here, your options for customisation and styling are near infinite. The only limit is the information returned by the cart object.

Some examples of modifications I've personally made to cart pages include:

• Adding a discount code applier (as can be seen in the screenshot above)
• Grouping together bundle products to show a single product
• Adding similar products as upsells underneath the cart items

TL:DR

To summarise the major differences between the Cart and Checkout pages, I've created the following table:

To conclude on a simple note, I will say that it's much easier to customise the Cart page than the Checkout page which is why it's important to clarify the difference.

In most cases, once the customer gets to the checkout on a Shopify store, they've essentially left the merchant's customised online store experience and are now working directly with Shopify's robust forms to ensure that the transaction goes through.

Once you learn about how much volume the Shopify Checkout can withstand without crashing, it might make more sense to you that they don't let you modify it too much.

The Cart page on the other hand, is a free-for-all. Go for your life!

Do you run a Shopify store? What customisations are you currently running on your Cart or Checkout page?

Remember, if you need any help with your Shopify theme development needs, send me a message on LinkedIn and let's chat about it!

Until next time,

Chris

If you're looking to bundle together and sell a group of products in Shopify, you're not alone.

Product bundling has its own category under 'Sales and Conversion' on the Shopify app store, with over 30 apps listed as providing bundling functionality to Shopify stores.

To understand which app is right for you (or isn't), we need to understand what kind of goals you have with bundling products. Is your need for bundling based on keeping inventory in sync? Or is it about providing discounts to incentivise customers to add additional products to their cart?

Either way, product bundling is not exactly something that comes by default in Shopify.

Understanding product bundling

There seem to be many definitions of product bundling across the web.

You may consider something like an upsell or a 'gift with purchase' as a type of product bundling but for the purpose of this article, I'm going to define a product bundle as:

A distinct set of products that, when bundled together have some kind of unique difference compared to if you had bought each item separately.

More often than not, this 'unique difference' is the price.

"Buy these together and save!" - kind of thing.

Or it could be a bonus that that comes only with the bundle.

In this article, let's talk about a couple of ways you could implement product bundles in Shopify.

A bundle as its own product

If you're marketing a bundle as a product of its own then you'll want that bundle to have its own product page.

If we take for example Bang n Body's Luminous Glow Bundle (pictured above), we can see that the bundle has its own photos (showing all the products within the bundle) and its own unique name.

In order to achieve this, all you need to do is to create the product in your admin.

The only downside to this approach is that there is currently no connection between the individual products in the bundle and the bundle product itself.

As this bundle is based on mixing together a group of other distinct products, we now need to bring in an app to keep inventory in sync.

The app pictured above is called 'Bundles', an app that touts itself as "The easiest way to keep inventory in sync when selling bundles" (indeed, from my experience, this app appears to do the job without any extra complications).

As you can see from the screenshot above, the inventory for the bundle is set to 3379 which is equal to the lowest stock level of the three products that make up the bundle.

This simple math makes sense. If the stock level of any product reaches zero, the bundle's stock level will also become zero and therefore, it won't be able to be purchased.

Conversely, when the bundle product itself is purchased, then the stock level of each of the linked products will be reduced as well (in this case by one each).

In the case that there are multiple of the same product in the bundle (as in the screenshot above) then the inventory of the bundle will be set to the stock level of those products divided by the quantity of that product in the bundle.

In the example above, 2 of Product XYZ are included in the bundle and therefore, this bundle will sell out when either the freebie sells out or when there is less than 2 of Product XYZ available.

Essentially, this app will ensure that the bundle product and its individual included products' inventories remain synced.

The bundles app also works for multi-variant products, so if you'd like to create a customisable bundle (limited to 3 options), you can sync variant stock to individual products as well using this app.

Bundling products at checkout

For situations where the intention is to increase AOV by encouraging customers to buy a greater number of products, you might offer a discount on the group of products.

Unlike the previous example where the bundle was a distinct product in itself with specific inclusions, this is more of a 'bundle and save' marketing message.

In this case, the emphasis is on the discount which needs to be automatically applied at checkout.

To create an automatic discount, you may not require an app as automatic discounts can be added in the Shopify admin (like in this tutorial).

Using this feature, you can create percentage, fixed amount, or buy X get Y automatic discounts - no app required.

But of course, this is limited.

With this feature, you can only apply the discount to specific products, products within a collection or the entire order.

For anything else, you'll need an app.

As previously mentioned, there are over 30 different apps on the Shopify App Store to choose from and each seem to work differently.

Bundle Builder for instance, is an app that allows your customers to create fully customisable bundles. You create a product page in Shopify that gets hijacked by the app, giving the user a selection of products to choose from.

At checkout the individual products are what gets added to the cart but with a discount that the customer might not have received otherwise.

Bold Bundles is another option that claims to be "The Original Bundle App". With this app, you can set up more complex discounts compared to what you can do with just the Shopify admin such as Buy One Get One - a certain percentage off. You can also present  'Frequently Bought Together' products together or just bundle together specific products.

These are two examples that might help you to achieve your goals with bundling.

Needless to say, I always recommend against using apps if you can get away with it.

It's not just about the cost and tech bloat.

Often these apps are a major abstraction from what the Shopify platform can do normally and will follow a different development paradigm to the way the store is intended to be used.

To me, the first example in this article is the cleanest but what are your thoughts?

Do you run a Shopify store? What solution are you currently running to bundle products (if any)?

Remember, if you need any help with your Shopify theme development needs, send me a message on LinkedIn and let's chat about it!

Until next time,

Chris

In 2018, a Shopify forum member asked a simple question:

"Size and Color Filter: Is it really true that this (seemingly simple, and very important) feature is NOT a part of Shopify as a basic part of the build?"

To which Ann from Shopify responded:

"You're right, at this time, a filter like this isn't something that is built into the native Shopify platform."

The Shopify staff member then suggested the use of an app to which the forum member wasn't happy about.

Indeed, you too might be wondering why an app is required to filter by something as simple as size and colour.

Well, in order to filter a product (or variant) by a certain attribute in Shopify, we need a way of storing that attribute on the product (or variant) object.

As you'll read in this article however, we can utilise the power of tags in Shopify to achieve this aim of filtering by attributes like size and colour without the use of an app.

It all starts with how we set up our product organisation.

Product Organisation in Shopify

Shopify provides just 4 ways to organise your products which are type, vendor, collections and tags.

Each product can only have one type and one vendor but can have multiple tags and be a part of multiple collections.

Collections are the primary way that the Shopify platform encourages you to organise your products. These can be populated manually (by selecting the specific product you want to be included) or automatically based on certain conditions.

Collections need to be set up in the Shopify admin before a product can be added to them, which in turn automatically produces a collection page on your Shopify website for that collection.

Tags on the other hand are much more fluid. They aren't objects in and of themselves like collections and can be thought of more as labels that you can throw on products.

Using tags, you can create automatic collections (based on the tags) and filter products within a collection by adding url parameters after the collection address (we'll look at this in just a second).

The other two, type and vendor operate virtually the same and are used primarily for display only.

Standard collection filtering in Shopify

Now that you've organised your products by the collections, tags, types and vendor, we can now filter a collection view by adding url parameters.

Using the example above (in the screenshot), we can start by looking at the specific collection (in this case, the womens collection) by appending /collections/womens to the end of our url.

We can then filter down further via tags by adding a slash (/)  followed by the list of tags separated by a plus (+).

For example, if we had products tagged with red and slim in the womens collection, we could filter that collection view using the following url structure

/collections/womens/red+slim

Using this url structure, the collection template (which renders all collection pages) automatically removes all products from the view that do not carry the list of tags specified.

The collection template also has a special variable called current_tags which provides the the list of tags currently applied as well as link_to_add_tag and link_to_remove_tag which automatically take the current list of tags in the url and add to / remove from it.

To see this action, check out the demo for Shopify's standard Debut theme.

In the above animated gif, you can see there is a simple dropdown containing all of the tags that exist on the products within the 'All' collection. When the user makes a selection, that tag is then applied to the url (not shown) and the collection page is refreshed, showing only the products that are tagged with that particular tag.

The problem with this simple example however, is that the tags represent different attributes. There are tags for product dimensions ( 11", 13", 15" ), there are tags for colours ( "black") and there are tags for other attributes like "Convertible" and "Crossbody".

What could make for a much nicer user experience might be to separate those tags out into groups so that we can select a size and colour separately.

Grouping tags together

Certain themes (such as Turbo) have a feature built-in to create tag groups via the theme customiser.

This is one possibility that can be built into any theme but there are a few considerations.

1. All tags must be unique to a particular attribute. For example, if you had two colour groups (perhaps one for fill and one for trim) and red was a possibility for both.
2. When adding a new tag, a second step is required to add it to a group.

Instead, what could be a better approach is to prefix the tag with the attribute that it belongs too. So...

The warning with this approach is that you'll no longer be able to output tags verbatim to the front-end anymore (unless of course you don't mind the prefix being shown to the end user).

The prefix is not intended to be seen. It just provides the ability for the theme developer to group tags with the same attribute together.

Regardless of which grouping approach you take, the end result becomes something like this:

Advanced collection filtering

Tags are of course, the recommended approach to filtering in Shopify but you might be curious as to what else we could use to filter results.

Theoretically, we could target (and therefore filter via) any attribute on the product object and nested variant objects.

The full list of attributes for the product and variant objects are listed on Shopify's Liquid reference however I would warn against getting too tricky here.

For requirements like filtering by size and colour, we can easily use tags and build a simple prefix reader into the theme code. That way we take advantage of the inherent filtering abilities of tags.

Using more complex Liquid code, we could create filters based on other attributes like vendor, product type or even price. The issue is that without the use of the url parameters, how will the collection template know when and what to filter?

The alternative here is to use Javascript.

In fact, most filtering apps you'll find on the Shopify app store use Javascript (not Liquid) to operate.

Utilising Javascript (instead of Liquid) provides two benefits:

1. AJAX filtering - meaning no page refresh when updating filters, and
2. The possibility to accept user input without relying on URL parameters

In fact, Javascript is near infinite in its capabilities compared with Shopify Liquid which has been built to be simple and work in a certain way.

The problem with using Javascript however is that it doesn't have direct access to theme/store data like Shopify Liquid does.

This is where it starts to get tricky.

Javascript filtering

If Shopify Liquid is too limiting you might opt for a Javascript filtering solution.

Javascript filtering is not a standard feature of Shopify themes and therefore, it will require development to both access the necessary data, accept user input and then apply that input to filtering the collection of products.

In terms of accessing data, the simplest way of exposing the necessary product data to the front-end (so that Javascript can use it) is by using the JSON filter in Shopify Liquid, which will take any Shopify object and turn it into a JSON one.

You can then load the JSON object for each product into a Javascript array and use that as your product list.

After that, you'll of course need to set up event listeners to run the filters on your array of products and update the page.

As you might have noticed, this is much more laborious compared to using the standard Shopify filtering system.

This is why it's very common to use an app.

An app like Product Filter & Search by BoostCommerce provides all of this functionality without having to write any Javascript code.

If you take a look under the hood, you'll see that there is a lot going on with this app.

Each time a selection is made, an API request is shot off to an external server which returns the new array of products.

Note the words "external server".

The filtering is no longer happening on the actual Shopify store. Instead, the data is "synced" to an API and a user interface is built into the theme in order to interact with this API.

This is not necessarily a problem until you wish to heavily customise the collection page but regardless, it involves a heavy abstraction away from the Shopify platform itself.

General Recommendations

When it comes to filtering collections in Shopify, my recommendation is to simply use tags.

Using tags is the native way to filter products and as you've seen in this article, we can expand our tag names with prefixes, allowing us to group together filtering options by attribute.

Of course, if you need something a little more fancy, you can go with an app but this will complicate things.

I've experienced first-hand the drama of adding custom features to a collection page managed by an app.

So if you can get away without using app, I'd definitely recommend doing so.

Do you run a Shopify store? What solution are you currently running to filter products? Let me know your thoughts on using standard filtering over an app (or vice versa)

Remember, if you need any help with your Shopify theme development needs, send me a message on LinkedIn and let's chat about it!

Until next time,

Chris

By default, the Shopify platform does not encourage the use of Git or any other version control systems when editing front-end (theme) code.

Instead the platform allows you to edit code directly from within the Shopify admin.

This is problematic for two reasons:

1. The Shopify theme code editor is not the best IDE for efficient web development, and
2. Its own version control system is incredibly basic

Most agencies I work with have already set up a system for managing their clients' theme code with Git but for those less technical agencies, it is sometimes missed.

It is my recommendation that - except for situations involving very minor code changes - Git should be used on every project.

In this article, we'll take a look at why that is and how development teams can use Git to get a grasp on theme code.

A look at theme development without Git

Without using Git or any additional tools, the basic workflow involves making edits directly to theme code via the code editor in your store's admin area.

As mentioned, this is problematic for a couple of reasons, the most important being that it offers little in the way of tracing errors in the development process and rolling back changes.

The above gif demonstrates the extent of the version control system inside the Shopify theme editor.

When you make a change to your file and hit 'Save', it saves the previous version for you, allowing you to revert back to that version.

This is handy when you make an error on a particular file and want to revert it back to a working version but there are a lot of limitations to this approach.

1. Version control is individual to each file, meaning that if you make a theme code change across multiple files, you'll need to determine which files you need to revert and revert them individually.
2. No diff checking. The editor simply reverts the whole file without showing which part of the code has changed.

By comparison, Git is near infinite in its capabilities to store multiple versions of a code base, check differences between them and merge them together.

The only downside is that you need to setup a repository yourself and ensure that the code remains up to date.

A better development workflow with Git

While the basic workflow is ok for minor changes, a better development workflow is to download the code locally and use a proper code editor (or IDE).

This is required in order to use Git as it's not possible to run Git through Shopify's own proprietary code editor.

The best way to do this is with a command-line tool from Shopify called Theme Kit which allows you to download your theme code, make changes locally and sync those changes with your Shopify website.

Developers then ensure that the code is synced across their local environment, the production environment (ie. the theme code as it sits on the store) and the code contained in Git.

Git setup and maintenance

To get started with Git, a centralised repository is created for each project.

Initially a developer will download the theme code and commit that code to the master branch of the repository.

In a typical setup, the master branch represents the code that is currently running on the website, which in the case of Shopify theme development, is the code of the currently live theme.

At this point, a second staging branch should be created that reflects the code on the most up-to-date theme following the live one.

In a basic setup, there might be just one "staging" theme that developers are working on.

In a more complex setup with multiple developers working on the same site, there might be multiple versions of the theme being developed (one for each developer or specific feature being developed).

Using this one-to-one relationship between themes and branches, we're able to determine which changes have been carried out on which theme.

The only issue is that this relationship needs to be maintained by a lead developer or project manager.

For instance, when the staging theme is ready to go live, the staging branch needs to be merged into the master branch (in addition to clicking 'publish' on Shopify).

Switching to Theme Kit and Git

As Git cannot be run inside Shopify's theme code editor, any theme code changes made using this tool need to be manually copied across to the appropriate branch.

Except for very minor changes, this is completely impractical to maintain.

The better solution is to use Theme Kit.

Here's how the process might look:

• When starting on a new project, the developer clones the repository for the project onto his/her local computer
• If working directly on the staging theme, the developer then checks out the staging branch (remember: both of these should contain the same code), turns on Theme Kit to watch for changes and starts to work on that theme.
• If multiple developers are working on the same project, the developer might branch off of staging, duplicate the staging theme, connect to the new theme using Theme Kit and then begin work. This then becomes his/her own branch and theme.

At a certain point, it will become time to consolidate all the code from each developer's individual theme into staging. After merging the branches into staging, it will become out of date with the staging theme and therefore the code in the staging branch will need to be deployed to the staging theme.

Utilising this approach, it highly recommended that you keep all theme code changes local so that they can automatically be detected using Git. Choosing not to do this increases the likelihood that the theme code will become out of date with Git.

The tradeoff

Managing your code base and maintaining synchronisation between themes and branches using Git is a tradeoff.

It requires ongoing management, checks and balances.

But as the project grows in complexity, the need to manage your code base using a proper version control system becomes greater.

For one developer working on a single development theme it might not be so essential but for a project with multiple themes and developers, I'd highly recommend it.

What are your thoughts? Do you manage your theme code with Git and if so, what is your experience?

Remember, if you need any help with your Shopify theme development needs, send me a message on LinkedIn and let's chat about it!

Until next time,

Chris

While the world waits for the new Shopify theme paradigm to be released, many merchants are relying on page building apps to build and customise pages on their Shopify stores without the use of code.

As a developer, I remain skeptical of no-code solutions. True freedom in web development comes from being able to access and update source code.

Regardless of whether you use sections (which we'll discuss shortly) or a drag and drop editor, the end result is always code.

Code is always being created behind the scenes and the problem with these apps is they often create code that can not be easily edited directly.

This is great for most merchants, until of course, they want a very specific change on their website which is not an option inside the page builder.

In order to figure out when using a page builder might be appropriate, let's look at the current Shopify theme system and compare it to one of the most popular theme building apps on the market today.

Sections: the building blocks of Shopify themes

First of all, a little terminology.

A theme in Shopify is the template code that determines the presentation of your website to the end user and theme sections are the core building blocks of the theme.

The code for each section is self-contained in its own file alongside a configurable list of options which allow merchants the ability to update aspects of the section through the theme customiser.

These can then be added by the theme developer onto templates which control the presentation of collections, products, content pages and blog posts.

With the exception of the homepage, where merchants have the ability to add, remove and reorder sections through the theme customiser without diving into the code base, the section needs to be included onto the template using a simple line of code.

When the new theme system comes out, Shopify promises that the same functionality that currently exists on homepages will be brought onto every template - which will be awesome! - but that of course doesn't change the fact that theme sections and their options are still the deepest level of customisation that merchants will have without digging into the code.

This is a robust system that works well for merchants who don't mind getting a developer involved from time to time (a worthwhile investment in my opinion 😉) but for the more hands-on merchants, they may consider using a page building app instead.

Building pages with drag and drop

In comparison to utilising theme sections, using a page building tool like Shogun (for instance) provides a visual editor with much more granular control.

However, there is a cost.

If you opt out of the standard theme building system, you'll be relying on the app to manage your page code which could cause problems if you do end up reaching the limit of what you can achieve with the tool itself.

Again, true freedom in web development comes from being able to access and update source code.

I probably don't need to sell you on the benefits of using one of these page building apps (as I'm sure they do a great job themselves) but I do want to warn you of the limitations.

Let's take the app Shogun for example, with which I have the most experience with.

In Shogun, once you have exhausted all the customisation options and are still unable to achieve the desired result, there are two options.

1. Add a custom class to the element and apply your own CSS to the element, or
2. Create a custom element using Liquid, HTML, CSS and Javascript

If the change is a something as simple as updating a styling option that isn't an option inside the tool (like letter-spacing, alternative font, etc), you can apply your own CSS code to the element through the use of a custom class.

For elements that require HTML (structural) changes, you can create a 'custom element' in Shogun to which you can add your own customisation options via a rather dumbed-down version of what's available in the theme customiser.

For those of you reading who want to see this in action, you can watch the following video which covers the basics, all the way through to custom elements.

For the rest of you, let's simply this.

Theme Sections vs Drag and drop

So should you use a drag and drop page builder over the standard theme building system?

Well, it depends.

For a completely no-code solution, page builders offer much more control than the theme customiser. So, the answer would be yes.

But if you can invest - even just a little - into using a quality developer, there are certain cases where I wouldn't recommend it.

For instance...

For building a store homepage, I would recommend against it.

As previously mentioned, the homepage is the one template on the Shopify theme where merchants can add, remove and reorder sections through the theme customiser without diving into the code base.

Often, Shopify homepages are simply a collection of sections stacked on top of one another, the layout of which doesn't change all too often, it's just the content (mainly imagery and text) that gets regularly regularly replaced.

In this case, I feel the benefits of using theme sections outweigh the benefits of a page builder, unless of course you're looking for a completely no-code solution.

For customising product pages, I would recommend against it unless it's only for a few select products.

In order to a fully customise a product page, the page-building app will have to replace the product template with its own code meaning that you will have to create the product page from the ground-up in the page building tool or choose one of their templates.

If for whatever reason, the product template of your current theme does not meet your requirements, I think it makes the most sense to edit the template directly rather than adding an additional layer.

That being said, if it's only for a few products that you want a completely custom design, then the page building option starts to make a lot more sense.

If you're building landing pages, use a page builder app.

Landing pages are a perfect use case for a page builder because they often need to be created on a regular basis and they are less likely to rely on dynamic store data.

They also provide many advantages over the standard Shopify wysiwyg editor for content pages, which is what you'd likely be using if not for an app.

For building content pages, use a page builder if you need.

For content pages that require a level of design beyond a single column of text and images (like the article you're currently reading) than by all means, utilise a tool like Shogun.

TL:DR

While page building tools are great, I've experienced their limitations first-hand.

From my experience, a page building app seems ideal for busting out regular landing pages but not for creating critical pages on your website that require specific functionality and the use of dynamic content.

What are your thoughts? Do you use a page building app and if so, what is your experience?

Remember, if you need any help with your Shopify theme development needs, send me a message on LinkedIn and let's chat about it!

Until next time,

Chris