Need help to create custom variants button in dawn theme product page

[TheLivingCo]

Need help to create custom variants button in dawn theme product page same as below shared s.s.

[rajweb]

Hey @TheLivingCo ,

To achieve a similar custom variant selection layout in the Dawn theme on your product page, you’ll need to modify the product template and use custom CSS to style the buttons. Here are the steps to get started:

Follow these steps:

1. Online store > Theme > Edit Code

2. Open the main-product.liquid (or similar product template file) in the Section folder.

3. Locate the area where product variants are rendered. By default, this might be a dropdown or a button layout. You’ll replace it with a custom button-based layout.

Create Custom Buttons for Variants:

1. Replace the default variant selection code with custom buttons that render each variant as a separate button.

2. Use a for loop to iterate through the variants and display each one as a button with relevant details like price, discount, and package information.

Here’s a sample snippet to create buttons for each variant:

  {% for variant in product.variants %}
    
  {% endfor %}

Add JavaScript for Variant Selection:

Add JavaScript to handle variant selection when a user clicks a button. This code will set the selected variant ID on the form.

Style the Variant Buttons:

Use custom CSS to style the variant buttons to match the look in the screenshot. You can add the following CSS in your base.css or theme.css file.

.variant-options {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.variant-button {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.3s;
}
.variant-button.active, .variant-button:hover {
  background-color: #ffe4e1;
}
.variant-title {
  font-weight: bold;
  font-size: 16px;
}
.variant-price {
  font-size: 14px;
  color: #ff6a6a;
}
.variant-discount {
  font-size: 12px;
  color: #999;
}
.variant-percentage {
  font-size: 14px;
  color: #ff6a6a;
  font-weight: bold;
}

Test and Adjust:

-Preview your product page to ensure the buttons are styled correctly and functional.

-Adjust the styles as needed to achieve the exact look shown in your screenshot.

Let me know if you need further assistance with any of these steps or with fine-tuning the design.

If I was able to help you, please don’t forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma

[TheLivingCo]

Hi Rajweb,

thank you for your help, can you help me about where to add this codes

[rajweb]

@TheLivingCo ,

Certainly! Here’s a step-by-step guide on where exactly to place each part of the code in your Dawn theme:

Steps 1. Add Custom Variant Buttons to the Product Template:

1. Go to Shopify Admin:
   Navigate to Online Store > Themes.

2. Edit Code:
   Find the Dawn theme, click on Actions > Edit Code.

3. Open Product Template:
   In the code editor, go to the Sections folder and look for a file named main-product.liquid or product-template.liquid . Open this file.

4. Locate the Variant Selector:
   In the file, find the section where variants are displayed. This is usually a element for the variant dropdown or buttons for variant options. Replace the Existing Variant Code with Custom Buttons: Comment out or delete the existing code that generates the variant selector. Then, paste the custom variant button code in its place. Save the Product Template: After adding the new code, save the main-product.liquid file. Step 2. Add JavaScript for Variant Selection in the Product Template: 1. Scroll to the End of the Product Template File: In the same main-product.liquid or product-template.liquid file, scroll to the bottom or find an existing section if there is one. 2. Add the javaScript Code: Paste the JavaScript code for handling variant selection at the bottom of this file. 3. Save the file: After adding the JavaScript, save the main-product.liquid file again. Step 3. Add Custom CSS to Style the Variant Buttons: 1. Open the CSS File: In the Assets folder, locate the main CSS file, typically named base.css or theme.css . 2. Scroll to the Bottom of the CSS file: Go to the end of the CSS file to keep your new styles organized and separate. 3. Add the Custom Code Paste the CSS code for styling the variant buttons at the end of this file. 4. Save the CSS file: After adding the CSS, save the file. Step 4. Preview and Test. If you have any further questions, please feel free to email me, and we can discuss this in more detail. thanks

[TheLivingCo]

Thank you for your help but still i’m not able to do that. can you help me?

[rajweb]

Could you please send me an email so we can discuss this further? I’d be happy to go over the details with you.