Re: How Do I Center The Information In The Featured Product Section (Refresh Theme)

Solved

How Do I Center The Information In The Featured Product Section (Refresh Theme)

Jman4
Tourist
9 0 3

How Do I Center This.jpg

 

How do I center everything in the Featured Products section? That includes the product title, price, color option, quantity, etc.

Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
1969 564 566

This is an accepted solution.

@Jman4, sorry my bad change the code like this

<style>
section.product__info-container * {
    text-align: center!important;
    justify-content: center!important;
}
section.product__info-container quantity-input,
section.product__info-container .share-button__button {
    margin: 0 auto!important;
}
</style>

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 9 (9)

BSSCommerce-B2B
Shopify Partner
1969 564 566

@Jman4,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
.product__info-container.product__column-sticky * {
   text-align: center;
   justify-content: center;
   max-width: 100%;
}
.share-button__button {
   margin: 0 auto;
}
</style>

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Jman4
Tourist
9 0 3

Center 1.jpg

 

@BSSCommerce-B2B I apologize for the inconvenience but, how do I center the quantity selector everything else worked except for that. The share button can stay as it is. It looks better that way

BSSCommerce-B2B
Shopify Partner
1969 564 566

@Jman4, It's weird. I use the code in my theme and it's center all

BSSCommerceB2B_0-1728780897118.png

Could you kindly share your store url? 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Jman4
Tourist
9 0 3

@BSSCommerce-B2B The store url is https://8c800e-21.myshopify.com/ and the password is Cool2495

BSSCommerce-B2B
Shopify Partner
1969 564 566

@Jman4,

try this one

<style>
section.product__info-container * {
    text-align: center!important;
    justify-content: center!important;
}
</style>

Result:

BSSCommerceB2B_0-1728834618621.png

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Jman4
Tourist
9 0 3

@BSSCommerce-B2B Sorry again, but is there a way to put this in my product page (shop now)? The code did work but it only worked on my home page.

BSSCommerce-B2B
Shopify Partner
1969 564 566

This is an accepted solution.

@Jman4, sorry my bad change the code like this

<style>
section.product__info-container * {
    text-align: center!important;
    justify-content: center!important;
}
section.product__info-container quantity-input,
section.product__info-container .share-button__button {
    margin: 0 auto!important;
}
</style>

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Jman4
Tourist
9 0 3

I appreciate the help! Thank you very much!

BSSCommerce-B2B
Shopify Partner
1969 564 566

No problem! Glad to help you 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now