an unsatisfying produst preview- how can i change some stuff?

Highlighted
New Member
16 0 0

http://www.yamajewelry.com/collections/geo_metal/products/geo_metal-2

Password- Maya

 

a. built one frame for al pictures, letting customers click to see the next image

- instead of scolling down to see the photos.

b. when the mouse is over photo >> I want it to zoom in, and cancel the option of opening a full sized window to see the image

c.  pick the size & material from a scoller and not the way it appears now as an opened list. the words size, material- arn't bolded or differnt from the options themselves and it's pretty confusing.

0 Likes
Highlighted
Shopify Expert
195 0 25

Hi Maya,

You need to alter the theme code on the product page. If you are comfortable with html you can do this yourself. If not you could look into hiring a developer.

A cheaper option would to just use another theme. Many of the themes offered do exactly what you want. 

The basics of displaying the images would be like this

<!-- Begin featured image -->
      <div class="image featured">
        {% if settings.enable_product_image_zoom %}
        <a href="{{ product.featured_image | product_img_url: 'original' }}" class="cloud-zoom" rel="position: 'inside', showTitle: 'false'" id="placeholder">
          <img src="{{ product.featured_image | product_img_url: 'original' }}" alt="{{ product.featured_image.alt | escape }}" />
        </a>
        {% else %}
        <a href="{{ product.featured_image | product_img_url: 'original' }}" class="zoom" id="placeholder">
          <img src="{{ product.featured_image | product_img_url: 'original' }}" alt="{{ product.featured_image.alt | escape }}" />
        </a>
        {% endif %}
      </div>
      <!-- End product image -->
      
      {% if product.images.size > 1%}
      <!-- Begin thumbnails -->
      <div class="thumbs clearfix" style="margin-left:-15px;">
        {% for image in product.images %}
        {% if settings.enable_product_image_zoom %}
        <div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
          <a href="{{ image | product_img_url: 'original' }}" class="cloud-zoom-gallery" rel="useZoom: 'placeholder', smallImage: '{{ image | product_img_url: 'original' }}', tint: '#ffffff'">
            <img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}" />
          </a>
        </div>
        {% else %}
        <div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
          <a href="{{ image | product_img_url: 'original' }}" data-original-image="{{ image | product_img_url: 'original' }}">
            <img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}" />
          </a>
        </div>
        {% endif %}
        {% endfor %}
      </div>
      <!-- End thumbnails -->

The basics of the options would be like this 

      <form id="add-item-form" action="/cart/add" method="post" class="variants clearfix">
        
        <!-- Begin product options -->
        <div class="product-options">

          <div class="select clearfix"{% if hide_default_title %} style="display:none"{% endif %}>
            <select id="product-select" name="id">
              {% for variant in product.variants %}
              <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
              {% endfor %}
            </select>
          </div>

          {% if settings.display_quantity_dropdown %}
          <div class="selector-wrapper">
            <label>Quantity</label>
            <input id="quantity" type="number" name="quantity" value="1" class="tc item-quantity" />
          </div>
          {% endif %}

          <div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
            <div class="purchase">
              {% unless product.available %}
              <p>Sold Out</p>
              {% else %}
              <input type="submit" id="add-to-cart" class="btn addtocart" name="add" value="Add to cart" />
              <div id="cart-animation" style="display:none">1</div>
              {% endunless %}
            </div>
          </div>

        </div>
        <!-- End product options -->

      </form>

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
New Member
16 0 0

Hey

Thanks

Actually i am really satisfied with the way the site looks

just this little thing is annoying.

 If I change the whole theme- the site wont look the same (example- ive tried the POP theme and it doesnt have the same home page with a really oversized photo.,

So ill find myself with an unsatifsfied homepage.. ..)

 

I dont know any HTML

But if youll guide me where exatly should I paste this script, i think i can be able to do it.

 

Maya

0 Likes
Highlighted
Shopify Expert
195 0 25

Hi Maya,

This might be pretty hard to do if you don't know any HTML as we could go back and forth a lot. No offense, HTML is pretty boaring :) It's just that the work is goign to be a bunch of little additionas. We need to replace the image output, replace the options output, style both of those, and implement an image zoom javascript library.

My recomendation would be for you to post a small job on the jobs board or hire a Shopify Expert (https://experts.shopify.com). Anyone who knows Shopify could do this pretty quickly. 

If you're interesed I could help you out on the side but by all means explore these other areas. (our email is support [at] 320ny.com) You might get a good rate on the jobs board for a one time task. 

Cheers,


Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
New Member
16 0 0

The Jobs in the epxerts board starts from 500$?

It's not in my budget.

Are there more options?

 

I Have sme friends who know html; pretty good. are there any instrustions? ill let them read your instructions maybe that'll work?

0 Likes
Highlighted
Shopify Expert
195 0 25

Hi Maya,

Actually one option for you that is pretty easy would be to take just the product page code from another theme and use that on your site. You could look at some of the free themes and pick one that has the dropdowns and image viewing that you like. Then you would need to just replace the product page section with that of yours. The styling on your site will take over so hopefully it looks okay. You might just needs to add some javascript from that other theme to make the image zoom work.

Feel free to post here as you get into it. 

-Ryan

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes