Have you ever wanted to customize your Shopify store's cart button in ways like the following?
- Switch to a pre-order button when out of stock
- Switch to a back-in-stock notification button when out of stock
- Disable the cart button before a new product launches, and enable it at launch
- Enable the cart button only for a limited time
- Enable the cart button only on Wednesdays, or only on dates ending in 5 each month
- Enable the cart button only for specific members, and disable it for guest customers
And so on.
Shopify's built-in cart button only has two states — out of stock and normal sale — so the customizations above aren't possible out of the box.
This article introduces Shopify apps that let you customize the cart button, along with a variety of customization examples using these apps.
The blog article below introduces how to customize the cart page. Please use it as a reference.
About Shopify's Cart Button (Buy Button)
First, as shown in the table below, Shopify's cart button switches states based on the product setting (whether "Continue selling when out of stock" is checked) and the stock status (in stock or out of stock).
* Depending on the Shopify theme you're using, other switching behaviors beyond those listed below may also be possible.
Cart Button States
"Continue selling when out of stock" is a setting you can configure per product (more precisely, per variant) from the Shopify product management screen. When checked, the product continues to be sold even after stock runs out.
On the other hand, if it's unchecked, the cart button switches to "Out of stock" once stock runs out, preventing the product from being added to the cart, and customers who already have the item in their cart will get an error at checkout when trying to purchase it.
A Shopify App That Lets You Freely Customize the Cart Button
As mentioned above, Shopify's built-in cart button only supports simple state switching.
Cases like "I want the cart button to switch to a pre-order button when out of stock," "I want it to automatically switch to a back-in-stock notification button when out of stock," "I want to enable the cart button only for specific members and disable it for guest customers (customers who aren't logged in)," or "I want to enable the cart button only for a specific period" can't be handled by the built-in cart button functionality alone.
This is where the Shopify app "RuffRuff 予約販売" comes in handy. With RuffRuff 予約販売, you can freely change the cart button's state based on the time period, stock status, member status, and more.
RuffRuff 予約販売
RuffRuff 予約販売 helps reduce lost sales opportunities that occur when items are out of stock, before a new product launches, or while waiting for restock.
You can set up pre-orders on your own Shopify store with surprising ease, registering unlimited pre-order products and accepting unlimited pre-orders. You can also restrict customers from ordering pre-order and regular products together in the same order, and send back-in-stock notifications when the restock date is undetermined.
It also offers many unique features not found in other pre-order apps, such as "deferred payment," which lets you collect payment before the product ships.
Using RuffRuff 予約販売 to Switch the Cart Button
Switching to a Pre-Order Button When Out of Stock (Continue Selling)
As mentioned above, a Shopify cart button can continue selling even after stock runs out, but the button text can't be changed for that state. If the product is sold as-is, customers who assume the item is in stock may mistakenly believe it will arrive right away, leading to an unintended purchase.
To avoid purchases based on this kind of misunderstanding, RuffRuff 予約販売 lets you "switch the cart button to a pre-order button when out of stock."
Demo Product
Setup Instructions
The benefits of running pre-orders on Shopify are explained in detail in the blog article below. Please use it as a reference.
Switching to a Back-in-Stock Notification Button When Out of Stock (Accepting Restock Notifications)
For products where restock timing is uncertain (i.e., you can't tell the customer a definite ship date), there are cases where you'd rather accept back-in-stock notification requests instead of running a pre-order.
RuffRuff 予約販売 can handle this too. Its back-in-stock notification feature is designed to be used together with email marketing apps like Klaviyo or Omnisend, and integrating with Klaviyo or Omnisend gives you the following benefits:
- Switch the cart button to a back-in-stock notification button
- Add the restock notification feature to pages other than the product page
- Display and customize the restock notification button
- Configure different restock notifications per product
- Easily set up and customize restock notifications
Setup Instructions
There are many other Shopify apps that can implement back-in-stock notifications. The blog article below introduces Shopify apps that let you add a restock notification feature. Please use it as a reference.
Announcing an Upcoming Launch Before Release, and Automatically Switching to Regular Sale on the Launch Date
When launching a new product on Shopify, you can use the scheduling feature available in the product management screen to automatically switch the product from "Draft" to "Active" on the launch date.
However, this approach has the drawback that the product page can't be published until the launch date.
Publishing the product ahead of launch has benefits too, such as making it easier for customers to become aware of the product, and giving search engines like Google a head start indexing the product page (an SEO benefit).
Demo Product
Setup Instructions
The blog article below introduces the benefits of announcing upcoming launches on Shopify, along with launch-announcement apps. Please use it as a reference.
The blog article below also introduces the basics of SEO and SEO measures you can take on Shopify. Please use it as a reference.
Enabling the Cart Button for Members Only (Members-Only Sales)
There are cases where you might want to "sell only to members," "run a discount sale only for members," or "sell only to members with a specific tag (VIP members)."
RuffRuff 予約販売 can handle this too — you can enable the cart button only for specific members and disable it for everyone else.
Demo Product
Setup Instructions
You can also run members-only discount sales, VIP-member-only sales, and VIP-member-only discount sales. Please refer to the blog article below for more details.
The blog article below introduces ways to implement purchase restrictions on Shopify beyond members-only sales. Please use it as a reference.
Selling Only During a Specific Period
There are also cases where you might want to run a limited-time sale, such as selling for just one week. RuffRuff 予約販売 can handle this too, and it also lets you customize the cart button before and after the limited-time sale period.
For example, before the sale starts you can disable the cart button and change its text to "On sale from [date] at [time]," and after the sale ends you can disable the cart button and change its text to "Sale has ended."
Demo Product
Setup Instructions
Selling Only on Wednesdays
There are also cases where you'd like to run recurring sales on a specific day of the week. RuffRuff 予約販売 can handle this too. For example, you can run promotions like "sell only on Wednesdays," "Tuesday market," or "Sunday sale."
Demo Product
Setup Instructions
Selling Only on Dates Ending in 5 (5th, 15th, 25th) Each Month
There are also cases where you'd like to run recurring sales on specific dates each month. RuffRuff 予約販売 can handle this too. For example, you can run promotions like "sell only on dates ending in 5 (the 5th, 15th, and 25th)," "sell only on the 10th of each month," or "discount sale only on dates ending in 3 each month."
Demo Product
Setup Instructions
Translating a Customized Cart Button
Shopify's cart button can be translated using a translation app such as "Shopify Translate & Adapt," but a customized cart button cannot be translated this way. A cart button customized with RuffRuff 予約販売 can be translated into any language, such as English or Chinese, using RuffRuff 予約販売's own translation feature.
Setup Instructions
The blog article below explains translation apps in detail. Please use it as a reference.
In Closing
In this article, we introduced Shopify apps that let you customize the cart button, along with a variety of customization examples. Be sure to use "RuffRuff 予約販売," introduced in this article, to customize your cart button and put a variety of sales strategies into practice.
RuffRuff 予約販売
The blog article below introduces how to customize Shopify's blog feature. Please use it as a reference.
The blog article below also introduces recommended Shopify apps by category, including for growing sales and improving customer acquisition. Please use it as a reference.
