How to change spacing in featured collection elements - Dawn Theme

Solved

How to change spacing in featured collection elements - Dawn Theme

andrew72
Excursionist
30 0 7

Screenshot 2024-10-09 at 12.15.55.png

Hi, 

I am looking to change the spacing between the product title and the description.

 

I added the description in as a product subtitle. I then added it into card-product.liquid

 

Like this: 

 

</h3>
<div>{{ card_product.metafields.custom.productsubtitle }}</div>

 

Thanks for the help!

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
10038 2387 3014

This is an accepted solution.

Hi @andrew72 

To show on the coffee collection not on the home page. 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

 

.section-template--16080751362202__featured_collection-padding div.card__information > div:nth-child(2) {
   display: none;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
7066 1902 2329

Hey @andrew72 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


andrew72
Excursionist
30 0 7

Hi Moeed,

 

Here is my shopify url: https://obadiahcoffee.com/

 

Thank you,

 

Andrew

Moeed
Shopify Partner
7066 1902 2329

I'm unable to see the description added in your product cards, can you add that so I can help you out?

 

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


andrew72
Excursionist
30 0 7

Hi Moeed,

 

One has been added now as seen in the photo.

 

Thank you!

Moeed
Shopify Partner
7066 1902 2329

Hey @andrew72 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__information div:nth-child(2) {
    padding-top: 15px !important;
    padding-right: 10px !important;
}
</style>

RESULT:

Moeed_0-1728474464083.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


andrew72
Excursionist
30 0 7

Hi Moeed,

 

Thanks so much for this help. I have managed to implement that.

 

Is there a way to make this description only show on the Coffees page and not home page under the coffee name?

 

Thanks, Andrew

Moeed
Shopify Partner
7066 1902 2329

Hey @andrew72 

 

Keep the previous code and add this new code above </style> in the end of theme.liquid file.

.section-template--16080751362202__featured_collection-padding div.card__information > div:nth-child(2) {
   display: none !important;
}

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Made4uo-Ribe
Shopify Partner
10038 2387 3014

This is an accepted solution.

Hi @andrew72 

To show on the coffee collection not on the home page. 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

 

.section-template--16080751362202__featured_collection-padding div.card__information > div:nth-child(2) {
   display: none;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.