PLEASE HELP!! Narrative theme - product page

Highlighted
New Member
1 0 1

Hi! I'm currently trying out the Narrative theme which is really awesome, but the only problem I have with it is the product page ): I've combed the entire forum and it seems like a lot of people face similar problems as me but there's still no solution as of yet. I really hope someone can help me with this because it's making me consider switching platforms if I can't find any solution for it.

Basically, for the product page, the Narrative theme shows the first image as one big image at the top, followed by the product description below the image, and then the subimages are all below, in a grid form (flexbox). Here's a link to show you what the product page for Narrative theme looks like:

https://themes.shopify.com/themes/narrative/styles/warm/preview

So anyway, this format wont work well for my images so I removed the CSS pertaining to the subimages, and now those images dont show up. (which is what I want) You can still see the images if you click on the featured image on each product page, and then there will be a slideshow of the different product images. (Password is needhelp).

https://shokuco.myshopify.com/products/copy-of-copy-of-jupiter-14-3cm-tea-plate

My question is, can I get the product images to show as a slideshow instead of having to click on the main image before the slideshow appears? Otherwise viewers may not know that there's more than one product image. Here's the CSS code for the product slideshow in the product-template.liquid:

  {% endcomment %}
  {% unless product.images.size == 0 %}
    <div class="product-slideshow{% if product.images.size == 1 %} product-slideshow--single{% endif %} critical-hide" aria-hidden="false">
      <button class="product-slideshow__close btn btn--clear btn--square" tabindex="-1" data-product-slideshow-close>{% include 'icon-close' %}</button>

      <div class="product-slideshow__content">
        <div class="product-slideshow__slide-list slider">
          {% for image in product.images %}
            <div class="product-slideshow__slide slider__slide{% if forloop.first %} slider__slide--active {% endif %}" data-id="{{ image.id }}" data-product-slideshow-slide>
              <div class="product-slideshow__slide-image-wrapper">
                {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                <img class="product-slideshow__slide-image lazyload fade-in"
                    data-src="{{ img_url }}"
                    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                    data-aspectratio="{{ image.aspect_ratio }}"
                    data-sizes="auto"
                    data-parent-fit="contain"
                    alt="{{ image.alt | escape }}">
                {% include 'spinner' %}
              </div>
            </div>
          {% endfor %}
        </div>

        {% unless product.images.size == 1 %}
          <div class="product-slideshow__controls">
            <button class="product-slideshow__previous btn btn--secondary btn--square" tabindex="-1" data-product-slideshow-previous>
              {% include 'icon-arrow-left' %}
              <span class="visually-hidden">{{ 'general.pagination.previous' | t }}</span>
            </button>

            <div class="product-slideshow__slide-select-list">
              {% for image in product.images %}
                <button class="product-slideshow__slide-select {% if forloop.first %} product-slideshow__slide-select--active{% endif %}" tabindex="-1" data-product-slideshow-select="{{ forloop.index0 }}">
                  <span class="visually-hidden">{{ 'sections.product_template.slide' | t: number: forloop.index}}</span>
                </button>
              {% endfor %}
            </div>

            <button class="product-slideshow__next btn btn--secondary btn--square" tabindex="-1" data-product-slideshow-next>
              {% include 'icon-arrow-right' %}
              <span class="visually-hidden">{{ 'general.pagination.next' | t }}</span>
            </button>
          </div>
        {% endunless %}
      </div>
    </div>
  {% endunless %}

  {% comment %}

Will really appreciate any comments and help, thanks alot in advance!!!

1 Like
Highlighted
Shopify Staff
Shopify Staff
575 18 74

Hi, Shoku!

This is Max from the Shopify Team. 

If you're still looking for support with this change, I might suggest a few alternatives. Since Narrative is a theme built by Shopify, we could ask our Themes team to make some changes to your code via email. Please send the details to support@shopify.com from the account owner's address so we can veify your request and theme details.

  • More about our design policy and theme support options is available here.

If you were unable to get the exact change you were after, or you're under a pressing time constraint, it might be a good idea to reach to an Expert for customizations and integrations.

If you did want to play around a bit on your own, it might be worth looking at some of the code for one of the other free themes that you like. See if there's a format in the product code section (Online Store > Themes > Actions > click Edit code > click Sections > select product-template.liquid) that might be transferrable. If you do decide to go ahead with that, I'd suggest following steps to duplicate your theme and then save it as a new name. This will give you a bit of a playground to break and preview changes.

I hope at least some of that helps point you in the right direction for next steps. Please feel free to share the changes you decide to make here so the community can see what you've ended up with! All the best on your launch (check out this doc for some great tips as well - Preparing your Shopify store for launch)! 

Cheers, 
Max
support@shopify.com

Max | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
1427 193 477

So you're saying that you want the images that come up as a slideshow when you click your main image to just swap out with the main image instead of having to click on it correct?

That's something that can be done, but it wouldn't be an easy fix. I take it you don't know very much in the way of HTML or CSS, since what you're saying is CSS is actually HTML. You will probably need an Expert's help, but I will actually try to accomplish this in my developer store  over the weekend just to see if I can do it and I will get back to you if I have any luck.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Excursionist
15 0 4

Hi Ninthony, 

Did you manage to find the solution for the product page photos?

 

Thanks in advance

Digital wellness with a human soul
1 Like
Highlighted
Shopify Partner
26 0 4

Hi, any updates on this?

0 Likes
Highlighted
Tourist
8 0 5

I'm trying to do the same thing. Narrative is so good apart from the product page which is SO bad. I followed this:

 

https://medium.com/p/55ca4df522d6/responses/show

 

but it didn't work. It may work for others.

 

Still searching for a solution. Anyone out there please shout. 

1 Like
Highlighted
Excursionist
20 1 5

Same problem here.  The product images are so massive they take up the whole screen.  It's not shopper friendly :(

1 Like
Highlighted
New Member
2 0 0

Any answers by now?, this is such a shame for a nearly perfect theme and ruins it in some way :/

0 Likes
Highlighted
Excursionist
20 1 5

I know, I agree!  I ended up hiring @Jasoliya to fix my product pages.  They did a great job & it was very reasonable. 

 

You can see it here:

https://www.octocurl.com/products/octocurl-no-heat-curlers-satin

0 Likes
Highlighted
New Member
2 0 1

Hi Savanna,

 

Please can I ask how much this cost and how long it took? Your product page looks great and is exactly what I'm looking for

 

I can't believe there isn't a simple for it, it is a complete deal breaker of the theme and such a shame!

 

Thanks,

Lottie 

0 Likes