Help With Athens Theme

Store Design
, , , , ,

Topic summary

A user seeks help customizing the Athens theme for their Shopify store (moon-whale.com), focusing on mobile view improvements.

Issues raised:

  • Mobile slides not displaying like desktop version
  • Collection pages lacking 2-column product layout option (unlike homepage)
  • Add to cart button color change needed (to green) for both views

Solutions provided:
A community member shared custom CSS code to add to theme.liquid file (above </body> tag), which successfully resolved the 2-column layout issue.

Ongoing problem:
The slide/banner sizing remains unresolved. Initial CSS fix using “contain” created excessive white space around images. Switching to “fill” caused image squashing. The user wants the “journey together” banner to maintain its size while eliminating surrounding white space—essentially shrinking the container box without affecting the banner dimensions.

Status: Discussion remains open with the spacing issue still requiring a solution.

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

Hi

I’m happy with the design of my store for a desktop view however the mobile view isn’t how I want it.

First issue is slides on mobile view. Id like this to be sized and look the same as they do on a desktop.

Second issue is i want 2 product columns on the different collections pages, there doesn’t seem to be an option for this however the home page does.

Id also like to change the colour of the add to basket button to green for desktop and mobile views

Any help would be massively appreciated

www.moon-whale.com

1 Like
2

Hey @Dan_MW

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT

Moeed_0-1738670328369.png
Moeed_0-1738670328369.png374×664 149 KB

Moeed_1-1738670341269.png
Moeed_1-1738670341269.png365×658 41.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Thanks so much moeed, it solved the column issue.

The slide isnt quite right, it fits the image however its leaving this ugly space around it, is there a way to shrink this too?

Thanks

Dan

1 Like
4

In the code mentioned above, just simply replace the word “contain” with “fill” and it should fix that problem too.

Best Regards,

Moeed

5

it went back to a squashed square, i like the original solution you gave however take look further down the page at the journey together banner, i want to make that block more narrow to the size of the banner, is that possible?

thanks

Dan

6

Dan_MW_0-1738676254333.png
Dan_MW_0-1738676254333.png412×646 127 KB

so i want the banner to remain that size for mobile but remove all that white space around it, basically shrinking the box that holds the slide