Skip to main content

How to Use ChatGPT Coding for Your Shopify Store

By June 9, 2023August 1st, 2023Uncategorized

At Big Red Jelly, we have been very impressed with all the unique AI tools available to our design and development team. One of the tools that frequently helps our team develop features, is ChatGPT coding. On our Shopify team, we frequently use tools like Rytr.me for structural copywriting templates, ChatGPT for Coding assistance, and Canva’s new AI templating features to workshop new design ideas. In today’s article, we will be highlighting some of the incredible ways we use ChatGPT to build out unique code that can be used in almost any Shopify store and will teach you a bit about how you can replicate our methods in your own store.

Can you trust the code ChatGPT writes for Shopify Stores?

In general, the answer is yes. ChatGPT has read a significant portion of Shopify’s documentation (even on the free version) and can help you write code that is usually quite good in Shopify’s coding language, Liquid Web. There will be some limitations, as Shopify’s new OS 2.0 features include some updates that were not available prior to GPT-3’s release, but for most quick features, it can get the job done.

However, you may sometimes run into a stumbling block and realize that ChatGPT does not yet have the ability to answer your question. We have seen a roughly 40% success rate on raw input code and a 60% success rate for code that has been adjusted based on our secondary response feedback.

In short, what that means is that if you just use the first piece of code ChatGPT gives you, it will more than likely not work. But if you are willing to test and ask chatGPT to make iterations based on feedback, it will likely give you some better results.

Features we have implemented using ChatGPT Code

When we build Shopify stores for our clients, our main priority is on design and the user experience of the website. Occasionally that bleeds into features that are not built into Shopify that need to be built manually or use an app on the Shopify App Store.

Here are some of the features we have been able to build for some of our clients using ChatGPT.

  1. Creating a custom form submission box that adds custom order details to a user’s order when they add to the cart.
  2. Requiring users to log in before being able to see prices.
  3. Customized product upsell and bundle options in the checkout.

If you are a keen Shopify store owner or have worked with Shopify in the past, you may notice that each of these features is technically possible using Shopify Apps. Which is true! Shopify Apps are awesome and usually our go-to option for when we need to add something to a store we don’t have built into the theme or as a default Shopify feature. But there are some reasons to use ChatGPT instead of a shopify app and reasons to use an App instead of ChatGPT

Pro’s and Con’s to using ChatGPT to build features instead of using Shopify Apps

ChatGPT is a free alternative to Shopify Apps, which often require monthly subscriptions or fees. However, Shopify Apps offer less control over the code that is added to your store, and some apps are better at removing code after being removed than others. This can result in useless code slowing down your store’s speed.

Shopify Apps are more user-friendly than writing the code yourself. They are usually designed to follow your color scheme and style, making it easier to make a Shopify app feature look the way you want it. ChatGPT, on the other hand, usually just gives you raw code that you will need to style yourself. If you do not know basic HTML and CSS, this may be difficult.

Ultimately, the best choice for you will depend on your individual needs and preferences. If you are looking for a free option with more control over your code, ChatGPT may be a good choice. However, if you prefer a more user-friendly option that is designed to follow your store’s style, a Shopify App may be a better choice.

Here are some important things to consider when choosing between ChatGPT and Shopify Apps:

  • Cost: ChatGPT is free, while Shopify Apps can range in price from free to hundreds of dollars per month.
  • Control: ChatGPT gives you more control over the code that is added to your store, while Shopify Apps offer less control.
  • Ease of use: Shopify Apps are more user-friendly than ChatGPT, which requires some basic coding knowledge.
  • Customization: Shopify Apps are more customizable than ChatGPT, which usually just gives you raw code that you will need to style yourself.
  • Support: Shopify Apps typically have better support than ChatGPT.

How to use ChatGPT to Write Code for Shopify and Save Money on Apps

If you have never used it before, ChatGPT will ask you to provide it with a prompt to get started. Then using the context of the information provided and corrections from you, it will make some adjustments. For example, you might be asked to provide the name of the feature, the purpose of the feature, and the specific functionality you want the feature to have.

In our experience, there are a couple of things that will make your prompts more successful.

  1. Make sure you are as specific as possible. Are you working on a Product page, Collection, or homepage? Specifically, how does the feature need to work? What parts of your store need to be affected?
  2. Have your store up in another tab and test out the code as it is given to you to find bugs or issues.
  3. Find issues and ask chatGPT how to correct them.

Once you have provided ChatGPT with the necessary information, it will start generating code for the feature. You can then review the code and make any necessary changes. Once you are satisfied with the code, you can save it and use it to create your Shopify feature.

3 Troubleshooting steps to fixing bad code ChatGPT Wrote

ChatGPT is prone to writing half-good code on Shopify which makes it really important you know how to troubleshoot and make adjustments. Here are some steps we use to troubleshoot bad code that you can use when working with ChatGPT.

  1. Identify the problem. What is the code not doing that it should be doing?
  2. Isolate the problem. Can you narrow down the code that is causing the problem?
  3. Test the code in a few places. Sometimes chatGPT will recommend putting it in one location where it makes sense to put it in another.
  4. Try using the “CustomLiquid” section in the Shopify customizer instead of editing the code directly in the theme.

Conclusion

In conclusion, should you use ChatGPT for coding on Shopify? We think it’s worth at least a try if you are familiar with Shopify’s theme setup and code customizations. If you are not familiar with some basics of web development like markup languages and basic “if-then” coding principles, it may be more headache than it’s worth to implement code yourself.

 

Written by Preston Vawdrey