How can I add radio buttons to the Impulse theme product page?

Store Design
1

Can anyone help with adding radio buttons and a text box to my product page please on the Impulse theme?

I need to ask the customer on the product page if the product they are purchasing is for themselves and they would select yes or no. If No is selected, I would then need a text box for them to enter the name of the person they were buying for.

Is this possible to add in code or are there any apps for this sort of thing?

TIA

2

Hi @Nikki_Urban_Ink

This is certainly doable, however that would require Javascript customization. How proficient are you in coding?

Let me know!

3

Hi,

Thanks for your reply! I am ok with adding in code.

4

@Nikki_Urban_Ink

If you’re offering an engraving or similar service, you could also leave the radio buttons out and write something like:

Is this Product a gift?

Add the recipient’s name to it!

[Text Input Field]

By keeping it visible by default, your customers will directly see the benefit and wouldn’t have to take an additional step to see the form. From the user experience perspective, this would highlight and communicate your service in a faster way.

In this case, you also wouldn’t need any JavaScript added to the code and the implementation would be much easier and faster.

The following steps are specifically for the impuls theme

Step 1:

Create a form using the UI Form generator.

Step 2:

Create in the Code Editor a new snippet with a distinctive name (e.g. engraving-form.liquid) and paste the code from the UI Form generator.

Step 3:

In the Code Editor look for the product-form.liquid under snippets. Right above the -container place following snippet:

{%-render 'engraving-form' -%}

and save. You could also place this snipped at a different position, but keep in mind, that it has to be within the product’s form-tags.

Step 4:

Open the cart-item.liquid under snippets and place following code right beneath the

container:


    {% unless line_item.properties == empty %}
    

      {% for property in line_item.properties %}
      - {{ property.first }}: {{ property.last }}
      {% endfor %}
    

    {% endunless %}

and save.

Step 5 :

Change styling if necessary

As a result, you should see the text input form on the product page and, if used, the text input displayed in the cart.

You could also add the customer’s input in the confirmation mail by adding the line-items.properties. Check this Shopify Developer Page to find out more about the line-items.properties and how you can use them.

I hope this short explanation helps.

5

Hi @Finer Thank you for your reply!

The form is for medical equipment and I need the yes or no radio buttons. I did look at the UI form generator, but I couldn’t figure out how to add both the radio buttons and a text box - it seemed to only be able to add one option?

6

@Nikki_Urban_Ink

You should be able to use both, the radio buttons and the Text Input. You’ll just have to insert the forms/inputs within the

container.

As @JHKCreate mentioned, if you want to display the text-input if the radio button is set to “no”, you’ll have to use some JavaScript. Also, the Radio Buttons wouldn’t need to be in the

-container

Include this JavaScript (using a -Tag or creating and calling an .js

file in the Code Editors assets)

function ShowTextInput() {
        var radiono = document.getElementById("radiono");
        var textinput = document.getElementById("textinput");
        text-input.style.display = radiono.checked ? "block" : "none";
    }

Here is an example that can be placed in the product-form.liquid under snippets.

You’ll definitely are going to modify the styling. Also, the naming is up to you :wink:

Let me know if this worked!

7

Hi @Finer

Thank you so much. I think the javascript option is a bit beyond my capabilities as I’m getting lost in the instructions!

If I stick to your first option of using both radio buttons and text input, I take it I would need to generate another form for the radio buttons?

8

Hi,

Thanks for your reply. I’m ok with adding code!