How to change a single description to H2 in Featured collection Dawn theme

[Javsi]

At the moment it is part of paragraph “

Best selling products

” but want it changing to H2. Has anyone got an idea how to do it? Also want my main menu to be H2 as that is also part of paragraph.

thanks

[EBOOST]

Hi @Javsi

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Sections/featured-collection.liquid
3. find code below

{%- if section.settings.show_description -%}{{ section.settings.collection.description }}{%- else -%}{{ section.settings.description }}{% endif %}

4. replace with code below

{%- if section.settings.show_description -%}{{ section.settings.collection.description | replace: "

","

## " | replace: "

","" }}{%- else -%}{{ section.settings.description | replace: "

","

## " | replace: "

",""}}{% endif %}

[Javsi]

Hi, thank you so much for your reply. I have managed to do it manually and use the exact font and size i wanted. I am using new snippet in edit code:

.collection__description > * {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .2em;
margin: 0;
font-family: Montserrat, sans-serif;
}

is it ok doing it this way rather then going into the original theme?

thanks

[EBOOST]

Hi @Javsi

• You only want to increase font size. So you only need use CSS above

• If you want to update p tag to H2 tag after that you need update liquid code.

[Javsi]

Hi

It turned out that i need to change the font and letter spacing too because i am using two different fonts. All i am asking is it ok to do it the way i have done it because the results looks good or is it wrong approach?

[EBOOST]

Hi @Javsi

It’s ok.

[Javsi]

Thank you.

Also, wanted to know if there is a way to move the pagination scroll buttons on my slideshow, currently it is at the bottom so i wanted it to be inside the slide on bottom right corner. I can give you screen shot if you want?

I have been looking for hours now but there is nothing on google.

thanks

ps,

[EBOOST]

Hi @Javsi

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Assets/component-slideshow.css
3. Add code below to bottom of file

@media screen and (max-width: 749px) {
	slideshow-component:not(.page-width) .slider-buttons{
	    position: absolute;
	    bottom: 0;
	    right: 0;
	    border: none;	
	}
	
}

[Javsi]

I have tried the code. It moves exactly where i want but it stopped functioning. ??

[EBOOST]

Hi @Javsi

You try to add a z-index. You can refer code below

@media screen and (max-width: 749px) {
	slideshow-component:not(.page-width) .slider-buttons{
	    position: absolute;
	    bottom: 0;
	    right: 0;
	    border: none;	
            z-index: 2;
	}
	
}

[Javsi]

YUP! started working but gone a bit crazy haha. The arrow is overshooting the pause button. Also don’t like how it goes backward and forward rather thn looping gently, it’s the actual design not because of the code you have provided . But thank you so much for making it work.

[Javsi]

perfet! just going to remove the arrows and its all sorted. Thank you once again!!