• Closed by: Marek
  • Closed on: 06.05.18, 20:29
  • Reason: Closed
  • Comment: Glad to help!

Ticket #11659 - Assistance regarding Front page , product page, builder and filters

Hi ,

I have reopened an old ticket but i saw no answer so maybe you missed that one so i opened a new one . Please assis in the following regards :

1. how can i make the first page of the shop to show 2 products per row instead of 1 as it is now,
2. Is there any way to set the default attribute value to " none " so that the customer has to choose it
3. How can i change the dropdown size selector from the product page into buttons as it is in the demo version of the theme?
4. How can i remove the 3 little buttons from the prview photo of the product : “Preview” " add to cart " and " add to compare” 5. I cannot find the builder module even though i think i have the latest theme version ( TS v.1.7.5 | Alysum v.5.1.5 | PS v.1.7.2.4 ) or maybe i am wrong… 6. How to set the filters on the shop page to “hidden” so that the customer chooses if he needs them or not, and if he does he can press a " filter " button to use them

I would realy appreciate some help here since i am new to presta and having a difficult time due to a timeline.

Thank you !

Comments

Marek 13 Feb 2018, 12:36

Hi, Bogdan.
1. We have video tutorials about home page builder https://venedor3.promokit.eu/promokit/landing/video.html 2. What default attribute do you mean?
3. Could you please give me a link to your page or take a screenshot?
4. To hide those buttons add following CSS:

.product-actions {display:none}

5. Maybe it’s not installed yet? Try to search in in your BO
6. What filter do you mean?

Bogdan Petrescu 13 Feb 2018, 15:32

Hello Marek , thank you for your reply.

i will check the tutorials today , thank you! By default attribute i mean for example the size attribute for a t-shirt by default it is set to a value which you can select in the backend but you cannot choose that calue to be blank and to force the cx to choose the size, I will attach a print screen for example. The attribute filters on mobile version, i want them to stay hidden , i will attach print screens for example.

Bogdan Petrescu 13 Feb 2018, 15:40

here is the filter print screens

Bogdan Petrescu 13 Feb 2018, 15:52

I have instaled the page builder.

Bogdan Petrescu 13 Feb 2018, 21:14

I tried using the page builder as shown in the video but after i save the profile, the front page of the shop ( home ) does not change at all. The only way to change it is by selecting another preset. Do you also have tutorial videos for Alysum theme?

Bogdan Petrescu 13 Feb 2018, 21:58

How can i translate this text from this section ? i tried to translate it from International > Tranlation > Modules/Theme/ Other etc… no results.
Pleas find attached the printscreen

How can i remove " Special” from that selection ?

Please help me i am haveing a difficult time here.

Bogdan Petrescu 13 Feb 2018, 23:22

Managed to change the front page layout, i seems i didn’t checked the “use pagebuilder” button from the theme settings sections, so please disregard this.

I am having another issue now:
1. How can i change the possition of the “new” and “only online” ( " nou” and " numai online " ) text or remove it because it is on the model face. ( please see atttachment)
2. the product title is overlaping the price ( please see the attachment).
3. where can i use the css code you gave me? is there a module i can use?
4. I want to use the Product tab widget but is doesn’t show right ( please see pciture 454 ) , i tried to use the add module widget to add the awkward module but i can;t find it in the list

Bogdan Petrescu 13 Feb 2018, 23:29

https://ieromanie.ro/ this is the url

Marek 14 Feb 2018, 10:51

Hi, Bogdan.
1. Go to the Theme Settings > Product Miniature tab, and disable labels there
2. That is a bug. Please fill out all necessary fields in your profile https://support.promokit.eu/index.php?do=myprofile to access to your server
3. Go to the Theme Settings > Custom CSS tab
4. the same as #2

Bogdan Petrescu 14 Feb 2018, 11:26

I have filled the login info for the ftp and BO login.

Bogdan Petrescu 14 Feb 2018, 12:19

tried the css code but the buttons still show

Marek 14 Feb 2018, 12:46

Ok, try this code

.product-actions {display:none !important}
Marek 14 Feb 2018, 12:51

I can’t find the theme

Bogdan Petrescu 14 Feb 2018, 13:01

It shpul be unde the “ieromanie.ro” because it an addon domain. It is installed on the site as you can see

Marek 14 Feb 2018, 13:29

Ok, it must be fixed now

Bogdan Petrescu 14 Feb 2018, 13:56

sorry for the misspelling i was on my phone. i think it’s fixed. But the 3 buttons still show up after i added the css codes you gave me . You also have acces to the BO of the site can you take a look ?
I also asked you earlier why the translation does not work for the “feature , special , new arrival” text from the Product tab section?I tried to translate it from theme. modules , other trans … no results
Can I use the Awkward module with this builder ? I could not find it in the add module widget.

Bogdan Petrescu 14 Feb 2018, 14:00

And i still have the probleme overlaping the product title on the mobile version with 2 columns per row.

P.S. how can i make the product picture bigger when i use 2 rows per page?

Marek 14 Feb 2018, 14:18

1. As for translation issue, have you tried to clean prestashop cache after translation?
2. Unfortunately Awkward slider is not compatible with builder
3. I think will be better to have only one image on mobile devices. I just did it for you

Bogdan Petrescu 14 Feb 2018, 15:02

1. i did clear the cache but still no change
2. ok.
3. Can we find a solution for this ? I realy would prefer to use 2 columns. It has a small problem with one column also on shop page, i will attach print screen for example , the “lei” text doesn’t show, lei it’s the currency we use in my country.
4. you still haven’t offered my an answer regarding the default size attribute for clothes products, i attached an example print scren on an earlier message i will attach it again. The default size is “S” let’s say, i want it to be blank so the customer is forced to choose it.
5. The 3 buttons still appear after using the css code

Marek 14 Feb 2018, 16:25

1. Now I see. You have to translate PageBuilder module
3. Fixed
4. There is no such option in the theme. I suppose it could be somewhere in prestashop back office, but I don’t know where exactly
5. Looks like it’s a cache of your browser, because I don’t see those buttons more

Bogdan Petrescu 15 Feb 2018, 18:02

Ok , thank you for fixing it,it looks good only if you could mode the price a little bit lower, now it’s overlapping the stars on mobile version. Translated Page builder and now it’s all good.
1. The thing is i cannot display the products normal in columns , only as carousel. When I select “normal” in the “Product Tabs” widget the products are showing one under another instead of 2 columns per row - please see attachement ( Picture 1 - as shown on my website , picture 2 - as i want them to show). So to be clear i want to display products in a list lets say 10 products on 2 rows instead of a carousel.
2. Regarding the filters shown on shop page, can we make hide them so that the cx clicks to use them ? i asked this earlier already …

Bogdan Petrescu 15 Feb 2018, 18:04

3. How can i make the peoduct images bigger when i use 2 columns per row ?

Bogdan Petrescu 15 Feb 2018, 20:45

UPDATE
I added the following css code and it seems that the price is not overlapping the stars anymore : < .max-rating.star-container {top:-9px;} >

Point 3. i used the edit row > Design section from page builder and set margin left and right to -30 px, now it looks ok . I hope i will be a good fix

Marek 16 Feb 2018, 10:28

Hi, Bogdan.
Here is the fix for products

.producttab-content .raw-links {
  display: flex;
  flex-wrap: wrap;
  border:none
}
.producttab-content .raw-links li {
  border:none
}
.producttab-content .raw-links li article {
  width:100%
}
Marek 16 Feb 2018, 10:29

I don’t see the way to make an image bigger, it’s already have width: 100%

Bogdan Petrescu 16 Feb 2018, 10:56

Thank you , it kind of works… now they appear in onw column on mobile and 3 columns on big desktop screens and i set it up in page builder to have 2 columns on mobile and 5 on desktop screens …

P.S. Regarding the image bigger i set the margin to -30px and now it’s ok :)

Marek 16 Feb 2018, 11:22

it’s not manageable from back office, but we will fix that in the next update.

Marek 16 Feb 2018, 11:23

I hope it’s not critical for you?

Bogdan Petrescu 16 Feb 2018, 12:57

