# Baseline Theme CSS

**URL:** <https://community.shopify.com/t/baseline-theme-css/551925>\
**Category:** Store Design\
**Tags:** design\
**Created:** [July 29, 2025, 9:01pm UTC](https://community.shopify.com/t/baseline-theme-css/551925 "2025-07-29T21:01:54Z")\
**Posts on this page:** 7\
**Page:** 1

## AI-generated summary

A user seeks CSS modifications for Shopify's Baseline theme, specifically wanting to:

**Primary requests:**
- Replace minimal "next"/"previous" pagination links with a "Load more" button on collection pages
- Reduce the font size of vendor names (e.g., "316L Stainless Steel") on product cards

**Solutions offered:**

For pagination, three options were suggested:
1. Check theme settings for built-in "Load More" options
2. Use a Shopify app
3. Implement custom code (requires collaboration access)

**CSS code provided:**

For vendor text sizing:
```css
.mb-1.text-scheme-secondary {
  font-size: 10px !important;
}
```

For bold pagination (numbers and next/previous links):
```css
.pagination .border-b-text { font-size: 20px; font-weight: bold; }
.pagination .text-left, .pagination .text-right { font-weight: bold !important; }
```

**Current status:** The discussion remains ongoing as initial CSS solutions partially worked—pagination numbers became bold but vendor text sizing and mobile next/previous styling require refinement. Multiple community members are troubleshooting with adjusted code snippets.

<div class="post-metadata">

**Author:** ![modernout](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@modernout](https://community.shopify.com/u/modernout)\
**Post date:** [July 29, 2025, 9:01pm UTC](https://community.shopify.com/t/baseline-theme-css/551925/1 "2025-07-29T21:01:54Z")

</div>

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.

> **[Men's Everyday Jewelry - MODERN OUT](https://modernout.com)**
>
> Modern Out, established in 2012, designs waterproof, sustainable jewelry for men who value both style and practicality. Crafted for everyday wear, our hardware is made with durability in mind and a focus on quality at every step—from design to...

> **[Men's Everyday Jewelry - MODERN OUT](https://modernout.com/)**
>
> Modern Out, established in 2012, designs waterproof, sustainable jewelry for men who value both style and practicality. Crafted for everyday wear, our hardware is made with durability in mind and a focus on quality at every step—from design to...

 ![Screenshot 2025-07-29 at 3.54.56 PM](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/e/8/2e8d54ee32f5306cd42bf5825e15eaf03b6bd5da.jpeg)

---

<div class="post-metadata">

**Author:** ![Rohail\_Ali\_12](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/rohail_ali_12/32/181179_2.png) [@Rohail\_Ali\_12](https://community.shopify.com/u/Rohail_Ali_12)\
**Post date:** [July 29, 2025, 9:13pm UTC](https://community.shopify.com/t/baseline-theme-css/551925/2 "2025-07-29T21:13:35Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![modernout](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@modernout](https://community.shopify.com/u/modernout)\
**Post date:** [July 29, 2025, 9:59pm UTC](https://community.shopify.com/t/baseline-theme-css/551925/3 "2025-07-29T21:59:02Z")

</div>

Thank you! [modernout.com](http://modernout.com) / [modernout.myshopify.com](http://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?

---

<div class="post-metadata">

**Author:** ![Rohail\_Ali\_12](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/rohail_ali_12/32/181179_2.png) [@Rohail\_Ali\_12](https://community.shopify.com/u/Rohail_Ali_12)\
**Post date:** [July 30, 2025, 12:31am UTC](https://community.shopify.com/t/baseline-theme-css/551925/4 "2025-07-30T00:31:08Z")

</div>

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:

```auto
<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:

```auto
<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,

---

<div class="post-metadata">

**Author:** ![modernout](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@modernout](https://community.shopify.com/u/modernout)\
**Post date:** [July 30, 2025, 12:38am UTC](https://community.shopify.com/t/baseline-theme-css/551925/5 "2025-07-30T00:38:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![The\_ScriptFlow](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/the_scriptflow/32/353266_2.png) [@The\_ScriptFlow](https://community.shopify.com/u/The_ScriptFlow)\
**Post date:** [July 30, 2025, 12:51am UTC](https://community.shopify.com/t/baseline-theme-css/551925/6 "2025-07-30T00:51:09Z")

</div>

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.

```auto
.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

---

<div class="post-metadata">

**Author:** ![Rohail\_Ali\_12](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/rohail_ali_12/32/181179_2.png) [@Rohail\_Ali\_12](https://community.shopify.com/u/Rohail_Ali_12)\
**Post date:** [July 30, 2025, 1:00am UTC](https://community.shopify.com/t/baseline-theme-css/551925/7 "2025-07-30T01:00:07Z")

</div>

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

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

```

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

```auto
.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,