center featured collections title and prices on a section i purchased from the section store.

Shopify Discussion
1

Hello, I recently purchased a featured collections section with a slider from the section store on Shopify. ive tried a-lot of codes to center the title and prices on the product cards and nothing seems to work. i am adding the codes to “ss-featured.collectioon.liquid”. The section did not come with any option to center the title or price.

.featured-collection-title-{{ section.id }} {
margin: 0px;
font-size: {{ card_title_size | times: 0.85 }}px;
color: {{ card_title_color }};
line-height: {{ card_title_height }}%;
letter-spacing: {{ card_title_letter }}px;
text-transform: unset;
text-decoration: none;
font-weight: 600;
}

.featured-collection-price-{{ section.id }} {
margin: 0px;
margin-top: {{ card_price_mt | times: 0.75 | round: 0 }}px;
font-size: {{ card_price_size | times: 0.85 }}px;
color: {{ card_price_color }};
line-height: {{ card_price_height }}%;
letter-spacing: {{ card_price_letter }}px;
text-decoration: none;
text-transform: unset;
}

am I looking in the wrong direction? help is appreciated,

thanks in advance

2

This depends on the code structure of your section. Generally, you only need to add text-align:center; to the title and price codes. However, it is possible that price uses flex layout, in which case you need to add justify-content: center; if it is vertical, you need to add align-items:center;

3

Hi @charmy ,

To center the collection title and prices of a the particular section “ss-featured.collection.liquid”, you can try adding the style inside the liquid file itself.

Also you might need to change the provided style code a bit.

Place the codes inside “style” in the “ss-featured.collection.liquid” file and also verify you’re using the correct class names.

Changed Code:

.featured-collection-title-{{ section.id }} {
margin: 0px;
font-size: {{ card_title_size | times: 0.85 }}px;
color: {{ card_title_color }};
line-height: {{ card_title_height }}%;
letter-spacing: {{ card_title_letter }}px;
text-transform: unset;
text-decoration: none;
font-weight: 600;
text-align: center;
}

.featured-collection-price-{{ section.id }} {
margin: 0px;
margin-top: {{ card_price_mt | times: 0.75 | round: 0 }}px;
font-size: {{ card_price_size | times: 0.85 }}px;
color: {{ card_price_color }};
line-height: {{ card_price_height }}%;
letter-spacing: {{ card_price_letter }}px;
text-decoration: none;
text-transform: unset;
text-align: center;
}

NB: If this doesn’t help your issue, you can share the store link. So, we can check the section and provide a better solution

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

4

@charmy Please provide your store URL to help you on this.