Jump to content

3x Queries - How to apply custom font in store page? How to add description to products within store? & How to create button to directly order a service?

Recommended Posts

Hi,

I've been looking around online for assistance on customising my store page & also a section on my homepage. 

Here is the link to the store page. I currently have 2x services available to purchase - amplify1 & amplify2 - these are graphic/video packages. Firstly I would like to apply a custom font for the product name text & order package buttons (see screenshot circled in red). While I've applied custom fonts to other areas of the site I have been unable to figure out how to update these specific pieces of text. 

Secondly, I would like to show a breakdown of all the design assets that are included within each package on the store page, underneath the price & above the button (blue lines in screenshot). Could someone advise how I would add this text via CSS?

Lastly, I have a section on my homepage where I would like the user to have the ability to order both products. However I'm unsure how to get the buttons to go directly through to the purchasing process. I don't want to link to the product page, I want the user to be able to order directly via the homepage. Is this possible? I've attached another screenshot of the homepage, circling in red the buttons that I would like to have this function.

If anyone can help with these queries that would be GREATLY appreciated!

Thanks
Jack

HOME-EXAMPLE.png

STORE-EXAMPLE.png

Link to comment
  • Replies 3
  • Views 249
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

#1. To add font to button/name, you can use this CSS code

div.sqs-add-to-cart-button-inner {
    font-family: 'Anton' !important;
}
.grid-title {
    font-family: 'Anton' !important;
}

#2. Show something like this?

image.thumb.png.1af3157a0563fef3dbd57264bcf6a2d3.png

#3. Yes. It is possible. I used to this for a member, 1 month ago, it is a bit tricky

Idea here

  • Add 2 Product Blocks under these

image.png.cfbf9339d41cd967eeccea1cfb5e7246.png

  • Use CSS code to hide these product blocks
  • Use jQuery to set behavior: when user click Order Now >> Will tell browser click corresponding purchase button on hidden product block

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
5 hours ago, tuanphan said:

#1. To add font to button/name, you can use this CSS code

div.sqs-add-to-cart-button-inner {
    font-family: 'Anton' !important;
}
.grid-title {
    font-family: 'Anton' !important;
}

#2. Show something like this?

image.thumb.png.1af3157a0563fef3dbd57264bcf6a2d3.png

#3. Yes. It is possible. I used to this for a member, 1 month ago, it is a bit tricky

Idea here

  • Add 2 Product Blocks under these

image.png.cfbf9339d41cd967eeccea1cfb5e7246.png

  • Use CSS code to hide these product blocks
  • Use jQuery to set behavior: when user click Order Now >> Will tell browser click corresponding purchase button on hidden product block

Thanks for providing the CSS code to amend the fonts, that worked perfectly.

Re point 2, yes, that's exactly what I need, the product description shows on the individual product pages but I need that breakdown visible on the store page. Is that possible to insert via custom css.

Re point 3, to be completely honest I'm not familiar with jquery so I'd need some more guidance here, any help would be greatly appreciated. Also not entirely sure if that method would work as these are set up as 'services' as opposed to 'products' therefore when I create a product block there isn't a way to link this to the services I'm offering, as far as I'm aware anyway...

Thankyou again for your help!

Link to comment
  • 2 weeks later...
On 7/6/2024 at 9:41 PM, JackX2YCreative said:

Thanks for providing the CSS code to amend the fonts, that worked perfectly.

Re point 2, yes, that's exactly what I need, the product description shows on the individual product pages but I need that breakdown visible on the store page. Is that possible to insert via custom css.

Re point 3, to be completely honest I'm not familiar with jquery so I'd need some more guidance here, any help would be greatly appreciated. Also not entirely sure if that method would work as these are set up as 'services' as opposed to 'products' therefore when I create a product block there isn't a way to link this to the services I'm offering, as far as I'm aware anyway...

Thankyou again for your help!

Question 2. It will require some code. You can follow these steps.

I will do an example on my site, you can repeat for your case.

 Suppose I need to add text to these products

image.thumb.png.6364cff7faac29eeb66597fd1e3575ed.png

#1. First, edit Shop Page > Add a Blank Section under Products

image.png.0fb9c92a750bb784e0cb135218c6dec9.png

#2. Add some Text Blocks. In my example, we will add text to 2 products, so we will add 2 Text Blocks

image.thumb.png.f1eca96ae6a9aa35c32003bcdae13bf3.png

#3. Use Squarespace ID Finder to find ID of 2 Text Blocks.
In my example, we will have
  • Text 1: #block-yui_3_17_2_1_1721446484537_27294
  • Text 2: #block-yui_3_17_2_1_1721446484537_28268

image.thumb.png.a712c8b9065d73bd0d6058f8d7b6ee7d.png

#4. Find ID of 2 Products.
Here 2 products have urls:
  • Product 1: /store-inset-sidebar/p/style-02
  •  Product 2: /store-inset-sidebar/p/style-03

image.png.8b6f967daaad58336a024fc20a6c8208.png

image.png.f90309dbf4b1df0c9bf10f0605b67320.png

so Product ID will be like this
* Product 1: div#thumb-style-02
* Product 2: div#thumb-style-03
 
#5. Use this code to Code Injection - Footer (or Shop Page Header Injection)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // Product 1
    $('#block-yui_3_17_2_1_1721446484537_27294').insertBefore('div#thumb-style-02 .plp-grid-add-to-cart');
    // Product 2
   $('#block-yui_3_17_2_1_1721446484537_28268').insertBefore('div#thumb-style-03 .plp-grid-add-to-cart');
});
</script>

 

image.thumb.png.34556306f92da534cdb1bbc48a044880.png
 
#6. Result
 
image.thumb.png.a5c1effbd4d5e97ab0ab163ee22eae20.png
#7. If you want to hide Section (you created in #1). You can use tool in #3 to find Section ID, then use a code like this to Custom CSS to hide it.
section[data-section-id="669b30ddb256453d6371f219"] {
  display: none;
}

 

image.png.4699c1b256a376333f3435587429e6ba.png
 
You can try above, then I will give code for Question 3.
 
 
 

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

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.