Change Preorder Text on Storenvy

Posted by Jen Tong on January 17, 2016

Storenvy is a great option if you want a free online store.
We’ve been using it for our geeky fashion business, Happy Nerdcore, for the last several months. It works great, but we had to do a little hax0ring to make it fit out needs.

Storenvy has a cool ‘preorder’ flag that you can set on inventory. It communicates to the customer that it will take a little longer to ship. We wanted to use this flag to indicate which items in our store were made to order, and hence would take longer to deliver.

Luckily Storenvy lets you add your own CSS to your store, so we hacked in our own text.

  • Go to Admin Panel -> Storefront -> Theme -> CSS Mode
  • Tweak this CSS to match your color scheme and desired text
/* Update category pages */
.product .preorder.flag.status {
  background-color: #FFF; 
  color: #FFF; /* match colors to hide old text */
  width: 130px; /* adjust width to fit new text */
}

.product .preorder.flag.status:after {
  content: "Made to order"; /* new text */
  position: absolute;
  top: 8px;
  left: 8px;
  right: 0;
  bottom: 0;
  color: #000; /* new text color */
}

/* Update product detail pages */
#product .preorder.status {
  background-color: #FFF;
  color: #FFF; /* match colors to hide old text */
  position: relative;
}
#product .preorder.status:after {
  content: "Made to order"; /* new text */
  position: absolute;
  top: 8px;
  left: 8px;
  right: 0;
  bottom: 0;
  color: #000; /* new text color */
}
  • Save, reload, and profit!