Text below Main Image on Products Page using EMPIRE theme

[Denise_Glezer-J]

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?

[Denise_Glezer-J · Accepted solution]

OMG!!!!! IT WORKED - I AM SOOOOOO GRATEFUL!!!

Can I be cheeky and ask you to help me with another challenge...

[codewithpaul]

i say you will need to edit the code mate if you can't make the change in theme settings.

[Denise_Glezer-J]

Hi Paul, yes, I realise that I need to edit the code, but I do not know how to "get into" that area

[codewithpaul]

send on the url of the store and i can see how tricky it is

[Denise_Glezer-J]

caringcandies.myshopify.com

[codewithpaul]

Ok so to do this through CSS what I would do is this

```

.product--outer { flex-direction: column; } 

```

This will have an issue though where the text content is not full width, so you need to do:

```

.product-main { width: 100; }

```

This will give the below:

[Denise_Glezer-J]

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

[codewithpaul]

ohhhhhhh, my bad!

That would be a trickier job, does the text need to change based on the product?

[Denise_Glezer-J]

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

[codewithpaul]

Ah ok might not be too bad! Have you any experience changing code in Shopify liquid?

[Denise_Glezer-J]

I do, yes

[codewithpaul]

Ok so you need to find the whatever liquid file is linked to the product, could be called main-product.liquid.

Find the `div` that has the class `product-gallery`. Go to the ending tag for that div (/div) and just before it insert whatever text you want.

Should show up like below

[Denise_Glezer-J]

I searched in the product.liquid file for "product-gallery" and this is what it returns

[Denise_Glezer-J]

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 %}

<div
class="
product-gallery
{% if gallery_hover_zoom != 'disabled' %}hover-zoom-enabled{% endif %}
{% if gallery_click_to_zoom != 'disabled' and gallery_click_to_zoom != 'mobile' %}click-to-zoom-enabled{% endif %}
"
data-product-gallery
{% if image_crop %}data-product-gallery-image-crop{% endif %}
data-product-gallery-aspect-ratio="{{ aspect_ratio }}"
data-product-gallery-thumbnails="{{ thumbnail_position }}"
>
{% 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 %}
<script>
window.ShopifyXR=window.ShopifyXR||function(){(ShopifyXR.q=ShopifyXR.q||[]).push(arguments)}
{% assign models = product.media | where: 'media_type', 'model' | json %}
ShopifyXR('addModels', {{ models }});
</script>
<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 }}
</button>
{% endif %}

{% if thumbnail_position != 'left' %}
{%
render 'product-gallery-navigation'
product: product,
selected_media: selected_media,
aspect_ratio: aspect_ratio,
image_crop: image_crop,
%}
{% endif %}
</div>

[codewithpaul]

that looks to be the right one!

so before that closing div , add some text and it should show up below the product image

[Denise_Glezer-J · Accepted solution]

OMG!!!!! IT WORKED - I AM SOOOOOO GRATEFUL!!!

Can I be cheeky and ask you to help me with another challenge...

[Denise_Glezer-J]

You are amazing!!!! OK here goes...
I managed to edit the products page so that it now displays my product tags on it.

<div style="text-align: left;"><span style="color: #ffff00;">{% for tag in product.tags %} <a class="link" <a class="link" href="/collections/all/{{ tag | handle }}" rel="tag" style="text-decoration: none; color: #ffff00;"> {{ tag }} {% unless forloop.last %} <span class="separator"><span style="color: #ec008c;">|</span> </span>{% endunless %} </a> {% endfor %}</span></div>

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

[Denise_Glezer-J]

This is the code I used to add the tags to the product page:

<div style="text-align: left;"><span style="color: #ffff00;">{% for tag in product.tags %} <a class="link" <a class="link" href="/collections/all/{{ tag | handle }}" rel="tag" style="text-decoration: none; color: #ffff00;"> {{ tag }} {% unless forloop.last %} <span class="separator"><span style="color: #ec008c;">|</span> </span>{% endunless %} </a> {% endfor %}</span></div>

[Denise_Glezer-J]

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 😉

[codewithpaul]

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! 

[Denise_Glezer-J · Accepted solution]

I got it working!!!

I problem is always not knowing which file to edit - it is the product-grid-item.liquid section that needed to be edited.

This is the code I used:

<div style="text-align: left;"><span style="color: #ffff00;">{% for tag in product.tags %} <a class="link" <a class="link" href="/collections/all/{{ tag | handle }}" rel="tag" style="text-decoration: none; color: #ffff00;"> {{ tag }} {% unless forloop.last %} <span class="separator"><span style="color: #ec008c;">|</span> </span>{% endunless %} </a> {% endfor %}</span></div>

p.s. I am aware of the typo in one of the tags and will fix that 😉

[codewithpaul]

I should have never doubted you! Great work! 

[Denise_Glezer-J]

Ah thanks! You've been an outstanding partner 😉 I struggle with finding which file to edit

[codewithpaul]

To be honest i struggle with that too! Each theme is different so sometimes you just gotta take your best guess based on the file name

[CGS-PDigital]

Hello Paul. This post is very helpful.

I have a more complicated question: I would like to put a video gallery section below the image gallery. The videos would vary based on the product, as it would feature videos pertaining to that particular product. I'm guessing this would be a bit more complicated?