How can I adjust the collection list to full width using Parralax?

Mitch23
Tourist
24 0 2

Hi, I can see solutions for other themes, but they don't seem to work for my Parralax theme. Could someone please help at making the collection list the full width? 
Thanks

Replies 17 (17)

sgtlab
Shopify Partner
28 6 8

Hi,

Could you please provide the URL of your store? This will allow us to investigate your issue more thoroughly and give you specific guidance.

 

Regards,

SGTLab
- Press like to let us know if our reply was helpful - Thank you!
- Come visit us at SGTLab
- Support us with a coffee tip
Mitch23
Tourist
24 0 2
sgtlab
Shopify Partner
28 6 8

Hi @Mitch23 

After checking, I noticed that the collection list page is already displayed in full width. Could you please elaborate on what specific issue you would like to fix?

Just to confirm, are you referring to making this page display full width as indicated by the red border in the image attached?

Screen Shot 2024-05-03 at 08.54.06.png

SGTLab
- Press like to let us know if our reply was helpful - Thank you!
- Come visit us at SGTLab
- Support us with a coffee tip
Mitch23
Tourist
24 0 2

I am talking about my home page collection list

Mitch23
Tourist
24 0 2

Home Page Collection List.png

 This is not live 

sgtlab
Shopify Partner
28 6 8

Could you please make the changes go live and provide us with the page URL? We'll take a closer look and help you resolve the issue!

SGTLab
- Press like to let us know if our reply was helpful - Thank you!
- Come visit us at SGTLab
- Support us with a coffee tip
Dan-From-Ryviu
Shopify Partner
7678 1493 1496

Please add this code to your theme.liquid file, after <head> 

<style>
.shopify-section--collection-list .section {
max-width: 100%;
width: 100%;
}
</style>

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Mitch23
Tourist
24 0 2

I tried adding this in but it did not work

sgtlab
Shopify Partner
28 6 8

@Mitch23 

Are you looking to adjust it like this?

https://files.sgt-lab.com/152c38f41714703313.webm

 

Try this snippet code. 

<style>
.shopify-section--collection-list .section {
  max-width: 100%;
  width: 100%;
}
.shopify-section--featured-collection .section {
  max-width: 100%;
  width: 100%;
}
</style>

 

SGTLab
- Press like to let us know if our reply was helpful - Thank you!
- Come visit us at SGTLab
- Support us with a coffee tip
Mitch23
Tourist
24 0 2

yes!

sgtlab
Shopify Partner
28 6 8

Let's try the above code snippet. Insert the code into <head> tags

<style>
.shopify-section--collection-list .section {
  max-width: 100%;
  width: 100%;
}
.shopify-section--featured-collection .section {
  max-width: 100%;
  width: 100%;
}
</style>

If you're unfamiliar with this process, you can install our custom-code-inserter app and follow the tutorial here:
https://files.sgt-lab.com/dd0047b81714704191.webm

 

Here is what the result looks like after the fix:

https://files.sgt-lab.com/823725fa1714661018.webm

 

After inserting the code, make sure it is activated and reload the page. Let us know if this helps!

SGTLab
- Press like to let us know if our reply was helpful - Thank you!
- Come visit us at SGTLab
- Support us with a coffee tip

Dan-From-Ryviu
Shopify Partner
7678 1493 1496

Hi @Mitch23 

Could you share your store URL to check?

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PageFly-Henry
Astronaut
1068 305 260

Hi @Mitch23 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css

Step 3: Paste the below code at bottom of the file -> Save

 

section.section.featured-promotions {

    margin: 0 !important;

    max-width: 100% !important;

    width: 100% !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Mitch23
Tourist
24 0 2

But this is not a featured promotion

Home Page Collection List.png

PageFly-Henry
Astronaut
1068 305 260

You mean this section, it is correct?

PageFlyHenry_0-1714702602859.png

Also, This section is too text-heavy. Consider adding more images, as visuals tend to attract customers more effectively than text alone.

 

PageFlyHenry_8-1714702668700.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

techlyser_web
Shopify Partner
1473 274 292

Hello @Mitch23 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 div#shopify-section-template--22597747081494__collection_list_PUKJCQ .section {
    width: 100% !important;
    max-width: 100% !important;
 }
</style>

techlyser_web_0-1714707211409.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com