Okay, I am at my wits end! We’re in the process of redesigning our Shopify store, and one of the things we’re trying to do is use metafields to auto-populate images. I’ve figured out creating the fields, applying the images and even using the custom liquid to get the images to display on the page. But they’re stacked on top of each other and I cannot figure out how to make them side by side! I’ve watched a half dozen videos and read so many Shopify community threads, even articles from third parties, but to no avail! We don’t have the theme live yet, so I can’t access those big long liquid sheets like we’ve got in the current theme. Please send help!
@ApexAlchemy - can you please share this page link?
Hello @ApexAlchemy ,
It’s GemPages support team and glad to support you today.
Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?
Best regards,
GemPages Support Team
Hi there!
Like I said, we haven’t published yet, but here is the preview link: https://vmv5t6g7larfepn9-5116723313.shopifypreview.com
Thanks!
@ApexAlchemy - add this css to the very end of your theme.css file and check
.product-info__liquid{float: left; width: 50%;}
.product-info__accordion{clear: both;}
Hello @ApexAlchemy ,
I would like to give you a recommendation to support you so kindly follow the steps below:
- Go to Online Store > Theme > Edit code of your current theme
-
Open your theme.liquid theme file
-
Paste the below code before
For example,
Best regards,
GemPages Support Team
@Anonymous Thank you so much, that worked!
Hello @ApexAlchemy ,
I am glad that my solution is helpful to you.
Best regards,
GemPages Support Team
I have the same problem (using turbo seoul theme) but this solution did not make any difference in our case. Are there any other ways to do this?
This didnt work for me either 
did you find a solution?
This didnt work for me either did you find a solution?
I got it to work but it is a slightly complex solution. Firstly, I use an app called “Mechanic” on our site and it is able to perform various routines and tasks. One of those tasks is to copy a product’s Metafields to its tags.
This means that I can populate a metafield with data about a product’s dietary credentials (Vegan, vegetarian etc.) and this then automatically tags the product with those dietary credentials via Mechanic.
I then use custom liquid code on the product page template to add icons, depending on the dietary credentials indicated by the product’s tags.
I have pasted the Liquid code I am using and hopefully you will be able to adapt it to your needs. (Please note, I am not a skilled programmer so I can’t give you detailed help with adapting the code for your site). This liquid code adds up to 4 icons to the relevant products and shows those icons as a horizontal array. Each icon has a height and width of 100px. The text following the words “Image src” is the URL of the icons I uploaded to my site’s “Files” section:
{% assign array_of_image_objects = product-icon %}
<p style=" display: flex; align-items: center; gap: 5px" {% for tag in product.tags %} {% if tag == 'Filter by Organic' %}{% elsif tag == ‘Filter by Vegetarian’ %}
{% elsif tag == ‘Filter by Gluten Free’ %}
<img src=“https://cdn.shopify.com/s/files/1/0717/6503/3245/files/Gluten_Free_text.png?v=1689067472” width = “100” height = “100” alt=“Gluten Free”>
{% endif %}
{% endfor %}