How can I adjust my images to full width on my collection page?

Store Design
, , ,

Topic summary

A user seeks CSS code to make collection page images display at full width instead of the default 16:9 aspect ratio.

Solution Provided:

  • Another user shares custom CSS code to be added to the theme.liquid file after the <head> element
  • The code successfully adjusts image dimensions
  • When images appear too small initially, the helper updates the code with adjusted sizing

Resolution:

  • The original poster confirms the solution works successfully

Additional Question:

  • A third user requests video tutorial guidance on where to paste the code, lacking coding experience
  • They also report an unrelated issue with Sense and Publisher themes showing a schema/settings preview message after customization
  • This secondary question remains unanswered
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hello All,

In my collection page images, it says that they kept it at a 16:9 aspect ratio.

Does anyone know a code to make these images full width?

Screenshot 2023-12-05 at 7.20.55 PM.png
Screenshot 2023-12-05 at 7.20.55 PM.png1408×487 430 KB

Screenshot 2023-12-05 at 7.21.28 PM.png
Screenshot 2023-12-05 at 7.21.28 PM.png1378×472 408 KB

Screenshot 2023-12-05 at 7.21.48 PM.png
Screenshot 2023-12-05 at 7.21.48 PM.png1363×492 432 KB

Store Url: www.faithandyou.in

Theme: refresh

thanks

1 Like
2

Add this code to your theme.liquid file after element

Screenshot_7.jpg
Screenshot_7.jpg1448×845 118 KB

3

hello @Dan-From-Ryviu

can you pls tell me how to increase image size now

Screenshot 2023-12-05 at 7.45.34 PM.png
Screenshot 2023-12-05 at 7.45.34 PM.png1338×439 304 KB

it is very small tbh,

THANKS!

4

Code updated
5

THANKS
DOUBLE THANKS
TRIPLE THANKS
QUADRIPLE THANKS

YOU ARE THE BEST G

1 Like
6

You are very welcome

Best Regards,

Dan from Ryviu: Product Reviews & QA app

7

But i dont know about coding can you send me the link of video in which they will guide how and where this code will paste
One more question which is very important regarding sense theme and publisher theme that every time after customiztion the message appearing on top of the page “To preview your changes, color schemes must be defined in settings_data and settings_schema files.” so kindly guide me what is the solition of this problem when i go to online store button and theme customization
please send me the link of video guide line
Regards