More than 6 photos in columns in Dawn theme

Store Design
1

More than 6 photos in columns.

I’m trying to add a line of 10 small photos to give a quick overview of product benefits. It seems the Dawn theme, or themes in general, can only add 6 photos.

would anyone know, how I might add 6 photos to one product page, 8 photos on an other and perhaps even 10 photos to some product pages?

Website preview

Screenshot 2022-07-18 at 14.49.55.png
Screenshot 2022-07-18 at 14.49.55.png2298×3216 634 KB

2

I looked at your site it says your on wordpress that being said there is a few different ways depends on where the content is. It seems you want it on products. The main issue is that how do you want it to look on mobile?

3

Hi @amorlett

Thanks for your response.

That true. Our current site is on wordpress, but I’m working on a demo site on shopify, to be sure it can handle my wishes before I move my site.

My request is regarding shopify and the product pages. If you click here, you can see how it looks in the demo.

On a mobile and any other screen, where I can not show all icons on one row, I prefer that it is not visible at all, otherwise I prefer it to be a swipe as the theme offers now. And with smaller photos so it’s a bit discreet. :slightly_smiling_face:

4

In the dawn theme there is a section called custom liquid code, the way you get to it is from themes and click on customize theme after you click on that you will see on the top where it says “home page” click on that and select products. you will have a default product page, within that my advice is to make a new template called with-icons once you select that you now can click on custom liquid in that you will put this code

Note you will change the URL inside the image to reflect your images {{ ‘twitter-icon.png’ | asset_img_url: }}

{% style %}
.wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    margin: 0px 30px;
}

.min {width:100%;
height:100%}
@media only screen and (max-width:780px) {.wrapper{display:none;}}

{% endstyle %}
1 Like
5

Thank you @amorlett :smiley:

I still have a few challenges.

  1. The columns are not centered

  2. I can’t write any text under the icons.

Any idea on how I can solve this?

And could the icons become smaller?

https://xipgprpfqyyh8ak1-61929914576.shopifypreview.com/products/cl-800t-super-slim-gulvdisplay

Thanks a lot :blush:

Screenshot 2022-07-20 at 13.32.46.png
Screenshot 2022-07-20 at 13.32.46.png3267×1693 398 KB

6

hey @CompleteNovice I just coded it for example you need to change the styles to fit your design the

.my-items {    justify-self: center;}

center; and the images need to be smaller and the wrapper needs to be changed. I really suggest you play around with it in w3schools or code platform of choice for the text it would go something like

 your text

inside your div after the image tag

the wrapper is actualy 12 columns in my example so change it as needed


grid-template-columns: repeat(10, 1fr);

grid-template-columns: repeat(8, 1fr);
1 Like
7

Thanks a lot @amorlett . Much appreciated :smiley: