Move text below collection image - Atlantic theme

Store Design
,

Topic summary

Goal: move collection titles below the collection image in the Atlantic theme on both desktop and mobile while preserving the existing font.

Context: The store URL was shared (https://aceanduka.com/). Responders requested access details; no password was posted.

Proposed solutions (code-centric):

  • Edit theme.css and add: ‘.collection a { align-items: end!important; }’ to push the title below the image. Result screenshots for desktop and mobile were provided.
  • Alternative CSS: add to theme.css: ‘span.collection-overlay { margin-top: 175px !important; }’ so the title and the hover ‘Browse’ button both display without overlap. A result screenshot was provided.
  • Another suggestion: insert custom code in theme.liquid above ‘’, but the snippet was not included, so the guidance is incomplete.

Notes:

  • Images and CSS snippets are central to understanding the fixes.
  • No confirmation from the original poster that any solution worked; no answer marked as accepted.

Status: Unresolved/ongoing. Key open point: which CSS approach best fits Atlantic’s structure on this store, and confirmation that it renders correctly across desktop and mobile.

Summarized with AI on December 22. AI used: gpt-5.
7

This is Richard from PageFly - Shopify Page Builder App

Hi @AU_3 Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly