Mobile product showcase

[Toypop]

Hello

I am trying to customize my product show case on mobile layout can someone please help me out, currently my showcase looks like this 

But i am seeking for this kinda look

Provide me with some line of code, every help will be appreciate, thanks!!!

[sahilsharma9515]

Hi @Toypop 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

[Toypop]

Toypop.lt

[sahilsharma9515]

Hi @Toypop Thanks for the URL, i think you are using the Refresh theme.

So first you need to enable the Thumbnail option for mobile and change media fit from original to fill.

Please follow the step if you don't know how you can do the same.

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the Customize button in live Theme.
4. Click on Home page and change it to product page.
5. Then click on product information and scroll down.
6. Now you need to select the Show Thumbnail option in Mobile Layout, here is the screenshot of the same.
7. 
8. Now you need to change media fit from original to Fill, below is the screen shot of the same.
9. 

It will solve your issue and you will get your desired design.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Toypop]

Hello, now it looks like this, I want to make that the first photo would fill out almost full screen like I've shown in the example,

thanks.

[sahilsharma9515]

Hi @Toypop Didn't you have changed the media from original to Fill for mobile device? If you have changed it to fill and still it is not working then add this code.

<style>
@media screen and (max-width: 680px) {
    .grid--peek.slider--mobile {
        width: 188vw !important;
    }
}
</style>

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above </body> tag

Result: 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Toypop]

Hello it worked but it messed up a site a little bit, it goes trough the border in our site and messes everything on product page

Do you know how to fix it ?

[Toypop]

Hello mate it messed up with the site as you can see in the picture above can you help me out? 😅