Jump to content

Problems with Product Page Layout

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.tgtfresh.com/fresh

I have several minor issues relating to the product pages on my site. Any help would be greatly appreciated!

1. I'm using the Shopify Buy Button on my site, and so far, other than a minor gap (more noticeable on mobile), it's been working great. Is there a way to reduce the space between the price and the button?

325063558_ScreenShot2021-10-26at1_05_57PM.thumb.png.ea1d68890b7e78af92e1602f264a1acd.png

image.png.919b9cbe461afe73c24dd1941cf5455c.png

2. For some of my products (https://www.tgtfresh.com/fresh/p/-karasumi for example), I have 2 separate package sizes. Since my company operates exclusively in a primarily mandarin speaking country (Taiwan), the "from" in the price could be difficult to comprehend, and given the fact that I'm using the Shopify Buy Button, customers also won't see the price of the item they'd choose until they add them to cart. Is there a way to change the from text to $699 - $749, or to replace the from to the Mandarin equivalent? (Also, I've been able to change the "out of stock" to mandarin, but I'm yet to find a way to change the "sale". Is there a solution to that?)

3. We also sell some flash frozen fish, which have great emphasis on freshness, so they're caught daily, with daily price/stock fluctuations. Therefore, I was told to use a form instead for their sales, and so far, I've been able to add a button to the product page using the answer here: https://forum.squarespace.com/topic/18620-add-another-button-to-a-product-page/?do=findComment&comment=206499 , however, since only some of my products are sold through forms, I added the header injection code to "additional information" code blocks instead.  For some reasons that I can't understand, this resulted in 2 buttons on each of the pages this code was added to. Also, on mobile, the button appears between the product name and the price. Is there a way to only have one button, placed after the price for both desktop and mobile? (all of the products in this category: https://www.tgtfresh.com/fresh/limitedseafood)

image.thumb.png.5a9e1ac515d91cefb0be62a41025bdd7.png

image.png.13db083344a3cc5aa2c7c91667acee3b.png

 

 

image.png

Edited by L1NST3R
First picture was wrong
Link to comment

Hi,

#1. Add to Design > Custom CSS

/* space above shopify button */
.ProductItem-product-price {
    margin-bottom: 0 !important;
}
section.product-details .code-block {
    padding-top: 0;
}
.product-mark {
    margin-bottom: 5px !important;
}

#2. Add to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $(".product-price").html(function() { 
          return $(this).html().replace("from", "new from text");  
    });
});
</script>

#3. You mean remove 1 button?

Add to Design > Custom CSS

/* remove 1 checkout button on Limitedsea food */
.sqs-add-to-cart-button-wrapper+a.checkoutbutton {
    display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
2 hours ago, tuanphan said:

Hi,

#1. Add to Design > Custom CSS

/* space above shopify button */
.ProductItem-product-price {
    margin-bottom: 0 !important;
}
section.product-details .code-block {
    padding-top: 0;
}
.product-mark {
    margin-bottom: 5px !important;
}

#2. Add to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $(".product-price").html(function() { 
          return $(this).html().replace("from", "new from text");  
    });
});
</script>

#3. You mean remove 1 button?

Add to Design > Custom CSS

/* remove 1 checkout button on Limitedsea food */
.sqs-add-to-cart-button-wrapper+a.checkoutbutton {
    display: none;
}

 

Thanks for the response, they work perfectly! I just have a couple more questions about the product pages:

1. Is there a way to change product prices to something like $699-749?

2. Is there a way to change the "SALE" to something else?

3. For the seafood forms, is there a way for me to add them by product category? (so every product in the /fresh/limitedseafood will have the button automatically)

4. The mobile buttons for the seafood forms is still bugged, being between the title and the price, is there a way to fix that?
No description available.

5. Is there a way to move the seafood form button to after the price for both desktop and mobile, like the buy buttons?

Thanks for the help!

Link to comment

#1. Seeing

#2. Add to Design > Custom CSS

/* change SALE text */
.product-mark.sale {
    visibility: hidden;
    font-size: 0;
}
.product-mark.sale:before {
    visibility: visible;
    content: "New sale";
    font-size: 20px;
}

#3. Which code did you use to add button?

https://www.tgtfresh.com/fresh/limitedseafood

https://www.tgtfresh.com/fresh/p/-parrot-fish-chops-97j8r-pkp8a-pxhjd-jtdwx-d42nz-lzpbb-bfkt5-ye8mw-gk4fk

#4. Add to Design > Custom CSS

/* space between checkout button-price */
@media screen and (max-width:767px) {
.checkoutbutton {
    margin-bottom: 30px;
}
}

#5. Move this?

image.thumb.png.d250c2335c69eb811db3eecbdd6275d3.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
18 minutes ago, tuanphan said:

#1. Seeing

#2. Add to Design > Custom CSS

/* change SALE text */
.product-mark.sale {
    visibility: hidden;
    font-size: 0;
}
.product-mark.sale:before {
    visibility: visible;
    content: "New sale";
    font-size: 20px;
}

#3. Which code did you use to add button?

https://www.tgtfresh.com/fresh/limitedseafood

https://www.tgtfresh.com/fresh/p/-parrot-fish-chops-97j8r-pkp8a-pxhjd-jtdwx-d42nz-lzpbb-bfkt5-ye8mw-gk4fk

#4. Add to Design > Custom CSS

/* space between checkout button-price */
@media screen and (max-width:767px) {
.checkoutbutton {
    margin-bottom: 30px;
}
}

#5. Move this?

image.thumb.png.d250c2335c69eb811db3eecbdd6275d3.png

Thanks for the help! These work perfectly. For number 3, the code I used was copied from here: https://forum.squarespace.com/topic/18620-add-another-button-to-a-product-page/?do=findComment&comment=206499. For 4 and 5, could the button be after the price for both desktop and mobile?

 

Link to comment
On 10/29/2021 at 10:52 AM, L1NST3R said:

Thanks for the help! These work perfectly. For number 3, the code I used was copied from here: https://forum.squarespace.com/topic/18620-add-another-button-to-a-product-page/?do=findComment&comment=206499. For 4 and 5, could the button be after the price for both desktop and mobile?

 

#3. Try adding a tag with name: limitedseafood

for product belongs this category. Let me know when you're done this

As I checked, the category name does not appear in the code structure, so it is not possible to target the products. I would check to see if the tag is present, and maybe use the code to target products that belong to a certain tag.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
56 minutes ago, tuanphan said:

#3. Try adding a tag with name: limitedseafood

for product belongs this category. Let me know when you're done this

As I checked, the category name does not appear in the code structure, so it is not possible to target the products. I would check to see if the tag is present, and maybe use the code to target products that belong to a certain tag.

Alright, I just added the tag "limitedseafood" to all of the applicable products

Link to comment
On 10/31/2021 at 10:08 AM, L1NST3R said:

Alright, I just added the tag "limitedseafood" to all of the applicable products

Edit this code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button-wrapper");        
   });
</script>

to this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".tag-limitedseafood .sqs-add-to-cart-button-wrapper");        
   });
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
18 hours ago, tuanphan said:

Edit this code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button-wrapper");        
   });
</script>

to this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".tag-limitedseafood .sqs-add-to-cart-button-wrapper");        
   });
</script>

 

Thanks, I did that and removed the "remove 1 checkout button on Limitedsea food" code, and now it's working perfectly.

For the number 1 from earlier, it's not as urgent now, as I've added the prices to the Shopify product variation names, so it'd be clearer for customers when adding to cart.

For number 4 and 5, is there a way for the form button to be above the description, and under the price?

Also, for the seafood, since we would be selling per weight unit, is there a way I can make a separate "from" text for the limitedseafood with ".tag-limitedseafood" too?

Link to comment
On 11/3/2021 at 9:35 AM, L1NST3R said:

Thanks, I did that and removed the "remove 1 checkout button on Limitedsea food" code, and now it's working perfectly.

For the number 1 from earlier, it's not as urgent now, as I've added the prices to the Shopify product variation names, so it'd be clearer for customers when adding to cart.

For number 4 and 5, is there a way for the form button to be above the description, and under the price?

Also, for the seafood, since we would be selling per weight unit, is there a way I can make a separate "from" text for the limitedseafood with ".tag-limitedseafood" too?

Button position

You mean button under image?

https://www.tgtfresh.com/fresh/p/-parrot-fish-chops-97j8r-pkp8a-pxhjd-jtdwx-d42nz-lzpbb-bfkt5-ye8mw-gk4fk

From text

Add new from text for tag-limitedseafood products?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/6/2021 at 11:02 AM, tuanphan said:

Button position

You mean button under image?

https://www.tgtfresh.com/fresh/p/-parrot-fish-chops-97j8r-pkp8a-pxhjd-jtdwx-d42nz-lzpbb-bfkt5-ye8mw-gk4fk

From text

Add new from text for tag-limitedseafood products?

Thanks for the response! For the buttons on desktop and mobile, they're currently as the images below. Is there a way to move them to the positions that I've pointed at with the arrows?

For the price, since the limited seafood is different to others, we sell them by weight units, so while the others say "開始價格:" (starting price), it would be better for the limited seafood if it said "每兩開始價格“ (starting price every tael).

Also, showing the price range turned out to be more important than I've imagined, so, is there a way to make the price show the range like $749-899?

Thanks!

2050476335_SquarespaceFormLinkButtonPlacementExample.thumb.png.1839928b9bfcb879a4504f372b8df2c2.pngIMG_9153.thumb.jpg.7530b18b9ce43d119ba9e81b7a3e188d.jpg

Link to comment
  • Solution

With button under price, add to Design > Custom CSS

/* Button under price */
.ProductItem-details .ProductItem-details-checkout {
    display: flex !important;
}
.checkoutbutton {
    order: 2 !important;
}

To change from text for products belong tag limitedseafood, add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $(".tag-limitedseafood .product-price").html(function() { 
          return $(this).html().replace("開始價格", "new text");  
    });
});
</script>

With show price $$-$$

I can't help with this. You can find someone. Or post to some groups on Facebook

  • Squarespace Customization Resource Group
  • Squarsepace Community

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
13 hours ago, tuanphan said:

With button under price, add to Design > Custom CSS

/* Button under price */
.ProductItem-details .ProductItem-details-checkout {
    display: flex !important;
}
.checkoutbutton {
    order: 2 !important;
}

To change from text for products belong tag limitedseafood, add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $(".tag-limitedseafood .product-price").html(function() { 
          return $(this).html().replace("開始價格", "new text");  
    });
});
</script>

With show price $$-$$

I can't help with this. You can find someone. Or post to some groups on Facebook

  • Squarespace Customization Resource Group
  • Squarsepace Community

Thanks for these, they're working exactly as I needed! 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.