Knowledgebase: Site Design
Can I get my radio buttons back on my HTML5 theme?

On the HTML5 themes, you will notice certain aesthetic changes. One of these changes is in regard to the way radio button options on displayed on product pages.

Instead of the standard circular radio button, radio options are now contained in a color changing selection box.

Some of our merchants have missed the old radio button style, so we've made it possible to change your template back to using the circular radio button selectors for your product options. If this is something that interests you, please use the following steps.

Please note
The following instructions will require some HTML editing knowledge. For the purposes of this article, we will outline the steps as clearly as possible.

The information in this article is provided solely as a courtesy and to offer basic instructions on making changes to your store's HTML templates.

Please understand that - regardless of how simple or complex the changes may be - HTML changes and troubleshooting fall outside the scope of our support department. The 3dcart support team is neither trained, qualified, nor allowed to make these changes for you. The boundary of our scope in this matter is limited to providing these instructions and helping you reset the template if the changes don't work as you wanted.

If you are uncomfortable with making changes to your site's HTML, please contact your sales representative and inquire about our HTML and design services which can make these changes for you.

Thank you for your understanding

  1. Log into your 3dcart Online Store
  2. Go to Settings ->Design ->Themes & Styles
  3. Click on "Edit Template (HTML)" to go into your store's theme template editor.
  4. Look for listing_0.html and click on its "Edit" button

If the listing_0.html file is not present in your theme folder, then it is being served from the store's common folder. To get to the common folder, look towards the top right to the "Go to folder:" drop down menu and select templates/common-html5

  1. Using your browser's search function (CTRL-F) look for the word "radio-format" within the HTML coding.

You will be taken to a block of code that begins with "<!--START: radio-format-->." This block of coding controls the radio buttons.

Directly beneath the "<!--START: radio-format-->" line, you will see the following:

<div class="radio-format">

Change this to say the following instead:

<div class="alt-radio-format">

  1. Save your changes.

Your product options will now be displayed in the old circular radio button format.

Help Desk Software by Kayako fusion