Image or Formatted Text in accordian (expandable content)

[colourfulthings]

Hi,

We are using a paid theme: Showcase, and trying to solve an issue regarding accordions.

We want to put sizing charts into an expandable content block on the product page, the standard way of doing this appears to be using a page reference in the product metafield.

This solution works fine for most standard items with standard measurements, however our product range is extremely wide and features many unique products with unique measurements.

Our ideal solution rather than have more pages than manageable. is to use an image or formatted text in the metafield. Both of these are not accepted in the standard expandable content, image not being taken at all, and format code just being printed as standard text.

Thanks!

[PaulNewton]

Hi @colourfulthings The best approach for proper display of a wide variety measurements may be JSON type of metafield definition to store the guide info as data that can be access with liquid syntax ; in tandem theme UI customizations to display that info in the proper contexts; instead of having to generate and attach endless images.

Cruder approaches,

If sets of products share the same measurements the simplest approach is to put the images into pages and give those set of products it's own template.

If the accordion accepts a page reference as a dynamic source then set that as the metafields for

the products page reference with the pages having the images in the page content itself.

Otherwise you do have to customize the theme to try and use images like this.

Also be aware there are metafield definition types specifically for measurements such as the dimension ,volume, etc. https://shopify.dev/apps/metafields/types 

If you need customization for any of these approaches you can contact me with info in my forum signature, please provide context.

[gr_trading]

Hi @colourfulthings ,

One of quick fix solution could be to save formatted text with image in custom metafield.

Print the value of custom metafield as hidden tag in theme, then use below script to show your formatted text as HTML on website.

var _list = document.querySelector('#M3993').innerText;
document.querySelector('#M3993').innerHTML = _list;

Here M3993 is custom id attribute applied on tag, which will read it's formatted data and edit itself converting its value to HTML.

Hope! this trick will help.