Shopify themes, liquid, logos, and UX
Hi all,
My goal is to add my own images to the right side of the product page. I'm trying to achieve having a set of icons on the right side like the Transparency section of this website (not model pictures):
https://attirethestudio.com/collections/pullover/products/high-neck-sweater-black
I'm using a paid theme (Context theme), but I believe this could be achieved using liquid. I just don't know how to get to this point. I'm trying to get the icons to go under the bullet points (image shown) if possible.
Let me know if you need more information from me. Thank you!
Solved! Go to the solution
This is an accepted solution.
@SheanM - please check your product page, on it I added temporary images. Please email me the images which you need to add , I will add them.
@SheanM - it can be done by editing product template of your theme, this will make sure that the section will appear on all the products of your theme. If you can add me as collaborator then I can do it.
Hi @suyash1 , I appreciate your help. The thing is, I'm doing this for a client and we're using separate accounts. I'm using my own account just to sign up for this.
Will you be able to guide me with screenshots or liquid codes?
@SheanM - sure, do you have product template section code file and your website link? can you please share both?
The website is https://www.mxt2510.com/
The product.liquid code from the section folder:
<div
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
{%- if template == 'product' -%}
data-trigger-recent="true"
{%- endif -%}
{%- if settings.enable_ajax -%}
data-enable-ajax="true"
{%- endif -%}
>
<section class="bb b--default pb4">
<div class="product">
<div class="product__image-container">
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
{%- assign first_model = product.media | where: "media_type", "model" | first -%}
<div
id="product-{{ section.id }}"
class="product__primary-image-wrapper"
data-product-initial-image="{{ featured_media.id }}"
data-first-model-id="{{ first_model.id }}"
>
<a href="#" data-product-zoom class="product__zoom-arrow hide">
{% render 'icon-plus' %}
</a>
{% for media in product.media %}
{% capture class %}
{%- unless featured_media == media -%}
hide
{%- endunless -%}
{% endcapture %}
<div class="{{ class }} product__media"
data-product-image-wrapper
data-image-id="{{ media.id }}"
data-type="{{ media.media_type }}"
>
{% if media.media_type == 'image' %}
<a class="chocolat-image" href="{{ media | img_url: 'master' }}">
{% render 'responsive-image' with
image: media,
max_width: 900,
max_height: 900
%}
</a>
{% else %}
{% render 'interactive-media' with
media: media,
loop_video: section.settings.enable_video_looping
%}
{% endif %}
</div>
{% endfor %}
{% if first_model != blank %}
<button
class="bttn bttn--full bttn--tertiary product__in-space-bttn"
data-shopify-xr
data-shopify-model3d-id="{{ first_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
<span>
{% render 'icon-3d' %}
<span class="">{{ 'products.product.view_in_space' | t }}</span>
</span>
</button>
{% endif %}
</div>
{% render 'product-thumbnails' %}
</div>
<div class="product__details-container">
{% render 'product-details',
product: product,
show_vendor: section.settings.show_vendor,
show_swatches: section.settings.show_swatches,
is_placeholder: section_onboarding,
enable_payment_button: section.settings.enable_payment_button,
show_share_buttons: section.settings.show_share_buttons,
show_quantity_input: section.settings.show_quantity_input,
current_variant: current_variant
%}
</div>
{% render 'product-reviews' %}
</div>
</section>
</div>
<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>
<script src='//cdn.shopify.com/shopifycloud/shopify-xr-js/assets/v1.0/shopify-xr.en.js' defer='defer'></script>
<style>
.chocolat-wrapper .chocolat-right {
background-color: var(--color-text);
-webkit-mask: url({{ "arrow-right.svg" | asset_url }}) 50% 50% no-repeat;
mask: url({{ "arrow-right.svg" | asset_url }}) 50% 50% no-repeat;
}
.chocolat-wrapper .chocolat-left {
background-color: var(--color-text);
-webkit-mask: url({{ "arrow-left.svg" | asset_url }}) 50% 50% no-repeat;
mask: url({{ "arrow-left.svg" | asset_url }}) 50% 50% no-repeat;
}
.chocolat-wrapper .chocolat-close {
background-color: var(--color-text);
-webkit-mask: url({{ "close.svg" | asset_url }}) 50% 50% no-repeat;
mask: url({{ "close.svg" | asset_url }}) 50% 50% no-repeat;
}
</style>
{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "show_swatches",
"label": "Show swatches",
"default": false
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_quantity_input",
"label": "Show quantity input",
"info": "If quantity inputs are hidden, quantities will default to 1.",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"id": "enable_video_looping",
"type": "checkbox",
"label": "Enable video looping",
"default": true
}
]
}
{% endschema %}
Let me know what else I can share.
@suyash1 any updates on it? I can switch back to my client's account and add you as a collaborator if that makes things easier.
@SheanM - hi, yes its it possible to add as collaborator? that would be easy to make the changes
You can add this store URL and request to be a collaborator for this Shopify account
I thought I'd add you, but I learned it has to be the other way. Thanks again.
@SheanM - i sent you the request
Just accepted your request. Let me know if you need anything.
This is an accepted solution.
@SheanM - please check your product page, on it I added temporary images. Please email me the images which you need to add , I will add them.
At the last minute, the client decided on a new theme. But I appreciate your time to work with me on this.
Thank you!
Hi,
I am trying to do this on Prestige. Would you mind sharing how to do this?
https://beausandbabes.com/collections/tops/products/daddys-girl-t-shirt
Thanks,
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