Move size guide & points to the right

Store Design
, , , , , , ,

Topic summary

A user wants to reposition two elements on their Shopify product page: move the points link to align right with buttons on desktop, and relocate the size guide above variants and to the right on both desktop and mobile.

Solutions offered:

  • Moeed provided a code snippet to add to theme.liquid above the </body> tag, including a visual result screenshot showing the desired layout.

  • mt686 suggested CSS-based approaches:

    • For size guide: Use order: -1 and text-align: right if in a flex container, or manually move the snippet in the template file
    • For points link: Apply right alignment with media queries for desktop (min-width: 750px)
    • Recommended using browser inspect tools to identify correct CSS selectors
    • Also mentioned their app “Easy Edits” as an alternative for visual customization

  • Mustafa_Ali requested the website URL to provide specific help

The discussion remains open with multiple solution paths available, pending user implementation and feedback.

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

HI,

I want to move the points link to the right align with buttons on desktop. Also the size guide to the right and above variants for both desktop and mobile. Thank you

Luxurymrkt_0-1742322839942.png
Luxurymrkt_0-1742322839942.png400Ă—198 58.6 KB

2 Likes
2

hey @Luxurymrkt plz share THE URL of your website so i can help you

3

Hey @Luxurymrkt

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-1742323483423.png
Moeed_0-1742323483423.png1388Ă—891 185 KB

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

Best Regards,
Moeed

4

Hey!

You can usually do this with a bit of CSS, but depending on how your theme structures the product page, you might need to slightly tweak the selectors. Here’s a starting point to try out:

For the size guide (move it above variants and right-align):

.size-guide {
  order: -1; /* brings it above variants if it's in a flex container */
  text-align: right;
  width: 100%;
  margin-bottom: 10px;
}

If it’s not in a flex container, you might need to edit the theme’s product template file and physically move the size guide snippet above the variant selector.

For the points link (align with buttons on desktop):

@media screen and (min-width: 750px) {
  .points-link {
    text-align: right;
    width: 100%;
    margin-top: 10px;
  }
}

If you’re not sure of the exact classes, you can right-click > Inspect the elements and adjust the selectors accordingly.

Hope that helps!

Also, if you ever want to make tweaks like this without digging into code every time, I built an app called Easy Edits that lets you visually change stuff and keep the changes — even during the free trial. If you’re curious: https://apps.shopify.com/easy-edits.