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

[SheanM]

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!

[suyash1]

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

[SheanM]

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]

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

[SheanM]

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]

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

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

[SheanM]

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]

@SheanM - i sent you the request

[SheanM]

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

[suyash1 · 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]

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]

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,