Note: The steps below are not applicable for the default themes in Theme Manager.
The ability to add a custom order button is standard with Editor 3.0 templates. If you wish to move to the latest templates, click the Design Wizard link in the Edit column of Store Manager.
Using Store Editor, there are two ways you can customize the Order button on your item pages: edit the text or use a custom image button. If using Store Tags with your Web Hosting account, you can also add custom button text or an image.
Editing the text of Order buttons
If you are building your store using the Store Editor, you can customize the default text of your item Order buttons. You can edit the Order-text variable to change the text on all Order buttons, or override the Order-text variable to customize the text of Order buttons on a specific page.
Customize the text of your Order buttons in the Store Editor
- Sign in to your My Services page.
- Click the Store link.
- Go to Store Editor.
- Click the Variables button in the Editor toolbar.
- In the the Order-text field, enter the text you wish to appear on your Order buttons.
- Click the Update button.
- When ready, click the Publish button in the Editor toolbar to publish these changes to your store.
All order buttons for items in your store will now have the new text.
Note: If you wish to use different text on some Order buttons, you can override the Order-text variable for those pages.
Using custom images for your Order buttons in the Store Editor
You can upload your own image to use for the Order button.
Upload an image for your Order button
- Sign in to your My Services page.
- Click the Store link.
- Go to Store Editor.
- Click the Variables button in the Editor toolbar.
- Next to Add-to-cart-image, click the Upload button.
- Click Browse to locate your image, then click Send.
- The image appears next to the Upload button.
- Click Update to see the image in place on the store item pages.
- Publish your store editor changes when ready.
Customize the text of your Order buttons when using Store Tags
If you are using Store Tags to create your Store pages on the Web Hosting side of your Merchant Solutions account, you can customize your Order button. When you get the order button tag from the Store Tag Hub, it will look similar to:
<form method="post" action="<!--#ystore_order id="productID" -->"><input type="submit" value="Order"></form>
To change the text of the button, edit the text appearing in the value attribute. For instance, if you wished to change the text to Buy now! then your store tag for the order button would be:
<form method="post" action="<!--#ystore_order id="productID" -->"><input type="submit" value="Buy now!"></form>
Using custom images for your Order buttons when using Store Tags
In order to use custom images for your Order buttons, you'll need to upload the image for the button to your Web Hosting account using the File Manager, then edit the Store Tag code to call the image you wish to use for the Order button.
Edit the Store Tag code to use custom images for your Order button
- Open the HTML Editing tool you use to build or edit pages.
- Copy and paste the block of sample code below in place of the Order button code on your page.
- Edit the code by replacing the placeholder content (in red) with the information for your store:
- storeID - replace with the Store ID for your store.
- productID - replace with the ID of the product (as listed in the Catalog Manager) for the Order button.
- http://path_to_image/imagename.gif - replace with the full path to your Order button image. You can get the path by clicking the file in the File Manager.
- http://www.widgetdesigns.com/page.html - replace with the full path to the page on which the Order button appears.
- Save and publish the page when ready.
Store Tag Sample Code - Custom Image Order button
<form method="post" action="<!--#ystore_order id="productID" -->">
<input name="vwitem" type="hidden" value="productID">
<input name="vwcatalog" type="hidden" value="storeID">
<input name="vwquantity" type="hidden" value="1">
<input type="image" src="http:path_to_image/imagename.gif" border="0">
<input type=hidden name=.autodone value="http://www.widgetdesigns.com/page.html">
</form>
See Also: