All things Shopify and commerce
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 ?
Solved! Go to the solution
This is an accepted solution.
Hi @Advertfox
You can do that by adding this code below in Custom CSS of that section
.collection-list-wrapper {
max-width: 100%;
}
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
This is an accepted solution.
This one?
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
This is an accepted solution.
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));
}
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
here is store link https://rustic-rack-clothing-co.myshopify.com/
password is advertfox
hi, @Advertfox
Please send page URL
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
<style>
.collection-list-wrapper.page-width.isolate.page-width-desktop.no-heading.no-mobile-link.section-template--15850488791087__39fa6400-6b69-4100-b331-4e70423642a5-padding {
padding-left: 0px !important;
padding-right: 0px !important;
}
</style>
its not working, still the space left in both ends
This is an accepted solution.
Hi @Advertfox
You can do that by adding this code below in Custom CSS of that section
.collection-list-wrapper {
max-width: 100%;
}
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
i have placed it in base.css file and it worked !!!! you're star 🙂 thanks a lot
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
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
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
Somthing like this?
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
i want button instead of arrow, thank you
This is an accepted solution.
This one?
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
exactly this ! just a little space between input field and subscribe button
This is an accepted solution.
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));
}
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
it workeddddddd, how can i do the same in footer ?
also i want to make input field background color white
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025