How To Move Product Template On Product Page

[MMast]

Thanks in advance!

I am looking to move my product template over to the right instead of the default position. Example shown below.

https://decemberschild.com

password: dc

 

[kashifsami]

Hi there,

To move your product template on the product page to the right, you'll need to make some adjustments to your theme's code. Here’s a step-by-step guide to help you with this:

1. Access Your Theme Code:

   • From your Shopify admin, go to Online Store > Themes.
   • Find the theme you’re currently using and click on Actions > Edit code.

2. Locate the Product Template:

   • In the Templates folder, look for product.liquid or it might be under Sections as product-template.liquid.

3. Edit the CSS:

   • You’ll need to modify the CSS to move the product template to the right. Go to the Assets folder and open your theme.scss.liquid or theme.css.

4. Add Custom CSS:

   • Add the following CSS code to position the product template to the right:
     css

     .product-single {
     display: flex;
     justify-content: flex-end;
     }
     .product-single__photo {
     order: 1;
     }
     .product-single__details {
     order: 2;
     margin-left: 20px; /* Adjust this value to your liking */
     }

     1. • This code sets up a flexbox layout for the product page, with the image and details section rearranged.

     2. Preview and Adjust:

        • Save your changes and preview the product page to see if it looks as expected.
        • Adjust the margin-left value if needed to get the perfect layout.

     For more detailed customization or if you’re using a different theme setup, you might need to tweak the CSS and Liquid code further. If you need additional help, feel free to ask and visit this website!

[BSSCommerce-TA · Accepted solution]

Hi @MMast, Do you want it to look like this: 

- Before: 

- After: 

Look for "edit code" in "customize theme" and paste the following CSS code into the "theme.css" or "base.css" file:

.content-for-layout .page-width {
    max-width: 100% !important; 
}

.product__info-wrapper product-info {
    padding-left: 20%;
}