Narrative theme product page image display

leekinwang
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.
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.
◦ Tutorials: Minimal theme product pages slideshow | Debut Theme product pages slideshow
◦ Looking to hire a reliable Shopify developer? Same day response: ezfycode@gmail.com.
KetanKumar
Shopify Partner
16931 1850 6334

@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
ChanFuts69
New Member
7 0 0

Hi can you help me please. My "Get Started" image in the gallery shows different size to different desktops.

Website: ecommerce-consulting-group.myshopify.com

Password: bleale

0 Likes

@ChanFuts69 

For the sake of organization please start a new question.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Tutorials: Minimal theme product pages slideshow | Debut Theme product pages slideshow
◦ Looking to hire a reliable Shopify developer? Same day response: ezfycode@gmail.com.
0 Likes