Adding a custom HTML field to a section

Excursionist
14 0 5

Hi there,

I'm building a site using the Debut theme for a client who will be selling physical products through Shopify but they also sell event tickets for on Eventbrite. They are looking for a way to integrate the events sales within Shopify for a more self contained "feel" to the purchasing of tickets without moving away from Eventbrite.

The soloution I have come up with is to add the event thumbnail and description to a new page using a duplicate version of the feature-columns.liquid section - text with image, but rather than use the included button in the section to link directly over to the Eventbrite website for each event I would like to use the Eventbright widget that creates a button to buy tickets and then when clicked opens up a modal window over the page. To keep this as simple as possible and easy to add / remove events I would ideally like to add a Custom HTML field to the bottom of each feature column item so that I can embed the Eventbrite widget below each description.

I have been using this workaround on other pages to include custom content which allows custom HTML to be added to a page from within the theme editor, if I could include this field within the text with image section that would work perfectly!

Can anyone help with how I would add a custom HTML area to the existing section please?

Thank you in advance :)

1 Like
Excursionist
14 0 5

Can anyone help please?

Re-reading my post above I realise that it was probably a quite confusing!

Basically what I would like to do is add the "Custom HTML" field from the third party section linked above and add it to the bottom of the feature-columns.liquid section - text with image section.

Any help would be greatly appreciated

0 Likes
Excursionist
14 0 5

For anyone who may have a similar issue and wants to add HTML to an existing section I found a soloution.

In a section with a text area find the following code

            "type": "richtext",
            "id": "text",

Change "richtext" to "textarea". This will change the text field in the section in theme editor from formated text to HTML and you can then format the text using HTML and also add any custom HTML to that section that you want.

Thanks to this post that helped me work the out!

4 Likes
Shopify Partner
1 0 0

Thanks for updating!

0 Likes
Tourist
13 0 0

This is great, thanks Martin.


Do you know if it's possible to do for headers of sections as well? I am having trouble trying to find how to do that. 

0 Likes
New Member
2 0 0

yeah but, what about an area like for input field for pop up maker? It doesn't even have underline option, seriously did Shopify forgot some us know how to code HTML?

 

Screen Shot 2019-10-02 at 12.49.14 PM.png

0 Likes
Astronaut
1091 150 274

Do you know how to code HTML? Rich text is an ok option, but there's actually a type of "html" you can put in the schema instead of "richtext" which gives you a blank area and you can put html in there. I don't believe it has any text editing options. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
2 0 0
I’m use to working In Wordpress this shopify thing, is annoyingly weird platform to be working in, can you please point me into a direction where I can change the input field to accept html? I didn’t choose Shopify as my “go to” platform if it weren’t for my client.
0 Likes
Astronaut
1091 150 274

What input field are you talking about? Are you talking about the rich text editor mentioned previously in this post? If you go into the schema you can change it to be an html field if you change it's type to html:

 

"type": "html",
  "id": "section_html",

Which you would then render in the HTML of the section with:

 

{{ section.settings.section_html }}

If you need help navigating the platform or figuring out where to put stuff, you can send me a personal message with your questions and I should be able to guide you in whatever you're trying to do. You will have to enable messaging in your profile first though.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
1 0 1

I'm trying to add my custom code in the text area so that I can add a Privy registration form.  tried to follow the article using the Debut theme and I cannot make it work! Is there another way to add and embed for in a section of my Shopify store? 

div class= ' privy-embed-form '  data-campaign=' #### '
 
1 Like