Uploading SVG to 'Text Columns with images' section {Help}

Store Design
1

Greetings!

I am trying to use SVG icons for three image blocks in a ‘Text Columns with images’ section called feature-columns.liquid, instead of PNG which is what I am using now. I was able to do this for my Header logo by uploading SVGs to the assets folder and then replacing the ‘placeholder-tag’ with the file name.

Does anyone know where to do this in this feature-columns.liquid section? It looks like there is only one place to use a place-holder?

Thank you!

Screen Shot 2021-04-23 at 8.40.27 AM.png
Screen Shot 2021-04-23 at 8.40.27 AM.png3624×2264 1000 KB

1 Like
2

Hey there @Mark_S155 ,

Can you please include the URL of your store? I’ll take a look for you before I can offer any solution/guidance. Thanks

3

@Mark_S155

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Greetings @KetanKumar and @UmairA ,

My store url is www.theartofdexterity.com.

Thank you

5

@Mark_S155

sorry your store is password protect

6

@KetanKumar

Apologies! Preview is: amatric638!#

7

Hi, can someone please provide a solution to this problem? I can see that on the OP’s website he managed to figure out how to use the SVGs instead of PNGs in the “text columns with images” block. I am also looking for help with this currently, can anyone provide some guidance/information, please?

My website url: https://everest-sheds.myshopify.com/
Frontend password: peopleplanetprofit

1 Like
8

@Verve-design

can you please this section code so i will check and let you know

9

Thanks for your reply. This is the block’s code if that’s what you meant:
I have also posted a separate question here with a little bit more information: https://community.shopify.com/c/shopify-design/injecting-svgs-into-quot-text-columns-with-images-quot-block/td-p/1684448


{% schema %}
{
  "name": "Text columns with images",
  "max_blocks": 6,
  "settings": [
    {
      "type": "select",
      "id": "style",
      "label": "Style",
      "options": [
        {
          "value": "default-style",
          "label": "Default"
        },
        {
          "value": "accent-style",
          "label": "Accent"
        },
        {
          "value": "contrast-style",
          "label": "Contrast"
        }
      ],
      "default": "default-style"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Text columns with images"
    },
    {
      "type": "range",
      "id": "max_image_width",
      "min": 25,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Image width",
      "default": 100
    }
  ],
  "blocks": [
    {
      "type": "text_column",
      "name": "Column",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Feature title"
        },
        {
          "type": "richtext",
          "id": "caption",
          "label": "Text",
          "default": "

Display up to six features with an option to toggle images on or off, and add unique calls to action.

"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Link URL"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Text",
      "name": "Text columns with images",
      "blocks": [
        {
          "type": "text_column"
        },
        {
          "type": "text_column"
        },
        {
          "type": "text_column"
        }
      ]
    }
  ],
  "templates": [
    "index",
    "product",
    "page"
  ]
}

{% endschema %}
1 Like
10

@Verve-design

thanks for this also can you please send rimg this file code also