Hi there, I am using Empire theme. Is there a way to put text in the area below the main image on the product pages?
i say you will need to edit the code mate if you can’t make the change in theme settings.
Hi Paul, yes, I realise that I need to edit the code, but I do not know how to “get into” that area
send on the url of the store and i can see how tricky it is
OK wait. Newbie here #facepalm.
I don’t necessarily want to move the text that is on the right hand side under the product image, I want to add other text/image in that area
ohhhhhhh, my bad!
That would be a trickier job, does the text need to change based on the product?
No, it will most likely be something along the lines of FOLLOW US ON SOCIAL MEDIA or FREE DELIVERY FOR ORDERS OVER R1000 WITH SA or perhaps an image or two - won’t change per variant
Ah ok might not be too bad! Have you any experience changing code in Shopify liquid?
I do, yes
I also found a product-gallery.liquid file with this:
{% comment %}
@Anonymous product {Product}
The product object in question or false. Onboards if false or blank.
@Anonymous select_first_available_variant {Boolean}
Whether to auto-select first available variant
@Anonymous aspect_ratio {string}
This is the gallery aspect ratio, can be one of ‘natural’, ‘short’, ‘square’, ‘long’
@Anonymous thumbnail_position {string}
This is the gallery thumbnail position, can be one of ‘below’, or ‘left’
@Anonymous image_crop {boolean}
Whether to crop images
@Anonymous gallery_hover_zoom {String}
This is the hover zoom setting, which is either ‘disabled’, ‘separate’, or ‘replace’
@Anonymous gallery_click_to_zoom {String}
This is the click to zoom setting, which is either ‘disabled’, ‘mobile’, ‘desktop’, or ‘always’
{% endcomment %}
{% assign onboarding = false %}
{% if product == false or product == blank %}
{% assign onboarding = true %}
{% endif %}
{% assign selected_variant = product.selected_or_first_available_variant %}
{% if select_first_available_variant %}
{% assign selected_media = selected_variant.featured_media | default: product.featured_media %}
{% else %}
{% assign selected_media = product.featured_media %}
{% endif %}
{% if thumbnail_position == 'left' %}
{%
render 'product-gallery-navigation'
product: product,
selected_media: selected_media,
aspect_ratio: aspect_ratio,
image_crop: image_crop
%}
{% endif %}
{%
render ‘product-gallery-viewer’
product: product,
selected_media: selected_media,
aspect_ratio: aspect_ratio,
image_crop: image_crop,
gallery_hover_zoom: gallery_hover_zoom,
onboarding: onboarding,
gallery_click_to_zoom: gallery_click_to_zoom,
%}
{% assign first_model = product.media | where: “media_type”, “model” | first %}
{% if selected_media.media_type == ‘model’ %}
{% assign model = selected_media %}
{% else %}
{% assign model = first_model %}
{% endif %}
{% if model %}
<button
class=“product-gallery–viewinyourspace”
data-default-model-id=“{{ first_model.id }}”
data-shopify-xr
data-shopify-model3d-id=“{{ model.id }}”
data-shopify-title=“{{ product.title }}”
data-shopify-xr-hidden
{% render ‘icon-library’, id: ‘icon-3D’ %}
{{ ‘product.media.view_in_your_space’ | t }}
{% endif %}
{% if thumbnail_position != ‘left’ %}
{%
render ‘product-gallery-navigation’
product: product,
selected_media: selected_media,
aspect_ratio: aspect_ratio,
image_crop: image_crop,
%}
{% endif %}
that looks to be the right one!
so before that closing div , add some text and it should show up below the product image
OMG!!! IT WORKED - I AM SOOOOOO GRATEFUL!!!
Can I be cheeky and ask you to help me with another challenge…
You are amazing!!! OK here goes…
I managed to edit the products page so that it now displays my product tags on it.
{% for tag in product.tags %} <a class="link" {{ tag }} {% unless forloop.last %} | {% endunless %} {% endfor %}
Is it at all possible to display the product tags together with the product image on the collections
pages?
Ideally I would like my customers to be able to select MULTIPLE tags to filter on, but that does not work so the best way for me to show my customers the multiple benefits of each product, would be to display the tags (benefits) to them.
I am currently using an app to “label” the products on the collection page, however, the free version only allows me to label 20 products and I am only given 2 label options.
Please see the example of what I would like to achieve attached
This is the code I used to add the tags to the product page:
{% for tag in product.tags %} <a class="link" {{ tag }} {% unless forloop.last %} | {% endunless %} {% endfor %}
If I go quiet suddenly, it’s because we’ve gone into Loadshedding (no electricity) for the next few hours - I’m in South Africa 
loadshedding does not sound fun!
For the above, that is tricky! You will need to find the loop for the products and for each item in the loop do something {{ product.tags }} which will show them. You might be able to steal the code off the current product page and insert it into the list, but you still need to style them and make sure they look right on mobile/desktop etc.
But yeah you may need to hire a dev to do this, at least it would save you from paying monthly for an app!