Re: Text below Main Image on Products Page using EMPIRE theme

Solved

Text below Main Image on Products Page using EMPIRE theme

Denise_Glezer-J
Shopify Partner
30 2 3

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?

TEXT HERE.png

Accepted Solutions (2)
Denise_Glezer-J
Shopify Partner
30 2 3

This is an accepted solution.

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

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

 

View solution in original post

Denise_Glezer-J
Shopify Partner
30 2 3

This is an 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 😉

TEXT HERE5.png

View solution in original post

Replies 24 (24)

codewithpaul
Shopify Partner
123 13 22

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

 

 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Denise_Glezer-J
Shopify Partner
30 2 3

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

codewithpaul
Shopify Partner
123 13 22

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Denise_Glezer-J
Shopify Partner
30 2 3

caringcandies.myshopify.com

codewithpaul
Shopify Partner
123 13 22

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:

codewithpaul_0-1657110482240.png

 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Denise_Glezer-J
Shopify Partner
30 2 3

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
Shopify Partner
123 13 22

ohhhhhhh, my bad!

 

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Denise_Glezer-J
Shopify Partner
30 2 3

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
Shopify Partner
123 13 22

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Denise_Glezer-J
Shopify Partner
30 2 3

I do, yes

codewithpaul
Shopify Partner
123 13 22

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

codewithpaul_0-1657111400986.png

 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Denise_Glezer-J
Shopify Partner
30 2 3

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

TEXT HERE4.png

Denise_Glezer-J
Shopify Partner
30 2 3

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
Shopify Partner
123 13 22

that looks to be the right one!

 

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Denise_Glezer-J
Shopify Partner
30 2 3

This is an 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
Shopify Partner
30 2 3

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

 

multiple tags.png

Denise_Glezer-J
Shopify Partner
30 2 3

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
Shopify Partner
30 2 3

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
Shopify Partner
123 13 22

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! 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Denise_Glezer-J
Shopify Partner
30 2 3

This is an 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 😉

TEXT HERE5.png

codewithpaul
Shopify Partner
123 13 22

I should have never doubted you! Great work! 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Denise_Glezer-J
Shopify Partner
30 2 3

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

codewithpaul
Shopify Partner
123 13 22

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
CGS-PDigital
Shopify Partner
4 0 0

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?