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

Solved
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!

0 Likes
suyash1
Shopify Partner
3497 388 566

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

Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes
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?

0 Likes
suyash1
Shopify Partner
3497 388 566

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

Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes
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.

0 Likes
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.

0 Likes
suyash1
Shopify Partner
3497 388 566

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

Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes
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.

0 Likes
suyash1
Shopify Partner
3497 388 566

@SheanM - i sent you the request

Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes
SheanM
New Member
7 0 0

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

0 Likes