Want to increase size of collection list image

Shopify Discussion

Topic summary

A Shopify store owner wants to enlarge collection list images that appear small despite being uploaded at 1080px Ă— 1080px. They want the images to stretch to full width.

Resolution for Collection Images:

  • Initial suggestion to edit theme.liquid markup didn’t work, leaving space on both ends
  • Working solution: Add CSS code .collection-list-wrapper { max-width: 100%; } to base.css file
  • Note: Adding to base.css affects all collection lists store-wide; for single section changes, use Custom CSS of that specific section instead

Additional Requests (Ongoing):
The user also wants to redesign the newsletter signup:

  • Replace arrow icon with a “Subscribe” button
  • Add spacing between input field and button
  • Make input field background white
  • Apply same changes to footer newsletter

Current Status:
CSS code provided successfully changed the newsletter design with button and spacing. Questions about applying to footer and changing input background color remain open.

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

i have uploaded 4 collection image with 1080px X 1080px in single row but it looks small, i want to make it look bigger and wants to stretch with full width, any suggestion ?

2

here is store link https://rustic-rack-clothing-co.myshopify.com/

password is advertfox

3

hi, @Advertfox

Please send page URL

4

https://rustic-rack-clothing-co.myshopify.com/

5

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
6

its not working, still the space left in both ends

7

Hi @Advertfox

You can do that by adding this code below in Custom CSS of that section

.collection-list-wrapper {
  max-width: 100%;
}

Screenshot_10.jpg
Screenshot_10.jpg1919Ă—540 86 KB

8

i have placed it in base.css file and it worked !!! you’re star :slightly_smiling_face: thanks a lot

1 Like
9

You are very welcome. If you add it to base.css file, it will affect all collection lists of your store. If you wan to change for one section, added in Custom CSS of section only

1 Like
10

can you also tell me how can i change the design of my newsletter input and button ?? i want to make one input field and one subscribe button instead of arrow

11

Somthing like this?

Screenshot_12.jpg
Screenshot_12.jpg749Ă—300 15.1 KB

12

i want button instead of arrow, thank you

13

This one?

Screenshot_13.jpg
Screenshot_13.jpg815Ă—499 26.2 KB

14

exactly this ! just a little space between input field and subscribe button

15

Please add this code

.newsletter #contact_form .newsletter-form__button { 
    position: unset; 
    background-color: #9FDCDF !important; 
    margin: 0px 0px 0 4px;
    height: 47px;
    width: 15.4rem;
}
.newsletter #contact_form .newsletter-form__button .icon {
    opacity: 0;
}
.newsletter #contact_form button#Subscribe:after {
    content: 'Subscribe';
    margin-left: -12px;
    font-weight: 700;
}
}
.newsletter #contact_form .newsletter-form__field .field:after,
.newsletter #contact_form .newsletter-form__field .field:before {
    box-shadow: unset;
}
.newsletter #contact_form .newsletter-form__field input.field__input {
    padding-right: 1.5rem;
    box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground),var(--inputs-border-opacity));
}
1 Like
16

it workeddddddd, how can i do the same in footer ?

17

also i want to make input field background color white