Shopify Home Page Issues

Store Design
,

Topic summary

Main issue: Homepage layout problems after customizations. The collection list was turned into a carousel with thick spacing, inconsistent item sizing, and difficulty adding additional carousels. Text in “image with text overlay” sections does not scale well on mobile.

Latest update: A helper identified the carousel as using Slick slider (a JavaScript carousel plugin). They advised adjusting its code/settings to reduce padding and increase image sizes. They provided the Shopify path to access code (Online Store > Themes > … > Edit code) and clarified that the user’s screenshot showed CSS, but the relevant changes are in JavaScript.

Actions/next steps:

  • Inspect and modify the Slick slider JavaScript config to control spacing and sizing.
  • Consider hiring an expert if not comfortable editing JavaScript.

Status: No fix implemented yet. The mobile text scaling issue for overlays and other texts remains unaddressed in the guidance. Discussion is ongoing with open questions about the exact code changes needed.

Notes: An image was shared showing the CSS section, but it’s not essential to understanding; the key work is in the JavaScript files/config.

Summarized with AI on December 29. AI used: gpt-5.
1

Hi,

Please see advanced version of my website (not published yet).

https://tmjeehbnnmmq93yk-72140980502.shopifypreview.com

In the beginning I used someone to design my website, but they have done all this crazy stuff and It’s hard to fix.

The collection list got changed to have a carousel but it now has a thick padding in between and when I go to add another collection list it turns out like the Floodlight ones (oversized or all different sizings). I want to add another carousel as well so 3 in total and fix the padding issue so there is not a huge gap in between the products.

Also with the 2 image with text overlays the text does not shrink well when looking on a phone, is there any way to change this? Some of the other texts on the page have this same issue.

Please let me know if you could help with this.

Thanks

2

@Mitch23 - you are using slick slider for your collection, please check its code and settings to try to reduce the padding in between and increase images size.

3

Where would I find this?

4

@Mitch23 - please go to dashboard->online store->themes-> click on 3 dots … near active theme and click on edit code

this will take you to the theme files and then you can check all the code

5

Would it be in this section?

Mitch23_0-1715653066012.png
Mitch23_0-1715653066012.png3802×1873 275 KB

6

@Mitch23 - this is css section, check javascript code section, all this is done via javascript coding

if you are not familiar with the javascript then I recommend to hire an expert who can work on javascript