Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I am trying to customise my listings in more depth. I have installed Globo Preorder to fix my solution but their support team have escalated my customisation further to fix problems their end for this matter.
Some of my listings that are 'Continue selling when out of stock' checked are being sold and customers are coming back to me asking where their orders are even though the title and description of those state that they are pre-orders and that they can only be fulfilled in the future.
I want to change specific buttons but am not sure how to and I am sure that it requires custom coding. If anybody can suggest a fix for this that would be great. See attached picture to understand more what I am referring too.
It should say 'out of stock, pre-order only' and should have a red glowing circle instead of the green that it is posted next to
I am trying to customise the add to cart button to 'pre-order'
Hey @TimJeffs
Thank you for the screenshot and the details of what you are trying to do. I understand you need to have pre-order products showcased differently on your store so that customers are aware that these aren't items they are getting right away.
The first step will be to make a new product page template in your theme editor and apply it to all your pre-order products - Shopify Help Center: Templates.
You will want to edit this product page template so that the "in stock" green light notice is no longer there, or replaced. This is most likely a feature built into your theme, so hiding it is the easiest option but you should be able to alter the text and image using some CSS code on the page. You can also remove it and replace it with a different field like "Icon with Text" (example below).
For the "Buy it now" button, that text is set theme wide and can't be directly altered within the theme editor on a template basis. This could potentially be altered with some CSS coding as well though. I can't help with CSS directly, but hopefully some of our developers in our community would be able to assist.
Shay | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hi Shay,
Thank you for your response.
Thankfully the app I tried managed to fix it the same day so it the listings in question are updated to say what I wanted(see below).
I think I will still hold my hopes up high for a CSS fix as potentially moving forward I would like to start implementing code myself through learnings and have my website more thoroughly customised and fit to what I want personally. I will wait to read a fix that is CSS based so that I can gain some insight on what to potentially do and start with.
Now in the picture below there is still the 'In stock, ready to be shipped' prompt with the glowing green light and that needs to be changed still so to whoever knows a fix that would be amazing.
Hello,
Hey! Scarcity Low Stock Counter app allows you to display different messages based on your stock level. For instance, if you are out of stock but "Continue Selling When out of Stock" selected in Shopify, then you can display your custom message for that specific case. I assume this case addresses your pre-order condition.
The app offers five custom messages based on your stock leve as you can see from the screenshot.
Hope it helps.
Best regards,
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025