Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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...
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 😉
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
caringcandies.myshopify.com
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:
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
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
I searched in the product.liquid file for "product-gallery" and this is what it returns
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>
that looks to be the right one!
so before that closing div , add some text and it should show up below the product image
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...
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
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>
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!
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 😉
I should have never doubted you! Great work!
Ah thanks! You've been an outstanding partner 😉 I struggle with finding which file to edit
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
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?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024