Move size guide & points to the right

Move size guide & points to the right

Luxurymrkt
Globetrotter
757 2 161

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

 

 

Thank You | mike
Replies 3 (3)

Mustafa_Ali
Excursionist
329 24 53

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

Moeed
Shopify Partner
7354 1993 2432

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 </body> tag

<style>
a.product__information-popup.product__block.product__block--medium.fs-body-75 {
    width: 100% !important;
    justify-content: flex-end !important;
}
.rte--product a[href="#loloyal/home"] {
    top: unset !important;
    position: unset !important;
    width: 100% !important;
    display: block;
    text-align: -webkit-right !important;
}
</style>

RESULT:

Moeed_0-1742323483423.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


mt686
Shopify Partner
121 11 21

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.