Change color, font weight for heading

If you want to change color or font weight for your heading, you can:

Go to Shopify Admin dashboard, select Online Store > Themes > Customize theme

Select VIBE Feed section on your page, and scroll down to Advanced > Custom CSS

Add the following codes:

vibe-block-title h2 {
color: black;
font-weight: 600;
}

The code will change the heading to black color, with font weight is semi bold. Feel free to adjust the number as your preferences.

Or, if you want to use hex code for color, use this code:

vibe-block-title h2 {
color: #367c2b;
font-weight: 600;
}

Or, if you want to change color only, use this code:

vibe-block-title h2 {
color: #367c2b;
}

Change color, font weight for paragraph

If you want to change color or font weight for your paragraph, you can:

Go to Shopify Admin dashboard, select Online Store > Themes > Customize theme

Select VIBE Feed section on your page, and scroll down to Advanced > Custom CSS

Add the following codes:

vibe-block-title p {
color: black;
font-weight: 600;
}

The code will change the paragraph to black color, with font weight is semi bold. Feel free to adjust the number as your preferences.

Or, if you want to use hex code for color, use this code:

vibe-block-title p {
color: #367c2b;
font-weight: 600;
}

Or, if you want to change color only, use this code:

vibe-block-title p {
color: #367c2b;
}

Change color for "Load More" button

Note that this change only apply to VIBE Grid Feed.

If you want to change color for your "Load More" button, you can:

Go to Shopify Admin dashboard, select Online Store > Themes > Customize theme

Select VIBE Feed section on your page, and scroll down to Advanced > Custom CSS

Add the following codes:

div.vibe-df.vibe-center > button.vibe-anm.vibe-btn.vibe-btn-lm {
color: #367c2b;
}

Or

div.vibe-df.vibe-center > button.vibe-anm.vibe-btn.vibe-btn-lm {
color: red;
}

The code will change the "Load More" button to this color. Feel free to adjust the number as your preferences.

Change color for Navigation button

Note that this change only apply to VIBE Slideshow Feed.

If you want to change color for your Navigation button, you can:

Go to Shopify Admin dashboard, select Online Store > Themes > Customize theme

Select VIBE Feed section on your page, and scroll down to Advanced > Custom CSS

Add the following codes:

vibe-slider-nav .vibe-btn-nav {
    background: red;
}

Or

vibe-slider-nav .vibe-btn-nav {
    background: #367c2b;
}

The code will change the Navigation button to red. Feel free to adjust the color as your preferences.

Change background color for VIBE Feed section

If you want to change background color for VIBE Feed section, you can:

Go to Shopify Admin dashboard, select Online Store > Themes > Customize theme

Select VIBE Feed section on your page, and scroll down to Advanced > Custom CSS

Add the following codes:

.section:has([id*="shopify-block-"]) {
  background: blue;
}

or

.section:has([id*="shopify-block-"]) {
  background: #367c2b;
}

The code will change the VIBE Feed section to blue. Feel free to adjust the color as your preferences.

Make round corner for Instagram post

If you want to make round corner for your Instagram post, you can:

Go to Shopify Admin dashboard, select Online Store > Themes > Customize theme

Select VIBE Feed section on your page, and scroll down to Advanced > Custom CSS

Add the following codes:

vibe-item {
border-radius: 12px;
}

The code will make the corner rounded by 12px. The bigger the number, the rounder the corner will be. Feel free to adjust the color as your preferences.

Updated on: 28/04/2025