Hi,
1. Coded background color
I can’t figure out how to change the background color of certain parts of my website.
I can change the color of most individual sections on the home page, except for the Instagram plug-in:
On this section the background is fixed to a light orange color.
Also, when I navigate to other pages where I cant customize the color, the background is the same light orange:
I think this is hard coded somewhere, so that customising the theme does not override it.
2. Arrow in titles
Can you please help me remove the arrows that appear at the end of every collection title?
3. Customize menu header font size
Is there any way to change the size of the menu headers?
I would like them to be bigger and/or bold, without changing the size of all text or all headers.
4. Collections alignment
Is it possible to align my collections list so that it fits the correct width of the page?
Collection list and the items below are misaligned:
I appreciate your feedback!
Thank you,
1 Like
@Birkolini
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Welcome to shopify community.
Please share your store URL and if your store is password protected then please provide password too.
Thank you.
@Birkolini
can you please try this code
- Go to Online Store->Theme->Edit code
- Asset->/base.css ->paste below code at the bottom of the file.
.header__menu-item span {font-weight: bold;font-size: 16px;}
sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {background: #fff3e0;} /* change color as you like */
.card .icon-wrap {display: none;}
1 Like
Please add below css in bottom of assets/base.css file
.card .icon-wrap {
display: none;
}
@media screen and (min-width: 750px)
.collection-list.grid–3-col-tablet .grid__item {
max-width: 13.7%;
}
.header__menu-item span {
font-size: 16px;
font-weight: 600;
}
Thank you.
1 Like
@KetanKumar @Denishamakwana
Thank you both very much!
Quick responses and both solutions worked out pretty well.
The only things that didn’t quite work (might just be me):
1. Collections grid
I tried adding the suggested code to the bottom of Base.css file, but that did not work.
Maybe it’s set by the alignments determined higher up in the code?
I found this section further up in the coding and tried adjusting the % until the grid aligned with the rest of the page:
@media screen and (min-width: 990px) {
.grid--quarter-max.grid--4-col-desktop .grid__item {
max-width: calc(13.3% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
The problem is that I must be doing these adjustments in the wrong place.
It seems that not only the first collection section is adjusted, but also the one below:
Before:
After:
The second section should not adjust to smaller images, this causes there to be a blank section because I can only list 12 items:
2. Background color
The code worked out nicely for changing the background of the menu header, but I still have a fixed background color of #FBFBE5 everywhere else I go on my page.
For now I will just use this as my background.
I think I found the way to set this as my default override background color on this forum earlier, but I just can’t find back to that post or to where I changed the code.
1 Like
@Birkolini
can you confirm this look
1 Like
@KetanKumar
The look you showed me looks great, except for categories collection (dog, cat .. pet owners) being a bit shorter width than the featured collection below.
This is how it looks on my computer right now:
Both sections are aligned (have the same width), but the problem with this solution is that when I can only display 12 items I am left with a blank space for “item” 13 and 14.
A good solution would be either:
- Add 2 more items to be shown in the featured section (couldnt select more than 12 in the customizer)
or
- Keep the original version where the first collections (dogs, cats .. pet owners) section is as wide as the one below, but keep the previous size of pictures on featured collection.
I would actually prefer solution 1, where the product images are a bit smaller than the 4-column big images in solution 2, but not sure if I am able to add two more products?
If you have a suggested solution for both 1 and 2 then I could try them both.
1 Like
@Birkolini
can send feature collection section code
1 Like
@KetanKumar
Not quite sure exactly what part is the code for the featured collection.
This is the part of base.css that I have been editing trying to get it right:
/* component-title */
.title,
.title-wrapper-with-link {
margin: 3rem 0 2rem;
}
.title-wrapper-with-link .title {
margin: 0;
}
.title .link {
font-size: inherit;
}
.title-wrapper {
margin-bottom: 3rem;
}
.title-wrapper-with-link {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.title--primary {
margin: 4rem 0;
}
.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media screen and (min-width: 750px) {
.title-wrapper--self-padded-mobile {
padding-left: 0;
padding-right: 0;
}
}
@media screen and (min-width: 990px) {
.title,
.title-wrapper-with-link {
margin: 5rem 0 3rem;
}
.title--primary {
margin: 2rem 0;
}
.title-wrapper-with-link {
align-items: center;
}
.title-wrapper-with-link .title {
margin-bottom: 0;
}
.title-wrapper--self-padded-tablet-down {
padding-left: 0;
padding-right: 0;
}
}
.title-wrapper-with-link .link-with-icon {
margin: 0;
flex-shrink: 0;
display: flex;
align-items: center;
}
.title-wrapper-with-link .link-with-icon svg {
width: 1.5rem;
}
.title-wrapper-with-link a {
color: rgb(var(--color-link));
margin-top: 0;
flex-shrink: 0;
}
@media screen and (min-width: 990px) {
.title-wrapper-with-link.title-wrapper-with-link--no-heading {
display: none;
}
}
.title-wrapper--no-top-margin {
margin-top: 0;
}
.title-wrapper--no-top-margin > .title {
margin-top: 0;
}
.subtitle {
font-size: 1.8rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
letter-spacing: 0.06rem;
color: rgba(var(--color-foreground), 0.7);
}
.subtitle--small {
font-size: 1.4rem;
letter-spacing: 0.1rem;
}
.subtitle--medium {
font-size: 1.6rem;
letter-spacing: 0.08rem;
}
/* component-grid */
.grid {
display: flex;
flex-wrap: wrap;
margin-bottom: 2rem;
padding: 0;
list-style: none;
column-gap: var(--grid-mobile-horizontal-spacing);
row-gap: var(--grid-mobile-vertical-spacing);
}
@media screen and (min-width: 750px) {
.grid {
column-gap: var(--grid-desktop-horizontal-spacing);
row-gap: var(--grid-desktop-vertical-spacing);
}
}
.grid:last-child {
margin-bottom: 0;
}
.grid__item {
width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
flex-grow: 1;
flex-shrink: 0;
}
@media screen and (min-width: 750px) {
.grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
.grid--gapless.grid {
column-gap: 0;
row-gap: 0;
}
@media screen and (max-width: 749px) {
.grid__item.slider__slide--full-width {
width: 100%;
max-width: none;
}
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.grid--one-third-max.grid--3-col-tablet .grid__item {
max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
}
}
@media screen and (min-width: 990px) {
.grid--quarter-max.grid--4-col-desktop .grid__item {
max-width: calc(13.33% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
}
.grid--1-col .grid__item {
max-width: 100%;
width: 100%;
}
.grid--3-col .grid__item {
width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}
@media screen and (min-width: 750px) {
.grid--3-col .grid__item {
width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
}
}
.grid--2-col .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}
@media screen and (min-width: 750px) {
.grid--2-col .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
.grid--4-col-tablet .grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
.grid--3-col-tablet .grid__item {
width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
}
.grid--2-col-tablet .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
@media screen and (min-width: 990px) {
.grid--4-col-desktop .grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
.grid--3-col-desktop .grid__item {
width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
}
.grid--2-col-desktop .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
@media screen and (max-width: 749px) {
.grid--peek.slider--mobile {
margin: 0;
width: 100%;
}
.grid--peek.slider--mobile .grid__item {
box-sizing: content-box;
margin: 0;
}
.grid--peek .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
}
.grid--peek .grid__item:first-of-type {
padding-left: 1.5rem;
}
.grid--peek .grid__item:last-of-type {
padding-right: 1.5rem;
}
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.slider--tablet.grid--peek .grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
.slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
.slider--tablet.grid--peek .grid__item:first-of-type {
padding-left: 1.5rem;
}
.slider--tablet.grid--peek .grid__item:last-of-type {
padding-right: 1.5rem;
}
}
@media screen and (max-width: 989px) {
.slider--tablet.grid--peek {
margin: 0;
width: 100%;
}
.slider--tablet.grid--peek .grid__item {
box-sizing: content-box;
margin: 0;
}
}
Or is it a separate file other than base.css I need to look at?
@KetanKumar and this is from the collections.liquid file:
{
"sections": {
"banner": {
"type": "main-collection-banner",
"settings": {
"show_collection_description": true,
"show_collection_image": false,
"color_scheme": "background-1"
}
},
"product-grid": {
"type": "main-collection-product-grid",
"settings": {
"products_per_page": 12,
"image_ratio": "adapt",
"show_secondary_image": true,
"show_vendor": false,
"show_rating": false,
"enable_filtering": true,
"enable_sorting": true,
"collapse_on_larger_devices": false,
"padding_top": 36,
"padding_bottom": 36
}
}
},
"order": [
"banner",
"product-grid"
]
}
1 Like
@Birkolini
thanks can you find this “products_per_page”: 12, and change value “products_per_page”: 14,
1 Like
@KetanKumar
I have tried with different numbers, such as 13, 14, 15, 16 and up, but it says it is out of range (?)
Is there a set range for the theme somewhere?
There must be an option to increase those ranges somehow?
