Re: How to add custom images on the right side of a product page?

Solved

How to add custom images on the right side of a product page?

SheanM
New Member
7 0 0

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.

unnamed.png

 

Let me know if you need more information from me. Thank you!

Accepted Solution (1)
suyash1
Shopify Partner
9883 1228 1568

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.

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me

View solution in original post

Replies 12 (12)

suyash1
Shopify Partner
9883 1228 1568

@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.

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
SheanM
New Member
7 0 0

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?

suyash1
Shopify Partner
9883 1228 1568

@SheanM - sure, do you have product template section code file and your website link? can you please share both?

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
SheanM
New Member
7 0 0

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.

SheanM
New Member
7 0 0

@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.

suyash1
Shopify Partner
9883 1228 1568

@SheanM - hi, yes its it possible to add as collaborator? that would be easy to make the changes

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
SheanM
New Member
7 0 0

You can add this store URL and request to be a collaborator for this Shopify account

https://www.mxt2510.com/

 

I thought I'd add you, but I learned it has to be the other way. Thanks again.

suyash1
Shopify Partner
9883 1228 1568

@SheanM - i sent you the request

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
SheanM
New Member
7 0 0

Just accepted your request. Let me know if you need anything.

suyash1
Shopify Partner
9883 1228 1568

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.

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
SheanM
New Member
7 0 0

At the last minute, the client decided on a new theme. But I appreciate your time to work with me on this.

Thank you!

abihorton
New Member
4 0 0

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,