Change amount of product buttons

Store Design

Topic summary

A store owner wants to redesign product variant buttons on their Shopify site (myglowpurse.com) from small bubble-style buttons to larger rectangular ones that display quantity, price, and discount percentage together.

Current Issue:

  • Product pages show compact buttons labeled “1 pcs, 2 pcs, 4 pcs, 6 pcs”
  • Owner wants expanded buttons showing multiple details (quantity + price + % off) in a rectangular format
  • Provided a reference image showing the desired button style

Proposed Solutions:

  • Custom coding required to achieve this specific layout
  • Cannot simply copy code from template sites
  • One community expert offered to implement the custom code
  • Alternative suggestion: manually edit theme CSS files to modify button styling (border-radius, width, padding)

Status: Discussion remains open. The owner connected with an expert who can provide the custom code solution, though timeline and implementation details were shared privately.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

is there any way to change the amount of products buttons from the typical bubble buttons to the long rectangular ones?

2

Hi @sarpow welcome to the Shopify Community,

Yes it can be possible please share the store URL so that i can look into it and get back to you with a solution.

Thanks

3

https://myglowpurse.com/

pass: being

4

Hi @sarpow ,

Is that what you want to achieve? if yes then i will share the code :slightly_smiling_face:

2025-01-10 10_50_06-Window.png
2025-01-10 10_50_06-Window.png1184×475 152 KB

5

no, i want it so when you click on the product, instead of the options being small little buttons that say 1 pcs, 2 pcs, 4 pcs, 6 pcs, i want long rectangular buttons which say the quantity, price, % off, etc.

6

Right so you want these buttons to have all the information you shared, %off, price quantity? Do you have any example?

2025-01-10 10_53_52-Window.png
2025-01-10 10_53_52-Window.png573×523 14.5 KB

7

Screenshot 2025-01-10 at 3.34.00 PM.png
Screenshot 2025-01-10 at 3.34.00 PM.png1112×892 31.9 KB

i want it to look like this, but be able to change the colours and stuff.

8

@sarpow this can be done by some custom code. So i suggest you to hire an Expert if you are not a familiar with the core code.

9

is there any way to copy the whole code from a template site?

10

No currently its not possible.

11

do you know how to code it to get those buttons?

12

@sarpow yes i can do that for you.

13

awesome, how long will it take?

thanks for your help

14

just sent you details

15

Dear Sarpow,

Yes, you can change the product button style from bubble buttons to long rectangular ones by customizing your Shopify theme. Here’s how:

  1. Edit Theme Code: Go to your Shopify admin, navigate to Online Store > Themes, click Actions > Edit Code.

  2. Locate CSS/SCSS File: Find your theme’s CSS or SCSS file (e.g., theme.css or style.scss).

  3. Add Custom CSS: Add code to style the buttons as rectangular, such as:

    css

    .button-class { width: 100%; border-radius: 0; padding: 10px 20px; }

    Replace .button-class with the appropriate button class name from your theme.

  4. Save and Preview: Save the changes and preview your store to ensure the new style appears as intended.

16

To change product buttons from bubble to rectangular in Shopify, go to Online Store > Themes > Edit Code. Locate the CSS file and add custom CSS like:

Save and preview your store to see the changes.