Debut theme collection list titles

Solved
Mareka
Trailblazer
209 1 27

Hello,

I am using debut theme & I would like to have my collection list titles below the photo rather than across the photo. I tried some code from a previous post, but then my collection list had a scroll bar. Can someone please help ?

0 Likes

Hello Mareka,
Please share your site url.
So that i can check and let you know the exact solution here.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Mareka
Trailblazer
209 1 27

treasureknot.myshopify.com

0 Likes
KetanKumar
Shopify Partner
20370 2110 7661

@Mareka 

Thanks for url but sorry, we're not able to your store.

KetanKumar_0-1595214364508.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Mareka
Trailblazer
209 1 27

treasure-knot.myshopify.com

0 Likes

This is an accepted solution.

Hi @Mareka 

 

 

.collection-grid-item__title {
top: 15px;
}

 

 

 

You can try this code, just paste it into your theme.scss.liquid file. 

Btw, I don't think it's a good idea to include many anchor links within your hero banner. Instead, you should use a call-to-action for the most important action that you want visitors to take. 

You can take a look at this article to view some examples of the best homepage to see how things are aligned on the hero area. (The link shouldn't be opened in the same tab also. They need to be opened in a new tab)

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
0 Likes
KetanKumar
Shopify Partner
20370 2110 7661

This is an accepted solution.

@Mareka 

Thanks for it

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.collection-grid {
margin-bottom: 0;
    overflow: visible;
}
.collection-grid-item__title {
    padding: 0 15px;
    position: relative;
    top: 0;
    margin-top: 20px;
    transform: none;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mareka
Trailblazer
209 1 27

Hi QuangN

Thankyou.

I am not very tech savvy so I don't know what an anchor link or a hero banner is.

0 Likes

Screenshot at Jul 20 10-42-41.png

 

It's this area. And those texts with links are called anchor links. If you go through some popular brands' homepage, like Nike, ASOS, you'll see that instead of anchor links, people use buttons. And it's usually the better way because It attracts more attention.

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
0 Likes
Mareka
Trailblazer
209 1 27

Thankyou QuangN for the information.

0 Likes