...
KlinKode

How to Center Collection Grid Links on Images in the Shopify Dawn Theme

How to Center Collection Grid Links on Images in the Shopify Dawn Theme

When customizing your Shopify store, small details can make a big difference in user experience. A common design element in the Dawn theme is the collection grid, but sometimes, the default placement of grid links might not align with your store’s aesthetic. In this post, we’ll walk through the steps to reposition these links from below the grid to the center of each image, creating a more streamlined and visually appealing layout.

The Challenge

In the standard Dawn theme, collection grid links are positioned under each grid item. This traditional layout, while functional, may not always capture the user’s attention effectively. For a more modern and engaging design, centering these links on the image itself can be a game changer.

If you prefer video tutorials over text, feel free to skip this post and watch the video below. If not, please continue reading.

The Solution

To achieve this, a few lines of CSS can work wonders. Here’s the code snippet that you’ll need:

ul.collection-list.grid {
    padding-bottom: 36px;
}
li.collection-list__item.grid__item .card {
    position: relative;
}
li.collection-list__item.grid__item .card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
li.collection-list__item.grid__item .card__content {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
}
li.collection-list__item.grid__item .card__content a {
    color: #fff;
    text-transform: uppercase;
}
li.collection-list__item.grid__item .card__content a .icon-wrap {
    display: none;
}

Step-by-Step Implementation

Before Collection Grid

After Collection Grid

Notice how the links are now prominently displayed, creating a more engaging user interface.

Customizing your Shopify store doesn’t have to be daunting. With a few lines of CSS, you can significantly enhance the visual appeal of your site. This simple change to the collection grid links can make your site more intuitive and visually striking.

Have you tried this customization? How did it work for your store? Let us know in the comments below!

Comments (2)

  • Luke Murphy

    May 21, 2024 - 8:54 am

    hi, i applied the code to centre my collection gris link. It worked fine on desktop and i was happy with the result. However, although the effect appears in mobile preview on my computer when i access the site through a mobile phone directly the effect is not applied. any help is greatly appreciated

    • Shahriar Kabir

      May 22, 2024 - 1:50 pm

      I believe it’s your mobile browser cache. Could you check with other mobiles or mobile browsers?

Make a comment

Your email adress will not be published. Required field are marked*

Prev
Next
Drag
Map
Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.