How To Move Product Template On Product Page

Solved

How To Move Product Template On Product Page

MMast
Trailblazer
182 1 25

Thanks in advance!

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

D6A9D2D5-45EA-4214-A96C-3E0770DBB6F0.jpeg

https://decemberschild.com

password: dc

Accepted Solution (1)

BSSCommerce-TA
Shopify Expert
123 24 24

This is an accepted solution.

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

- Before: 

BSSCommerceTA_1-1719039257076.png

 

 

- After: 

BSSCommerceTA_2-1719039681123.png

 

 

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%;
}

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

kashifsami
Visitor
1 0 0

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 */
      }
        • This code sets up a flexbox layout for the product page, with the image and details section rearranged.
      1. 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!

Khans

BSSCommerce-TA
Shopify Expert
123 24 24

This is an accepted solution.

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

- Before: 

BSSCommerceTA_1-1719039257076.png

 

 

- After: 

BSSCommerceTA_2-1719039681123.png

 

 

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%;
}

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency