kherzog

Thank you for your suggestion @derricksrandomviews. I've started to that redirect work around. The shop page is an index page containing our seven products pages or "sub-shops", one being gift cards. There are two ways to place the gift card product item page on the index shop page. One uses a summary block on a single page, the other a product block. Both require a custom header and footer similar to the gift card page. Without custom CSS, if that's even possible, a summary block of products lacks the product variant and buy now button and links to the product item pages. A product block may work with the link to the actual gift card item page turned off. I'm going to test both types of blocks a bit more. Simultaneous to that effort, I'd like to continue to explore a redirect.

@tuanphan I tried your code to redirect a products listing page https://www.lynnemeade.com/gift-cards/, that is part of an index page, to a product item page https://www.lynnemeade.com/gift-cards/gift-card/. The product listing page only has the single product item page. Error message occurred as follows: 1. "Script disabled" when inserted code in code block on product listing page header. It was only editable are on that page. 2. "Waiting for cache...Waiting for www.lynnemeade.com...processing request..." for over two minutes when testing redirect after inserting code in product listing page's Gear Icon >> Advanced >> Page header Code Injection. What else can be done to enable redirect of one existing page to another? Thank you in advance for your help

@smdreyer I haven't figured out yet. We launched the store with the three related products side-by-side mobile. Perhaps @tuanphan or another Circle Leader or Expert can help to make then stack in single column.

I'm having a similar, but different issue with client's shop. Current click through to product detail page is: Index shop w/ sub shops on listing page >> gift cards shop >> gift card detail page https://lynnemeade.com/shop >> https://lynnemeade.com/gift-cards/ >> https://lynnemeade.squarespace.com/gift-cards/gift-card I set up redirect /gift-cards/ -> /gift-cards/gift-card 301 , so that when user clicks on gift cards shop link https://lynnemeade.com/gift-cards/ while on index shop w/ sub shops listing page https://lynnemeade.com/shop/, they would go to gift card detail page https://lynnemeade.squarespace.com/gift-cards/gift-card/. Unfortunately, redirect doesn't work for a live product listing page to product detail page. Guessing Brian is looking for redirect as well. Any pointers to making this happen would be appreciated.

@tuanphan Thank you for updated code. I modified it to display an underline in links in the code block (see below). Adding the modified code to Page Settings > Advanced > Header worked. Hurrah!! <style> .code-block a { text-decoration: underline!important;} } </style> I so much appreciate your assistance!

Thank you for the code @tuanphan. I wished it had resolved the link display issue. When I inserted the code above in the Page Settings > Advance > Header, the code removed the light grey underline in all links of the Contact page. I've since removed that code and the code to style links in the code block, that is "p a {text-decoration: underline!important;}", so that the black double underline in all links on the page disappears and the site styled gray link underlines remain. Let's try another approach: My goals for pages with code blocks with links and light gray backgrounds are to: 1) not affect the light gray paragraph and footer links that are styled by the "Underline Body Links" option in site styles 2) style links in code blocks with gray backgrounds with a black underline How can these two goals be achieved with custom CSS? I would so much appreciate any guidance. Thank you in advance!

Site URL: https://www.lynnemeade.com Hi, I've turned on "Underline Body Links" option in site styles to go with the website's minimalist design aesthetic. A double underline of these links has arisen when adding code blocks to display a colored background, text and links. In order for the links in these code blocks to have an underline, I've used the code: p a {text-decoration: underline!important}. Without that code, the links aren't displaying according the link site styles setting. To view the double underline display issue on a page that has a code block with a link underlined: https://www.lynnemeade.com/contact To view the single underline display on a page that has a code block without any links: https://www.lynnemeade.com/teaching-workshops I've tried various ways to resolve the link problem and am stumped at this point. I would be most appreciative for a way to resolve the double underline display issue. Thank you in advance, Karen

@tuanphan Any thoughts on how to make related products stack vertically in single column on mobile? Site created with Avenue 7.0.

Fix works on desktop and mobile! Only one button appears on top navigation. Pleased to have the button operational today. Thank you!!

@tuanphan I just looked at the custom button on link fix to the last link on right side, on our site "Contact" link. When I rolled over links that were in folders ("About" and "Collections"), a button appears on the last link in the folder. How can I fix that display issue? I've attached image of extra button issue on computer desktop. Same display is happening on mobile. Live site is https://www.lynnemeade.com/

@tuanphan, thank you so much for getting back to me on a Saturday! The code worked like a charm. : -) The call-to-action button improves navigation user experience 10X. I narrowed the size slightly. When we launch the shop, I'll move the button to the shop link. I already figured out how to do that. You have my gratitude.

Here's the link to the live site: https://www.lynnemeade.com/

@tuanphan When I used the code you recommended to convert a header navigation link into a button on a site using the Avenue template the button became out of line with the rest of the navigation links. How can I fix? Thank you in advance for your help.

@tuanphan thank you for quick reply. Here's the private product landing page. You can click through from there to product item pages. https://www.lynnemeade.com/tabletop pw: displayissue

Site URL: https://www.lynnemeade.com/ I'm having an issue with display of related products in an online shop to be launched soon. The SQSP version is 7.0 and the template is Avenue. The three related products display next to each other horizontally similar to the computer desktop view, rather than stacking vertically in a single column. My understanding is that images stack vertically on mobile in the Avenue template, except in some blocks like summary carousels which stack in two columns. (I'll address an issue with that display in a separate question.) The resulting display of product images and text is too small for a user to see and read well, particularly on mobile phones. On mobile phones, I'd like each related product to stack vertically with the product title and price centered below the product thumbnail. The product title and price may require left justified styling for longer titles. I'll have to test the best overall text styling once the related products display vertically stacked. For now, I've set the "Details Alignment: Center" in site styles. The tablet display is problematic as well, even more so in portrait mode. I'd prefer to keep the three related products in one row horizontally rather than creating two columns. I noticed that the related product images and text don't span the full length of the screen inset. Perhaps changing that would help on tablets in both portrait and landscape mode. To see the display issues, I've attached two screenshoots of the current horizontal mobile phone display and one of the tablet display. The web site is Lynne Meade Ceramics. Code from two related-products questions Displaying 2 columns / Related Products / Mobile and Limit the number of related products didn't correct the display issue. My being new to custom CSS is hampering the effort. I'd appreciate any pointers on how to resolve this display problem. Kindly, K