well it’s kind of, i would like to go live wioth the site on the 21st so … When will the next update will be ?

Marek 16 Feb 2018, 12:58

I can provide you temporary css fix, if you want, it will be faster

Bogdan Petrescu 16 Feb 2018, 13:56

That would be great

Bogdan Petrescu 16 Feb 2018, 15:43

Do you think this could be happening today ? Thank you!

Marek 16 Feb 2018, 16:33

Try this:

@media (max-width:480px) {
.producttab-content .raw-links li {
width: 50%;
padding: 0;
}
}
Bogdan Petrescu 16 Feb 2018, 16:41

It works on mobile , now i have 2 columns but still on desktop I have 3 columns instead of 5 and it looks awkward because of the free space left on the right…see printscreen

Marek 16 Feb 2018, 16:44

Here is the full code:

@media (max-width:480px) {
 .producttab-content .raw-links li {
 width: 50%;
 padding: 0;
 }
}
@media (min-width:481px) and (max-width:1200px) {
 .producttab-content .raw-links li {
 width: 33%;
 }
}
@media (min-width:1201px) {
 .producttab-content .raw-links li {
 width: 20%;
 }
}
Bogdan Petrescu 16 Feb 2018, 17:23

I am not at the computer anymore… i will try it later, i am sure it will work, thank you !

Marek 16 Feb 2018, 17:23

No problem! I’m here and ready to help!

Bogdan Petrescu 19 Feb 2018, 17:53

Hi Marek, can you provide css code for shop page, i would like to have 4 columns on desktop instead of 2 and 2 on mobile instead of one.

And one more question, i don t have the add to cart button on the product page anymore after the css added before to hide the 3 buttons on the thumbnail of the product, The “.product-action " class calls this section too not only the 3 buttons on the preview of the product. Do you have a solution for this?

Marek 19 Feb 2018, 19:21

1. You can set up the number of columns in the Theme Settings module
2. try this code:

.product_list .product-actions {display:none !important}
Bogdan Petrescu 21 Feb 2018, 20:26

1. found it , thanks, but on mobile i still have 1 column, how can i make to 2 columns?

Marek 21 Feb 2018, 20:27

Because mobile width is small. I can change that, but it’s not good idea, as for me

Bogdan Petrescu 21 Feb 2018, 20:39

i think it’s ok, i want it with 2 columns if you could help it would be great!This way customers can see more products… i am looking on a Samsung Galaxy S7edge.

P.S.

The correct classes for the circle buttons on the product preview picture are : a.add_to_compare.btn and a.btn.smooth05

Marek 21 Feb 2018, 21:28

try following CSS:

.product-grid-4 .view_grid .product_list .grid-container {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important}
Bogdan Petrescu 21 Feb 2018, 22:49

still one product per row on shop page ( not the home page , the shop page)

Marek 22 Feb 2018, 16:04

Strange, where have you added that code?

Bogdan Petrescu 22 Feb 2018, 16:09

In the css section from theme settings. You sent me a sreenshot of the front page, i am talking about the shop page . The one where you have filters and see all products.
Www.ieromanie.ro/2-toate-produsele

Marek 22 Feb 2018, 16:12

check it out now,all should be ok

Bogdan Petrescu 22 Feb 2018, 16:19

Still one product per row. Check the link i sent you earlier

Marek 22 Feb 2018, 16:36
Bogdan Petrescu 22 Feb 2018, 22:57

What do you mean by check issue? I tried on chrome incognito on multiple pcs, laptops and phone… same result

Marek 22 Feb 2018, 22:58

I mean just to see how it works, because as you can see all is fine for me

Bogdan Petrescu 22 Feb 2018, 23:01

I realy don’t understand how it works for you and on otber 5 devices don’t… cleared history and all that but still the same result

Bogdan Petrescu 22 Feb 2018, 23:09

i can’t get a result with this…it’s unbeliavable…

Now another problem : How can i lose this title ? In the Product tab module the title is off but still shows, see attachedment

Marek 22 Feb 2018, 23:17

1. Try now, I just changed max width
2. That is not widget title, that is a product tab what you have selected