To make things easier, we have created a video to walk you through the basics. Please take a few minutes to watch it. We will also outline the steps below.

The Add To Cart Button Replacement Text field is useful for a few things. You can add simple text to it in order to temporarily make a product unpurchaseable on your store. You can add more information about upcoming products. You can add an image to draw attention. However, one of the best uses is to create a custom button. A custom button can direct your customers to an article, a different product or many other locations.

Using Add To Cart Replacement Text

Prior to adding Add To Cart Button Replacement Text, you will want to go through the steps for creating your product.

Once created, you can access the field by navigating to the Advanced Info section of your product and clicking the Product Display tab.

Scroll down and locate the Add To Cart Button Replacement Text field.

You can add simple text to the field and click the blue Save button at top right.

This will replace the Add To Cart Button with the text.

In some cases this will be good enough, but if you are looking for something extra, let's discuss creating a custom linked button.

Creating a Custom Button

Begin by removing any text in the Add To Cart Button Replacement Text field and saving the product.

View your product live and copy the Add To Cart Button image by right clicking it and choosing Copy File. Paste the image into a photo editing software, such as Google Drawings.

In your photo editing software create a text box with your new button text on it. Place the text over the existing button and save the new image onto your personal computer.

To add the image back into your store, from your Admin Dashboard, navigate to Design > Site Content.

Then click the blue Add Article button.

To upload your image to your store, locate the Article Body section of the Article. Using the insert image button, locate the image on your personal computer and upload it to the Article Body section. Once uploaded, you can click the HTML button </> to see the HTML code for the image. You will need to save this code. You can cancel the article after uploading the image.

We will now need to create a destination for our button to link to. For this, you could have our Studio Team create a custom page to gather customer information, however, Jotform will also work well for this. Using their Form Builder, we created a Pre-Order Form capable of collecting customer name, email address and allowing the customer to specify how many of the product they wish to preorder. Once created you can use the Publish option and choose the Embed tab. This will allow you to copy the HTML code for your form.

You can now create an Article to hold your form. From your Admin Dashboard, navigate to Design > Site Content.

Then click the blue Add Article button.

Using the dropdown menu, choose a Category ID for your Article. The Other Articles of Sample Articles would both be good choices for Category.

In the Article Body section, click the HTML code button </> and paste the Jotform HTML code in the Article Body field. Click the blue Save button at top right to save your article.

Once saved, you can use the View Live button to see your new Article, featuring your Jotform form.

Viewing the Article live will allow you to locate and copy the Article URL. We will use this, in addition to the HTML code for our button image to create the code for our clickable Preorder button.

Now, we will need to build the HTML code for our button. I chose to visit W3 Schools to find a sample code to use.

In their HTML Tutorial under HTML Links I located code to use and image as a link.

I modified the original code to be more specific to our button needs.

<a href="insert destination URL here">
<img src="insert image name here">

Using our created Article, I copied the article URL.

And inserted it into our button code.

<a href="">
<img src="insert image name here">

Locate the image source code in the Article where you uploaded your button image.

Add this code to the button HTML code snippet.

<a href="">
<img src="/v/vspfiles/assets/images/01A.jpg"/>

This is the code we will be using for our Add To Cart Button Replacement Text field. Copy and insert the code into the field. Click the blue Save button to save your changes.

With your button code added, your product will now show the Preorder button and clicking the button will take your customer to the Preorder form Article, allowing them to place their preorder for your new product.

Did this answer your question?