How can I expand the description section in my online store?

Store Design
1

Hello. How can I make wider description section in my store?

https://policzona-szama.pl/

I mean wider description like this:

wider description section.jpg
wider description section.jpg1678Ă—871 119 KB

ttachment

1 Like
2

In Expanse theme there is a fix max-width of 750px for the product description section.

You an increase this value by modify the file theme.css

Just add this code to the end of the file and tune your preference. I setup 1080px in this example

@media only screen and (min-width: 769px) {
  .collapsibles-wrapper--product {
    max-width: 1080px;
  }
}
1 Like
3

@Mromat

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (min-width: 769px){
.collapsibles-wrapper--product {
    max-width: 90% !important;
}
}

Hope this works.

Thanks!

1 Like
4

Thank You. Im sure that will help.

Can You tell me If I can do that with HTML code?

I can make custom HTML section on my product page. I need make img with link to another page. Can I make code that another img will appear on desktop and another will appear on mobile?

my current html code is: Policzona Szama Naczynie ceramiczne do zapiekania Pulled Pork

and one picture is loading on desktop and mobile. I need another (with another ratio of course) on mobile than desktop.

Is there any solution?

1 Like
5

@Mromat

Doing HTML not the good idea, I think. Using css is shortest and safest way.

If the above given css works then it will be the best for you.

6

Yes I know about css code to liquide its another topic about wider description.

HTML code is another topic and question If I can do it?

This is that topic - https://community.shopify.com/c/Shopify-Design/Custom-HTML-section-Can-I-create-IMG-html-code-to-desktop-and/m-p/1278617

7

Like this. Its banner with Custom HTML section. Can I paste code to make another picture show up on mobile?

baner HTMl.jpg
baner HTMl.jpg1720Ă—863 113 KB

1 Like
8

@Mromat

Please add the following code at the bottom of your assets/theme.css file.

#shopify-section-product-sections-template .hero--padded {
    display: none;
}

Hope this works.

Thanks!

9

Hero section there is for testing. I can delete it via custom page.

I mean if there is option to create HTML code for two IMG showing up:

  • one for desktop

  • another for mobile

Here is example for one IMG: can I add some code to make different img showing up?

<img src=“https://cdn.shopify.com/s/files/1/0559/7881/9741/files/baner_product_page.jpg?v=1628866622” alt=“Policzona Szama Naczynie ceramiczne do zapiekania Pulled Pork” style=“padding-top: 10px;”>

I need another IMG SRC for mobile. Is it possible?

10

@Mromat

which image used for mobile and desktop Please explain to me

Thanks!

11

OK,

I have code for one banner like this: Policzona Szama Naczynie ceramiczne do zapiekania Pulled Pork

example:

Custom HTMl.jpg
Custom HTMl.jpg1529Ă—831 105 KB

and of course this IMG show up the same on desktop and mobile.

Now is the question it is possible to create code that will show up this IMG on desktop:

<img src=“https://cdn.shopify.com/s/files/1/0559/7881/9741/files/baner_product_page.jpg?v=1628866622” …

and another pic (with another ratio for better read) on mobile like this example IMG:

“https://cdn.shopify.com/s/files/1/0559/7881/9741/files/baner_product_page_mobile_0e6b2c9f-d52f-4bbe-a685-34cd497724be.jpg?v=1628872310”

12

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
    @media only screen and (min-width: 769px){
    .collapsibles-wrapper–product {
    max-width: 100% !important;
    }
    }