How can I center text and items in Craft theme's featured product?

Store Design
, ,
1

Hello!

I am looking to center all text, and items within the featured product using the Craft theme, and in addition to that make it so that Quantity selector matches the size of the buttons on both desktop and mobile

I have done my best to find the information to do this my self with no relief! All help is greatly appreciated.

Capture.PNG
Capture.PNG1382×789 104 KB

2

@Enviromugs

Please share your store URL!

Thanks!

3

Hello @Enviromugs ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to featured-product.liquid or featured-collection.liquid file

To center all text and items within the featured product section, add the CSS class text-center to the surrounding container element, like this:


  {% for product in section.products %}
    
  {% endfor %}

Go to product-template.liquid file

Add a CSS class to the quantity selector element, for example:

Add this following code

.product-quantity-selector.size-match {
  width: 100%;
  height: 40px;
}

Note: Adjust the width, height as need to match the add to cart button

Save and preview

Hope this can help.

Transcy

1 Like
4

As helpful as you are I was unable to complete the task my self! Thanks!