How can I add custom liquid code for images on different product pages?

Store Design
1

I would like to add a custom liquid code for different product pages that acts like image with text section.

1 Like
2

@melgendy
For that, You have to hire a Developer.
to customize according to your Needs.

Thank you.

3

Hi @melgendy ,

It’s customization work, for that you need to hire a developer or need a developer help,
to add this feature with custom code.

You can contact (https://www.halothemes.com/contact) for support.

If you find this answer helpful, please mark it as a SOLUTION.

Best regards.

4

Hello,

I know this is an old account but I figured this out. No need for developer needed, but it will take some tinkering.

I am using the Studio theme but as I understand it, most things will be similar between Shopify 2.0 themes.

  1. Go into the code editor.

  2. Find and open image-with-text.liquid.

  3. Select all and copy.

  4. Click + Add a new snippet.

  5. Give it a name. I named mine explore-series.liquid (I using this as a “explore more of this series” section)

  6. Paste everything from image-with-text.liquid into your new blank snippet.

  7. Note: I am replacing the “Text” block. In theory you could probably replace any other block within the section, but keep that in mind with the directions.

  8. Replace this (line 45 for me):

{%- when 'text' -%}	
{{ block.settings.text }}

With this:

{%- when 'text' -%}
{{ block.settings.custom_liquid }}
  1. Scroll down (line 63 for me) and replace this:
{% schema %}	
{	
  "name": "t:sections.image-with-text.name",	
  "class": "section",	
  "settings": [	
    {

With this (You can replace Explore series with whatever you would like the section to be labeled as in the theme customizer):

{% schema %}
{
  "name": "Explore series",
  "class": "section",
  "settings": [
    {
  1. Scroll down (line 344 for me) and replace this:
{	
      "type": "text",	
      "name": "t:sections.image-with-text.blocks.text.name",	
      "limit": 1,	
      "settings": [	
        {	
          "type": "richtext",	
          "id": "text",	
          "default": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

",	
          "label": "t:sections.image-with-text.blocks.text.settings.text.label"	
        },

With this:

{
      "type": "text",
      "name": "t:sections.custom-liquid.name",
      "limit": 1,
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "t:sections.custom-liquid.settings.custom_liquid.label",
          "info": "t:sections.custom-liquid.settings.custom_liquid.info"
        },

You should now be able to put custom liquid in what is normally the “Text” box. You can leave the text box that normally shows up there blank. I have been using this code starting today and it seems to work fine; there are probably cleaner ways to do it though.

1 Like