Collections and product images look enormous (Studio Theme)

Store Design
, , ,

Topic summary

A user reports that collection and product images appear excessively large on their Shopify store using the Studio theme.

Proposed Solutions:

  • Adjust collection section settings to increase columns per row, making images smaller
  • Modify theme code by changing grid classes from 2-column to 4-column layout
  • Add custom CSS code before the </head> tag in the theme.liquid file
  • Use metafields to select custom images for individual categories

Current Issue:
After implementing CSS fixes, all product images became uniformly sized but now appear too small, particularly in the “help guides” section. The user seeks a page-level setting to control image sizes for specific sections rather than applying global changes.

Status: Unresolved - the discussion continues as the user looks for more granular control over image sizing across different page sections.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I hope someone can help.

Collections and main product images are looking enormous in our shop. See for example https://shop.connexionfrance.com/collections/help-guides

I have looked but cannot see how to reduce the size…

Thanks in advance,

Nath

1 Like
2

Hello @Elmconnexion !

Check the settings for the collection section inside of your theme, there’s more than likely a way to adjust the number of columns of products per row which will make the images appear smaller.

Screenshot 2024-08-26 at 7.07.31 AM.png
Screenshot 2024-08-26 at 7.07.31 AM.png2554×1356 716 KB

Alternatively, you could alter the section code in the theme file to use the classes: grid product-grid grid–4-col-tablet-down grid–4-col-desktop in stead of grid product-grid grid–2-col-tablet-down grid–2-col-desktop as an example.

1 Like
3
  • Here is the solution for you @Elmconnexion
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liqid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1724677983385.png
BSSTekLabs_0-1724677983385.png1707×883 381 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
4

Hi, you can also use Metafields and select images via custom data.

To do this you can change the category layout and select for the metafield blocks set in the individual categories.

HI,
Alessandro Pieraccini

5

Thank you for your replies.

Strangely though, images showing at the bottom of this pages are showing in a different size than the others https://shop.connexionfrance.com/collections/french-themed-gift-ideas

Any thoughts why that may be?

With thanks in advance again,

Nathalie

1 Like
6

Can you try add more this code before tag @AlessandroAle

  • Here is the result you will achieve:

BSSTekLabs_0-1724680528933.png
BSSTekLabs_0-1724680528933.png1628×842 251 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
7

Hi there, and yes it seems to fix the size of all the products on the page https://shop.connexionfrance.com/collections/french-themed-gift-ideas

However images also became quite tiny here https://shop.connexionfrance.com/ especially the second section 'help guides". Is there not a setting on page level where we can change the size of these images?

With many thanks in advance :slightly_smiling_face: