How to move Button 1 on prestige theme

Store Design

Topic summary

Goal: Move “Button 1 – Discover Fragrances” to the bottom of the image in the Shopify Prestige theme.

Approaches offered:

  • Use built‑in settings: In the section editor, set Mobile content position and Desktop content position (e.g., Bottom center) to reposition buttons and text without code.
  • Add Custom CSS (Theme settings > Customize > Theme settings > Custom CSS) targeting mobile (max-width: 749px) to shift slideshow content:
    • Example provided adjusts .slideshow__slide-content.place-self-center with place-self: stretch and margin-top: 90px.
  • Edit theme CSS file (Assets > base.css/style.css/theme.css) and add a mobile-only rule:
    • Target slideshow-carousel#carousel-template–16830454694121__slideshow .place-self-center and set place-self: flex-end center to push content to the bottom; step-by-step instructions and a result screenshot were provided.

Notes:

  • Code snippets and screenshots are central to the proposed solutions; selectors use specific section IDs.
  • Focus is primarily on mobile layout (max-width: 749px).

Status: No confirmation from the requester; resolution not verified. Discussion remains open pending feedback on which method works.

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

EEE2D4A4-8A66-48C5-890E-FE6FCBB63701.png
EEE2D4A4-8A66-48C5-890E-FE6FCBB63701.png1284×2778 758 KB

Hi,

How do I edit Button 1 “Discover Fragrances” to the bottom of the image? On the Prestige theme

2 Likes
2

Hi @CologneByImage

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
#shopify-section-template--16830454694121__slideshow .slideshow__slide-content.place-self-center {
    place-self: stretch;
    margin-top: 90px;
}
}

Screenshot 2024-12-17 at 10.21.03.png
Screenshot 2024-12-17 at 10.21.03.png966×1216 378 KB

3

Hi

To move Button 1 in the Prestige theme, you can use the template settings and then under Mobile content position and Desktop content position in the section editor select the required position ( screen shot attached )These dropdowns let you adjust where the content, including buttons, appears on both mobile and desktop views (e.g., Bottom center, Top left, etc.).

If you need more control over the positioning, let me know, and I can guide you further—sometimes small CSS tweaks help to fine-tune things exactly as you want.

unnamed (1).png
unnamed (1).png1599×742 127 KB

4

Hi @CologneByImage

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
slideshow-carousel#carousel-template--16830454694121__slideshow .place-self-center {
    place-self: flex-end center;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!