Solved

Metafields in custom liquid block

mattks
Excursionist
20 0 3

I have 2 metafields I am including in a custom liquid block: One is a file (image) and one is rich-text.

I have figured out how to include both to make them functional and visible, but I want to put them on the same line.

When I add this code, they always separate into 2 lines:

 

<div style="width:17.5px">{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>

<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>

Accepted Solutions (2)

YOD_Solutions
Shopify Partner
159 17 24

This is an accepted solution.

A simple solution is the add two divs inside another div block:

<div style="display:flex">

<div style="width:17.5px">{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>
<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>

</div>

You might need to add other styling to the parent div depending how the content appears.

 

Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store

View solution in original post

YOD_Solutions
Shopify Partner
159 17 24

This is an accepted solution.

It is a bit difficult to comment without seeing your html code. Please refer this regarding flex positioning: Aligning items in a flex container - CSS: Cascading Style Sheets | MDN (mozilla.org)

Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store

View solution in original post

Replies 3 (3)

YOD_Solutions
Shopify Partner
159 17 24

This is an accepted solution.

A simple solution is the add two divs inside another div block:

<div style="display:flex">

<div style="width:17.5px">{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>
<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>

</div>

You might need to add other styling to the parent div depending how the content appears.

 

Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store
mattks
Excursionist
20 0 3

That worked well!

If I wanted two lines of this code, how would I control the space between them?

 

I tried this, but a lot of space was added between the 2 lines:

<div style="display:flex;">
<div style="width:18px;">
{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>

<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>
</div>

<div style="display:flex;">
<div style="width:18px;">
{{ product.metafields.custom.product_specs_icon_field | metafield_tag }}</div>

<div style="font-size:14px;">{{ product.metafields.custom.product_specs_field_ | metafield_tag }}</div>
</div>

 

YOD_Solutions
Shopify Partner
159 17 24

This is an accepted solution.

It is a bit difficult to comment without seeing your html code. Please refer this regarding flex positioning: Aligning items in a flex container - CSS: Cascading Style Sheets | MDN (mozilla.org)

Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store