Narrative theme product page image display

Highlighted
New Member
1 0 1

Hi Guys!

My wip site yourpartyessentials.com is using narrative theme, which is good overall. However, there is a problem with the product page, which the product images is too big and user need to click to see a slideshow of of other images. 

My question is:

How can I edit it so that user can see slideshow when they enter the product page instead of having to click to see the slideshow? 

Also, how can I adjust the product image size at the top so that it looks smaller?

 

Thank you in advance

1 Like
Highlighted
Astronaut
1085 178 213

 1.
It would require Liquid/CSS/Javascript knowledge to implement this feature, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

In case you're unfamiliar with these technologies you'll likely need to hire a Shopify developer to assist you.

If it is of your wish I'm available for hire, feel free to shoot me an e-mail. 

2. For the product image sizing:
2.a. In your Shopify Admin go to online store > themes > actions > edit code
2.b. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.product__media-container {
width: 100%;
margin: 0 auto;
}

.product__media-container {
max-width: 800px !important;
}

@media (max-width: 767px){
.product__media-container {
max-width: 320px !important;
}

}

 
You can change the values as you need:

800px = image width for desktop/large devices
320px = image width for mobile/small devices

Let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Partner
7645 1050 2650

@leekinwang 

Welcome to the Shopify community!
and Thanks for your Good question. 

do you have like slider?

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes