Shopify themes, liquid, logos, and UX
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 🙂
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
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!
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.
Hey @Amy_Dunis, just wondering if you figured out how to make the headers HTLM editable? I am also having trouble applying the method mentioned above to headers. Cheers
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?
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.
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.
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=' #### '
Hey there,
This is my first Shopify site and I've been trying for hours to do something that seems like it would be pretty simple. I want to create a section on the homepage where I can just enter HTML...I can't stand the "rich text" editor that doesn't allow you to edit HTML code but only allows Bold, Italic and a Link.
I've tried following the directions you've outlined and I feel like I got really close, but in the end nothing was changing. I am using the Handy theme and also tried duplicating one of the sections that was working (in an effort to make sure I had the schema right). This created a section but when I entered HTML, it wouldn't display on the page. I have shown the code I was using below and also attached a screenshot of what I am seeing.
Thank you so much for any help you can offer! ❤️
<script type="application/json" data-section-id="{{ section.id }}" data-section-type="html-area" ></script> <section class=" pxs-rich-text pxs-rich-text-width-{{ section.settings.width }} " > {% for block in section.blocks %} <article class=" pxs-rich-text-block pxs-rich-text-heading-{{ block.settings.heading_size }} {%- if block.settings.text_alignment != blank -%} pxs-rich-text-alignment-{{ block.settings.text_alignment }} {%- endif -%} " {{ block.shopify_attributes }} > {% if block.type == 'text' %} {% if block.settings.title != blank %} <h2 class="pxs-rich-text-heading"> {{ block.settings.title | escape }} </h2> {% endif %} {% if block.settings.section_html != blank %} <div class="pxs-rich-text-content rte"> {{ section.settings.section_html |escape }} </div> {% endif %} {% endif %} {% if block.type == 'page' and block.settings.page %} {% if block.settings.show_heading %} <h2 class="pxs-rich-text-heading"> {{ pages[block.settings.page].title | escape }} </h2> {% endif %} <div class="pxs-rich-text-content rte"> {{ pages[block.settings.page].content }} </div> {% endif %} </article> {% endfor %} </section> {% schema %} { "name": "HTML Text", "class": "pxs-rich-text-section", "max_blocks": 2, "settings": [ { "id": "width", "type": "select", "label": "Section width", "options": [ { "value": "regular", "label": "Regular" }, { "value": "wide", "label": "Wide" }, { "value": "full-width", "label": "Full width" } ], "default": "regular" } ], "blocks": [ { "type": "text", "name": "Text", "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Rich text" }, { "type": "html", "id": "section_html", "label": "Texts", "default": "<p>Use this section to welcome customers to your store, say a bit about your brand, or share news and seasonal promotions.</p>" }, { "id": "heading_size", "type": "select", "label": "Heading size", "options": [ { "value": "small", "label": "Small" }, { "value": "medium", "label": "Medium" }, { "value": "large", "label": "Large" } ], "default": "large" }, { "id": "text_alignment", "type": "select", "label": "Text alignment", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" } ], "default": "left" } ] }, { "type": "page", "name": "Page", "settings": [ { "type": "checkbox", "id": "show_heading", "label": "Show heading" }, { "id": "heading_size", "type": "select", "label": "Heading size", "options": [ { "value": "small", "label": "Small" }, { "value": "medium", "label": "Medium" }, { "value": "large", "label": "Large" } ], "default": "large" }, { "type": "page", "id": "page", "label": "Page" } ] } ], "presets": [ { "name": "Rich text", "category": "Text", "blocks": [ { "type": "text" } ] } ] } {% endschema %}
This is what I'm seeing to edit it. The title shows but not the HTML:
Thank you so much for the quick reply! I made the change you suggested and now the content is displaying...wahoo!
Unfortunately, the html markup isn't actually functioning. For instance the following entry yields this output:
Whoops, I think you should remove that escape filter from the output:
{{ block.settings.section_html | escape }} to: {{ block.settings.section_html }}
Ninthony, and NyC Seth — thanks to the two of you for getting this solved. I am using online store 2.0 with Clean Canvas's Symmetry theme, and so far it's working. Woohoo.
I thought I would note that online 89 you still leave the name of the section "Rich text". I changed that to HTML text just for my brain, and to see that Shopify would alphabetize it correctly, and it did. Sweetness. I'll let you know if I run into issues.
OH - p.s. is all of the script section at the top required? I ask because if you create a new section, it starts with the schema calls. Thanks!
This is useful for custom HTML and embeds.
You create a file raw.liquid in "Sections" / "Abschnitte" (in german)
<script
type="application/json"
data-section-id="{{ section.id }}"
data-section-type="html-area"
></script>
<section
class="
pxs-rich-text
pxs-rich-text-width-{{ section.settings.width }}
"
>
{% for block in section.blocks %}
<article
class="
pxs-rich-text-block
pxs-rich-text-heading-{{ block.settings.heading_size }}
{%- if block.settings.text_alignment != blank -%}
pxs-rich-text-alignment-{{ block.settings.text_alignment }}
{%- endif -%}
"
{{ block.shopify_attributes }}
>
{% if block.type == 'text' %}
{% if block.settings.section_html != blank %}
<div class="pxs-rich-text-content rte">
{{ block.settings.section_html }}
</div>
{% endif %}
{% endif %}
{% if block.type == 'page' and block.settings.page %}
{% if block.settings.show_heading %}
<h2 class="pxs-rich-text-heading">
{{ pages[block.settings.page].title | escape }}
</h2>
{% endif %}
<div class="pxs-rich-text-content rte">
{{ pages[block.settings.page].content }}
</div>
{% endif %}
</article>
{% endfor %}
</section>
{% schema %}
{
"name": "RAW Element",
"class": "pxs-rich-text-section",
"max_blocks": 2,
"settings": [
{
"id": "width",
"type": "select",
"label": "Section width",
"options": [
{
"value": "regular",
"label": "Regular"
},
{
"value": "wide",
"label": "Wide"
},
{
"value": "full-width",
"label": "Full width"
}
],
"default": "regular"
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "RAW Element"
},
{
"type": "html",
"id": "section_html",
"label": "Texts",
"default": "<p>Here goes your JS code, or embeds</p>"
},
{
"id": "heading_size",
"type": "select",
"label": "Heading size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
},
{
"id": "text_alignment",
"type": "select",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
}
]
},
{
"type": "page",
"name": "Page",
"settings": [
{
"type": "checkbox",
"id": "show_heading",
"label": "Show heading"
},
{
"id": "heading_size",
"type": "select",
"label": "Heading size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
},
{
"type": "page",
"id": "page",
"label": "Page"
}
]
}
],
"presets": [
{
"name": "RAW Element",
"category": "Text",
"blocks": [
{
"type": "text"
}
]
}
]
}
{% endschema %}
Hi @Ninthony, I'm trying to get this to work for the 'section heading'. Specifically, so i can add HTML in that box to create an anchor for that section eg:
<section id="section1">Section 1</section>
Is it possible to turn a header text box into an html box? I tried the above and it worked for the richtext block, but not for the header blocks.
Thanks!
Thanks for updating!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024