Baseline Theme CSS

Store Design
1

I love how simple the Baseline theme is but I am concerned customers will miss the minimal “next” and “previous” style text links at the end of the collection pages.

Does anyone know a hack on having a “Load more…” pagination button?

Also, does anyone know how to make the Vendors (316L Stainless Steel) a little smaller than the normal text on the product cards?

Your help is much appreciated.

Screenshot 2025-07-29 at 3.54.56 PM
Screenshot 2025-07-29 at 3.54.56 PM1920×1498 152 KB

1 Like
2

Hi @modernout,

Thank you for posting your issue on the Community Forum.

Could you please share a link to your store so I can inspect it and provide the necessary CSS to reduce the font size of the card title?

As for the “Load More” button on collection pages, there are three possible approaches:

  1. Check your collection page settings to see if there’s an option to switch pagination to a “Load More” button.
  2. Use a Shopify app designed to add “Load More” functionality.
  3. Implement a custom code solution.

Let me know which direction you’d like to go, and I’ll be happy to assist further.

Best regards,

3

Thank you! modernout.com / modernout.myshopify.com

It’s the Vendor section of the product card that I am interested in making smaller than the size of the product title.

I have checked and there are no options for the pagination except for the amount of products listed per page. I wonder if just making the “next” “previous” and page numbers bigger and bolder for both desktop and mobile would help see it better then?

4

Thank you so much for sharing your website link. Below is the CSS code to make the vendor text smaller. Please add this code under the Custom CSS in the section settings, not in your theme’s core files, to avoid conflicts:

<style>
.mb-1{
font-size: 10px
}
</style>

You can change the “10” to any number as per your requirements. Below is the CSS code for making the pagination numbers bold:

<style>
.pagination .border-b-text{
font-size: 20px;
font-weight: bold;
}
</style>

You can add this code under the Custom CSS of the product block section on the collection pages. Do let me know if you face any issues.

Best regards,

5

You rock! It does make the page numbers bolder but not the “next” and “previous” which only shows up on mobile. Anyway to make those bold as well so they’re noticeable to click?

Also the vendor code doesn’t seem to do anything to the vendor text above the product names.

6

Hey @modernout,
You have two requirements.
(1) Make the Vendor Text smaller: In order to make the vendor text smaller you need to follow these steps.
Go to Shopify Admin >> Online Store >> Themes >> Edit code >> base.bundle.css.
In the end of base.bundle.css file paste the following code.

.mb-1.text-scheme-secondary {
  font-size: 10px !important;
}

You can also change the font-size px value based on your requirements.
(2) Add a load more Pagination Button:
In order to add the load more pagination requires to do the custom code in your theme file.
Could you please share the 4 digits collab code in the p/m so that I can do it for you.
Waiting to hear back from you.
Thanks

1 Like
7

Thanks for the update. You can try this code for the vendor name:

<style>
.mb-1{
font-size: 10px !important;
}
</style>

Here’s the code for the “next” & “previous”:

.pagination .text-left{
font-weight: bold !important;
}

.pagination .text-right{
font-weight: bold !important;
}

Do let me know if it doesn’t work, and we will try a different approach to achieve this.

Best Regards,

1 Like