My Shopify app needs to edit storefront to change existing element. There are two ways to change storefront code in Shopify
Edit liquid theme file
Add client side JS with Asset API
However, different merchants use different themes in their stores. Is there any way my app works with every theme or how can I write a script which supports maximum themes? It would be very helpful if you can give some hints or share your thoughts about this issue.
After searching more about this issue I got some insights like Unfortunately we can't edit different theme with same script, because each theme might be very different. Some themes might even have different filenames for this sections or they might have completely different HTML structure.
There is no easy and universal way how to solve this problem. One of the ways:
You can do some heuristic in the theme files and try to find a correct place where to insert your code. For example, langify is doing that. It's scanning the whole theme and finding places where to insert their code.
You can ask a customer to add your code manually. Many apps are doing that because it will cause fewer errors. You just need to prepare detailed manual how to set it up properly.
You are wrong, exist more ways.
on storefront 2.0 you can create a theme app extension this is the recommended way today.
UPDATE: On 2.0 you should recommend your customer to replace their section with your section, this is currently the clean and recommended way to do.
On 1.0 well depends a lot on your project complexity or the part on the code your app touch...
Many apps use the theme Rest API, with that you can add on your app installation script a step for downloading the published theme. After that 2 options:
You can search and replace something specific, you can write a script then read the theme files and replace what you need to be replaced, then do the change automatically and republish your changes on the store. Faster no human intervention
use the downloaded code to easily read and replace manually the code using an IDE and after manually upload your changes using the same API. slow, need human intervention but more flexible.
You can start with option 2 now and continue to develop the script for option 1.
Related
I would like to create a Shopify app that adds an additional section to the checkout page - a possibility to select the delivery time window. I know that such apps already exist but I want to use my own application server to generate the values that can be selected.
What is the best way to approach this? I've spent last 2 days browsing shopify documentation and following various tutorials but I'm still confused. I thought that application bridge would be the way to go but after playing with it a bit it seems that it only allows to embed application frame in the admin panel, not on the checkout page.
Should my app send a script tag that would call my server and add the whole slot selection UI in javascript? Or should I maybe modify the templates somehow? Can I even make AJAX requests to third party servers from templates?
I would appreciate any advice.
Shopify revealed that there will be a Checkout Apps support soon, but that time isn't now.
So at the moment the Checkout page is standalone and you can't use the ScriptTag API in it.
If you are on a Shopify Plus account and you contacted Shopify to allow you to modify the checkout.liquid file you will be able to add your section manually.
With some additional JS logic you can pass the delivery time to the cart.attributes so that it will be present in the order info. But that's pretty much what you can do and only if you have a PLUS account.
If you plan to make larger modifications you will have to create an App that will have a custom checkout process... which will be a huge overkill for adding a single section, but that's a solution as well.
I am seeking guidance on the best way to introduce a new theme onto an already complex e-commerce Shopify website.
I am new to the Shopify go-live process, this is the first time I am going to launch a new theme that I have built. I understand the building process and could do with some clarification on the go-live steps.
The job:
A complex e-commerce company has had us build a new design and way of navigating through to product pages. Introducing new collections and tags. There are also new pages and will be a dramatic change to URLs from an SEO point of view.
The store will remain in the same place, on their server, the same domain name, in their control.
I need to be able to provide them with an importable version of our development store, with guidance on how to push this live without breaking and allowing us to test the site on the live-server before opening it up to the users.
The implementation:
I have created the store, the pages, the collections, the tags, all the bells and whistles.
I have uploaded their latest database of products onto the development store and set these up into the collections and store filters.
The question:
How do I put this live onto the old store with the least down-time & having the ability to test the newly created store before customers can see it?
The break-down of the question:
What files need packaging? What is the easiest way to package up these files for the client company? What is the best way to install the packaged files? What is the best way to test the website?
One last concern:
Is it possible to keep the existing stores orders and customer user profiles?
You can preview the theme and populate data from each Section (if theme you make is a sectioned-theme). You can compiled the theme from you development and upload to their store, you don't have to send it live.
I bought a shopify plus to customise my checkout page -add some html and JS to the checkout template- and I read this in the shopify documentation :
If you're on Shopify Plus, then you can edit the code for your checkout. However, if you make changes to your checkout code, then you need to upgrade your checkout.liquid template manually whenever Shopify makes an upgrade.
and I was wondering If it's possible to create an App to do that for me.
I mean :
1-Create an app to modify the checkout page.
2-After each update my app modify it automatically or at least I just re install my app and the checkout will be updated.
I already have shopify plus and managed to do that by modifying the checkout.liquid.
But It's not really an efficient way to change the checkout.liquid each time might be ok for one user but what if I want to do the same for a lot of shopify users for example.
It's a Basic concept making a plugin in other ecommerce platforms such as Prestashop, Magento ... But It seems really complicated in Shopify.
Please Help.
If you're on Shopify Plus, then you can edit the code for your
checkout. However, if you make changes to your checkout code, then you
need to upgrade your checkout.liquid template manually whenever
Shopify makes an upgrade.
This statement means that whenever Shopify introduces some changes on their end in the Checkout process they will notify you prior to update. 30 days prior as far as I know so that you can update and test. They will provide you details for changelog so that you can verify if it does break any of your customizations. Such changes are not frequenet and I cannot think of any automated way that your app will be able to analyze the changelog and decide if it affects your customizarions or not.
Since most of your changes will be in additional JavaScript it won't be much of an effort for you and will not be as frequent.
However, if you manage many stores for multiple Shopify plus customers then you may push an update manually to all stores that have your APP installed and make use of Assets API to modify checkout.liquid file.
For example, if Shopify notifies you that Checkout code is changed and you need to update it. Just review the changelog, then initiate a process on your APP backend that updates the new code to all chekout.liquid files on all the stores where your app is installed.
Assets API
Checkout Customization
I have two different versions of the same theme and two different Shopify stores.
One is live and has some latest blog posts,
other one is used for development purpose i.e some styling and has less number of blog posts.
Will download the theme from the development version and publishing it to the live website remove blog posts?
If it does then what is the best way to apply only front-end changes from one store to other?
Blog Articles (Posts I assume) exist in Shopify as resources you create, the same as any Product, Page or Collection. They do not disappear or otherwise change with Theme Changes.
When your theme is set to render a blog, it renders a number of articles based on some criteria. These days, likely a setting you can touch with the Setup of your theme, requiring no code.
If you update a theme, theoretically, the display of blog articles would not change. You should be safe as houses in other words, to play with your theme, and not see a difference in the blog articles save for what you actually change theme-wise or settings wise with regards to rendering a theme.
If you're really interested in the little bit of code involved, check your theme files for blog.liquid and article.liquid for ways you can tweak your display.
Will download the theme from the development version and publishing it to the live website remove blog posts?
No, your data is complete decouple from your theme.
If it does then what is the best way to apply only front-end changes from one store to other?
One way to avoid any data sync issue or syncing configuration between environments is to you your production environment as your dev environment.
You can duplicate your production theme, in your production environment and make changes to it and make sure you keep your theme unpublished. Shopify has a "theme preview" feature that allows users to see an unpublished theme, which can be considered as your development theme.
Most likely your environment is out-sync in some way that is why it looks like you are missing your data.
I have much experience developing for WordPress but this will be my first project developing for Shopify.
I will be customizing a 3rd-party Shopify Theme with custom functionality as per the client's website needs. I've been reading much documentation but I am still a bit confused about Shopify Apps...
My question is:
Do I need to build an App to extend the functionality of my theme, or can I just hard-code the new functionality directly into the theme? Is there any reason to develop an App for functionality that will only be used on my theme?
I thank you very much for your advice.
Do I need to build an App to extend the functionality of my theme, or can I just hard-code the new functionality directly into the theme?
Short answer: Yes. (Damn that mathematician's response!)
Is there any reason to develop an App for functionality that will only be used on my theme?
Longer answer: Sometimes, yes.
That wasn't very helpful
Longest answer: True. Let's break it down a little more, then.
Without knowing what you need to do, I can't offer a concrete yes-or-no answer to the question, "Should I build Feature X as an app?"
If you...
Need to add, modify or delete any objects that require admin privileges (including products, variants, collections, orders, etc.), or...
Need to listen for any of Shopify's webhooks, or...
Need to store data in an external database for any reason...
... you will need an app to have the permissions required to access and manipulate data at this level.
However, if you...
Can do everything you need with the existing Shopify objects, and...
Need few or no settings to control the desired behaviour...
... you would not need to create an app. Shopify themes have some powerful tricks & tools available to you, including:
The ability to create custom endpoints for any of the main types of objects to get the data you need;
Easily-edited settings_schema file to add arbitrary configuration variables to help control your mini-app;
Javascript endpoints to let you add, remove & edit products in the cart
Hopefully this quick breakdown helps you decide if you need to create an app or not. (And to anyone who does need to make a single-site app, remember that Shopify lets you create 'Private Apps' that don't have to go through the app store process to get widespread approval)
I thank you very much for your advice.
You're welcome! Hopefully it proves to be helpful. Good luck!